/* The family home. Its colours and type are the family's own tokens (design/brands/scribe, the midpoint of the
   brands'); each app's part carries data-brand, and inside it every token is that app's (assets/brands.css), so
   the apps look like themselves side by side. */

h2 { font-weight: 650; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
.brand-text { font-weight: 650; font-size: 1.0625rem; color: var(--scribe-text); min-height: 44px; }
section + section { border-top: 0; }

/* The headline: one line in each app's own voice. */
.family-hero { padding: var(--scribe-space-12) 0 var(--scribe-space-8); }
.family-hero h1 { font-size: clamp(2.35rem, 7.2vw, 4.5rem); line-height: 1.08; margin-bottom: var(--scribe-space-6); }
.voice { display: block; font-family: var(--scribe-font-display); color: var(--scribe-brand-text); }
.voice[data-brand="fretscribe"] { font-weight: 600; font-size: 0.86em; letter-spacing: -0.02em; line-height: 1.25; }

/* The two apps, each at work in its own colours and type. */
.apps { padding: 0 0 var(--scribe-space-12); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--scribe-space-6); }
.app {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--scribe-bg); color: var(--scribe-text); font-family: var(--scribe-font-text);
  border: 1px solid var(--scribe-border); border-radius: var(--scribe-radius-md); box-shadow: var(--scribe-elevation-2);
}
.app .strip { margin: 0; }
.app .strip-stage { --pen: 46%; background: var(--scribe-surface-raised); border-top: 0; -webkit-mask-image: none; mask-image: none; }
.app .strip-controls, .app .strip figcaption { padding: 0 var(--scribe-space-5); }
.app-text { padding: var(--scribe-space-6) var(--scribe-space-5) var(--scribe-space-6); margin-top: auto; }
/* The app's name stands over its strip: on a phone the name is read before the music. */
.app h2 { font-family: var(--scribe-font-display); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 400; letter-spacing: -0.01em; margin: 0; padding: 0 var(--scribe-space-5); height: 4.5rem; display: flex; align-items: center; color: var(--scribe-brand-text); }
.app[data-brand="fretscribe"] h2 { font-weight: 600; font-size: clamp(1.8rem, 4.4vw, 2.4rem); }
.app .button { min-height: 48px; }

/* Which one is for you: two answers, each in its app's colours. */
.which { list-style: none; padding: 0; margin: var(--scribe-space-6) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--scribe-space-5); }
.which a {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 26%, 150px); align-items: center; gap: var(--scribe-space-5); height: 100%; padding: var(--scribe-space-5) var(--scribe-space-6); text-decoration: none;
  background: var(--scribe-bg); color: var(--scribe-text); font-family: var(--scribe-font-text);
  border: 1px solid var(--scribe-border-strong); border-left: 6px solid var(--scribe-brand); border-radius: var(--scribe-radius-md);
}
.which a:hover { border-color: var(--scribe-brand); color: var(--scribe-text); }
.which-words { display: grid; gap: var(--scribe-space-1); }
.which .phone-frame { display: block; padding: 4px; border-radius: 14px; }
.which .phone-frame img { border-radius: 10px; }
.which-if { color: var(--scribe-text-muted); }
.which-then { font-family: var(--scribe-font-display); font-size: 2rem; line-height: 1.1; color: var(--scribe-brand-text); }
[data-brand="fretscribe"] .which-then { font-weight: 600; font-size: 1.75rem; }
.which-both { margin-top: var(--scribe-space-5); max-width: 44em; color: var(--scribe-text-muted); }

/* What the apps share. */
.together { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--scribe-space-12); align-items: center; }
.together figure { margin: 0; }
.diagram-home { max-width: 340px; }
.diagram .net { fill: var(--scribe-surface-raised); stroke: var(--scribe-border-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.diagram-home .box.model { fill: var(--scribe-bg); stroke: var(--scribe-text); stroke-width: 1.75; }
.diagram-home .box { fill: none; stroke-dasharray: 2 4; }
.diagram-home .box.model { stroke-dasharray: none; }
.diagram-home .lbl { letter-spacing: 0; font-size: 13px; fill: var(--scribe-text-muted); }
.story { margin: var(--scribe-space-6) 0 0; }
.story dt { font-weight: 650; margin-top: var(--scribe-space-5); }
.story dd { margin: var(--scribe-space-1) 0 0; color: var(--scribe-text-muted); max-width: 34em; }
.plain { list-style: none; padding: 0; margin: var(--scribe-space-5) 0 0; display: grid; gap: var(--scribe-space-2); max-width: 52rem; color: var(--scribe-text-muted); font-size: var(--scribe-type-callout-size); }
.plain strong { color: var(--scribe-text); }
#bandroom { padding-top: 0; }
.after-actions { margin-top: var(--scribe-space-5); font-size: var(--scribe-type-callout-size); }
@media (max-width: 900px) {
  .together { grid-template-columns: minmax(0, 1fr); gap: var(--scribe-space-8); }
  .family-hero { padding-top: var(--scribe-space-8); }
}
@media (forced-colors: active) { .diagram .net { fill: Canvas; stroke: CanvasText; } }