/* ─────────────────────────────────────────────────────────
       v8 — Editorial composition of the live-site content
       inside the Awning identity system.

       Governing principle: every section is a typographic stanza,
       never a widget. Hairlines do the work cards do elsewhere.
       Ochre appears at the rate of a copyeditor's red pen.
       Source Serif appears exactly ONCE on the marketing site —
       as the Beam pull-quote — earning its keep as a quotation
       voice without diluting the "serif lives in briefing PDFs"
       rule.
       ───────────────────────────────────────────────────────── */

    /* ── Wordmark — calmed awning (carried from v6) ── */
    .rds-wordmark {
      position: relative;
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -0.035em;
      color: var(--rds-storm);
      line-height: 1;
    }
    .rds-wordmark::before {
      content: '';
      position: absolute;
      top: 0.14em;
      left: 0.14em;
      width: 0.58em;
      height: 0.09em;
      background: currentColor;
      border-radius: 0.02em;
    }
    /* v10 — ochre cap on the right end of the awning bar, mirroring the
       column-m tick on the Beam wordmark. Same accent vocabulary across
       both marks. */
    .rds-wordmark::after {
      content: '';
      position: absolute;
      top: 0.14em;
      left: 0.62em;
      width: 0.10em;
      height: 0.09em;
      background: var(--rds-ochre);
    }
    .beam-wordmark {
      position: relative;
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -0.035em;
      color: var(--rds-storm);
      line-height: 1;
    }
    .beam-wordmark .m {
      position: relative;
      display: inline-block;
    }
    /* m-valley raindrop: ochre teardrop above the m's natural V-valley.
       Inherits RDS's teardrop vocabulary so Beam reads as part of the
       Rainy Day family — the brand's water lands on its engine. */
    .beam-wordmark .m::before {
      content: '';
      position: absolute;
      left: 18%;
      top: -0.30em;
      width: 0;
      height: 0;
      border-left: 0.115em solid transparent;
      border-right: 0.115em solid transparent;
      border-top: 0.28em solid var(--rds-ochre);
    }
    .nav-mark { font-size: 24px; }

    /* ── Hero ── */
    .hero-v8 {
      text-align: center;
      padding-block: clamp(96px, 13vw, 168px);
    }
    .hero-v8 .eyebrow { display: inline-block; margin-bottom: 36px; }
    .hero-v8 .hero-mark {
      font-size: clamp(48px, 7vw, 96px);
      display: block;
      width: fit-content;
      margin: 0 auto 32px;
    }
    .hero-v8 .motto {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(26px, 2.4vw, 34px);
      letter-spacing: -0.02em;
      color: var(--rds-storm);
      margin: 0 auto 28px;
      line-height: 1.15;
    }
    .hero-v8 .pitch {
      font-family: var(--font-ui);
      font-weight: 400;
      font-size: clamp(18px, 1.4vw, 21px);
      line-height: 1.6;
      color: var(--rds-storm);
      max-width: 56ch;
      margin: 0 auto 44px;
    }
    .hero-v8 .hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .hero-v8 .ochre-rule {
      width: 160px;
      height: 4px;
      background: var(--rds-ochre);
      border-radius: 2px;
      margin: clamp(64px, 8vw, 96px) auto 0;
    }

    /* ── Section header (left-aligned, calm) ── */
    .sec-head { max-width: 64ch; margin-bottom: 48px; }
    .sec-head .eyebrow { display: inline-block; margin-bottom: 16px; }
    .sec-head h2 { margin-bottom: 14px; max-width: 22ch; }
    .sec-head .dek {
      font-family: var(--font-ui);
      font-size: 18px;
      color: var(--rds-mute);
      line-height: 1.55;
      max-width: 56ch;
    }

    /* ── Roster (Who we protect) — magazine TOC pattern ── */
    .roster { border-top: 1px solid var(--rds-rule); margin-top: 8px; }
    .roster-row {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--rds-rule);
      align-items: baseline;
    }
    .roster-label {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-storm);
      font-weight: 500;
    }
    .roster-line {
      font-family: var(--font-ui);
      font-size: 19px;
      line-height: 1.5;
      color: var(--rds-storm);
    }
    .roster-line em {
      color: var(--rds-ochre-deep);
      font-style: normal;
      font-weight: 500;
    }

    /* ── How we work — three stanzas ── */
    .how-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px;
      margin-top: 8px;
    }
    .how-step { border-top: 1px solid var(--rds-rule); padding-top: 28px; }
    .how-step .step-num {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      color: var(--rds-ochre-deep);
      margin-bottom: 14px;
      display: block;
      font-weight: 500;
    }
    .how-step h3 { font-size: 24px; margin-bottom: 12px; }
    .how-step p {
      font-family: var(--font-ui);
      font-size: 16px;
      color: var(--rds-mute);
      line-height: 1.6;
    }

    /* ── Founding-member note (editorial stanza above price table) ── */
    .founding-note {
      display: grid;
      grid-template-columns: 4px 1fr;
      gap: 24px;
      align-items: center;
      padding: 24px 28px 24px 0;
      margin-bottom: 32px;
      background: rgba(196, 136, 74, 0.06);
      border-top: 1px solid var(--rds-rule);
      border-bottom: 1px solid var(--rds-rule);
    }
    .founding-note::before {
      content: '';
      background: var(--rds-ochre);
      border-radius: 2px;
      align-self: stretch;
      margin-left: 0;
    }
    .founding-note .fn-body { padding-left: 24px; }
    .founding-note .fn-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rds-ochre-deep);
      font-weight: 500;
      margin-bottom: 8px;
    }
    .founding-note .fn-line {
      font-family: var(--font-ui);
      font-size: 17px;
      color: var(--rds-storm);
      line-height: 1.5;
      max-width: 64ch;
    }
    .founding-note .fn-line strong { font-weight: 600; }
    .founding-note .fn-count {
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 500;
      color: var(--rds-ochre-deep);
      letter-spacing: -0.03em;
      line-height: 1;
      padding-right: 8px;
    }
    .founding-note .fn-count small {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      color: var(--rds-mute);
      text-transform: uppercase;
      margin-top: 6px;
      font-weight: 500;
    }

    /* ── IR engagement row (separately-billed add-on, below price table) ── */
    .ir-row {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 32px;
      padding: 28px 0;
      margin-top: 32px;
      border-top: 1px solid var(--rds-rule);
      border-bottom: 1px solid var(--rds-rule);
      align-items: baseline;
    }
    .ir-row .ir-label {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-storm);
      font-weight: 500;
    }
    .ir-row .ir-body {
      font-family: var(--font-ui);
      font-size: 17px;
      color: var(--rds-storm);
      line-height: 1.55;
      max-width: 64ch;
    }
    .ir-row .ir-body em {
      font-style: normal;
      color: var(--rds-ochre-deep);
      font-weight: 500;
    }

    /* ── Founder bio (single editorial entry, replaces three-card team) ── */
    .founder {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 64px;
      align-items: start;
    }
    /* Single-column variant — when the meta card is dropped and the prose
       carries the credentials inline. Lets the paragraph flow at full
       container width (still constrained by max-width: 62ch on p). */
    .founder.founder--single { grid-template-columns: 1fr; }
    .founder-meta {
      border-left: 2px solid var(--rds-ochre);
      padding-left: 28px;
    }
    .founder-meta .founder-role {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-ochre-deep);
      font-weight: 500;
      margin-bottom: 14px;
    }
    .founder-meta .founder-name {
      font-family: var(--font-display);
      font-size: 38px;
      font-weight: 500;
      color: var(--rds-storm);
      letter-spacing: -0.025em;
      line-height: 1.05;
      margin-bottom: 24px;
    }
    .founder-meta .founder-creds {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--rds-storm);
      line-height: 1.9;
    }
    .founder-meta .founder-creds .cred-line {
      display: block;
      padding-block: 2px;
    }
    .founder-meta .founder-creds .cred-line + .cred-line {
      border-top: 1px solid var(--rds-rule);
      margin-top: 6px;
      padding-top: 8px;
    }
    .founder-prose p {
      font-family: var(--font-ui);
      font-size: 18px;
      line-height: 1.7;
      color: var(--rds-storm);
      max-width: 62ch;
    }
    .founder-prose p + p { margin-top: 20px; }

    /* ── Pricing — price table, not card grid ── */
    .price-table {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--rds-rule);
      border-bottom: 1px solid var(--rds-rule);
    }
    .price-col {
      padding: 36px 28px 36px 0;
      border-right: 1px solid var(--rds-rule);
    }
    .price-col:last-child { border-right: none; padding-right: 0; }
    .price-col:not(:first-child) { padding-left: 28px; }
    .price-name {
      font-family: var(--font-ui);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rds-storm);
      margin-bottom: 18px;
    }
    .price-tag {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 20px;
    }
    .price-tag .num {
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 500;
      color: var(--rds-ochre-deep);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .price-tag .unit {
      font-family: var(--font-ui);
      font-size: 14px;
      color: var(--rds-mute);
    }
    .price-frame {
      font-family: var(--font-ui);
      font-size: 15px;
      color: var(--rds-storm);
      line-height: 1.5;
      margin-bottom: 16px;
      font-weight: 500;
    }
    .price-includes {
      font-family: var(--font-ui);
      font-size: 14px;
      color: var(--rds-mute);
      line-height: 1.6;
    }
    .price-foot {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--rds-mute);
      margin-top: 24px;
      text-transform: uppercase;
    }

    /* ── Manifesto (What we believe) — single column, big air ── */
    .creed { display: grid; gap: 56px; max-width: 60ch; }
    .creed-row {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 36px;
      align-items: baseline;
    }
    .creed-word {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 500;
      color: var(--rds-storm);
      letter-spacing: -0.02em;
    }
    .creed-word .dot { color: var(--rds-ochre); }
    .creed-body {
      font-family: var(--font-ui);
      font-size: 17px;
      line-height: 1.6;
      color: var(--rds-mute);
    }

    /* ── Beam strip (single Source Serif pull-quote earns its keep) ── */
    .beam-row {
      display: flex;
      align-items: baseline;
      gap: 20px;
      font-family: var(--font-display);
    }
    .beam-row .beam-wordmark {
      font-size: clamp(48px, 7vw, 84px);
      color: var(--rds-bone);
    }
    .beam-row .tag {
      font-family: var(--font-ui);
      font-size: 18px;
      color: rgba(244, 241, 235, 0.68);
    }
    .beam-pullquote {
      font-family: var(--font-body);
      font-style: italic;
      font-size: clamp(24px, 2.4vw, 32px);
      line-height: 1.4;
      color: var(--rds-bone);
      max-width: 28ch;
      margin: 48px 0 24px;
      letter-spacing: -0.005em;
    }
    .beam-pullquote::before {
      content: '';
      display: block;
      width: 28px;
      height: 2px;
      background: var(--rds-ochre);
      border-radius: 1px;
      margin-bottom: 28px;
    }
    .beam-attr {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.14em;
      color: rgba(244, 241, 235, 0.55);
      text-transform: uppercase;
      margin-bottom: 36px;
    }
    .beam-strip p.lead {
      font-family: var(--font-ui);
      font-size: 18px;
      color: rgba(244, 241, 235, 0.82);
      max-width: 56ch;
      line-height: 1.6;
    }

    /* ── Beam specs — engineering credibility, editorial spec sheet ── */
    .beam-specs {
      margin-top: 96px;
      padding-top: 64px;
      border-top: 1px solid rgba(196, 136, 74, 0.30);
    }
    .beam-specs-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rds-ochre);
      margin-bottom: 16px;
      font-weight: 500;
    }
    .beam-specs-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(26px, 2.5vw, 36px);
      letter-spacing: -0.02em;
      color: var(--rds-bone);
      line-height: 1.2;
      max-width: 34ch;
      margin-bottom: 64px;
    }
    .beam-specs-intro {
      font-family: var(--font-ui);
      font-size: 17px;
      line-height: 1.7;
      color: rgba(244, 241, 235, 0.72);
      max-width: 68ch;
      margin-bottom: 64px;
    }
    .beam-specs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px 72px;
    }
    .beam-spec-label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-ochre);
      margin-bottom: 14px;
      font-weight: 500;
    }
    .beam-spec-body {
      font-family: var(--font-ui);
      font-size: 16px;
      line-height: 1.65;
      color: rgba(244, 241, 235, 0.78);
      max-width: 50ch;
    }
    .beam-spec-body strong {
      color: var(--rds-bone);
      font-weight: 500;
    }
    .beam-spec-sources {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: rgba(244, 241, 235, 0.45);
      margin-top: 12px;
      line-height: 1.7;
    }

    /* ── Team — three editorial bios, no headshots ── */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 56px;
    }
    .team-card { border-left: 2px solid var(--rds-ochre); padding-left: 24px; }
    .team-role {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-ochre-deep);
      margin-bottom: 10px;
      font-weight: 500;
    }
    .team-name {
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 500;
      color: var(--rds-storm);
      letter-spacing: -0.02em;
      margin-bottom: 12px;
    }
    .team-bio {
      font-family: var(--font-ui);
      font-size: 16px;
      line-height: 1.6;
      color: var(--rds-mute);
    }

    /* ── FAQ — open editorial Q&A ── */
    .faq { display: grid; gap: 40px; max-width: 64ch; }
    .faq-item { border-top: 1px solid var(--rds-rule); padding-top: 24px; }
    .faq-q {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 500;
      font-size: 22px;
      color: var(--rds-storm);
      margin-bottom: 16px;
      letter-spacing: -0.01em;
      line-height: 1.35;
    }
    .faq-rule { width: 28px; height: 2px; background: var(--rds-ochre); margin-bottom: 14px; border-radius: 1px; }
    .faq-a {
      font-family: var(--font-ui);
      font-size: 17px;
      line-height: 1.65;
      color: var(--rds-storm);
      max-width: 60ch;
    }

    /* ── Closing CTA (hero-symmetric bookend) ── */
    .closing {
      text-align: center;
      padding-block: clamp(96px, 12vw, 144px);
      border-top: 1px solid var(--rds-rule);
    }
    .closing .ochre-rule-top {
      width: 160px;
      height: 4px;
      background: var(--rds-ochre);
      border-radius: 2px;
      margin: 0 auto 48px;
    }
    .closing .eyebrow { display: inline-block; margin-bottom: 24px; }
    .closing h2 { max-width: 22ch; margin: 0 auto 24px; }
    .closing p {
      font-family: var(--font-ui);
      font-size: 19px;
      color: var(--rds-mute);
      max-width: 52ch;
      margin: 0 auto 40px;
      line-height: 1.55;
    }

    /* ── Contact form — hairline editorial fields, not a SaaS card ── */
    .contact-form {
      max-width: 640px;
      margin: 56px auto 0;
      text-align: left;
    }
    .contact-form .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-bottom: 28px;
    }
    .contact-form .field { display: flex; flex-direction: column; }
    .contact-form label {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-storm);
      margin-bottom: 10px;
      font-weight: 500;
    }
    .contact-form label .req { color: var(--rds-ochre-deep); margin-left: 4px; }
    .contact-form label .opt {
      color: var(--rds-mute);
      font-weight: 400;
      letter-spacing: 0.12em;
      margin-left: 8px;
      text-transform: none;
      font-size: 10px;
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form select,
    .contact-form textarea {
      font-family: var(--font-ui);
      font-size: 17px;
      color: var(--rds-storm);
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--rds-rule);
      padding: 10px 0;
      width: 100%;
      transition: border-color 0.15s ease;
    }
    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none;
      border-bottom-color: var(--rds-ochre);
    }
    .contact-form select {
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--rds-storm) 50%),
                        linear-gradient(135deg, var(--rds-storm) 50%, transparent 50%);
      background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px;
      background-size: 6px 6px;
      background-repeat: no-repeat;
      padding-right: 28px;
    }
    .contact-form .field-full { margin-bottom: 28px; }
    .contact-form textarea {
      resize: vertical;
      min-height: 110px;
      line-height: 1.5;
    }
    .contact-form .form-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      margin-top: 36px;
      flex-wrap: wrap;
    }
    .contact-form .promise {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-mute);
    }
    .contact-form .promise strong {
      color: var(--rds-storm);
      font-weight: 500;
    }
    .contact-alt {
      margin-top: 40px;
      padding-top: 28px;
      border-top: 1px solid var(--rds-rule);
      font-family: var(--font-ui);
      font-size: 15px;
      color: var(--rds-mute);
      text-align: center;
      line-height: 1.6;
    }
    .contact-alt a { color: var(--rds-storm); border-bottom: 1px solid var(--rds-ochre); }
    .contact-alt a:hover { color: var(--rds-ochre-deep); }

    /* ── Contact form: invalid-field highlight + post-submit success state ── */
    .contact-form input.invalid,
    .contact-form select.invalid,
    .contact-form textarea.invalid {
      border-bottom-color: #c0392b;
    }
    .contact-form .form-error {
      font-family: var(--font-ui);
      font-size: 14px;
      color: #c0392b;
      margin-top: 12px;
      line-height: 1.5;
    }
    .contact-success {
      max-width: 640px;
      margin: 56px auto 0;
      padding: 40px 0;
      text-align: left;
      border-top: 1px solid var(--rds-rule);
      border-bottom: 1px solid var(--rds-rule);
    }
    .contact-success .cf-success-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rds-ochre-deep);
      font-weight: 500;
      margin-bottom: 14px;
    }
    .contact-success .cf-success-h {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(22px, 2vw, 28px);
      letter-spacing: -0.02em;
      color: var(--rds-storm);
      line-height: 1.3;
      max-width: 28ch;
      margin-bottom: 18px;
    }
    .contact-success .cf-success-body {
      font-family: var(--font-ui);
      font-size: 16px;
      color: var(--rds-mute);
      line-height: 1.6;
    }
    .contact-success .cf-success-body a {
      color: var(--rds-storm);
      border-bottom: 1px solid var(--rds-ochre);
    }
    .contact-success .cf-success-body a:hover { color: var(--rds-ochre-deep); }

    /* ── Footer (tagline + nav columns) ── */
    footer.site-footer {
      background: var(--rds-bone-deep);
      padding-block: 72px 40px;
      border-top: 1px solid var(--rds-rule);
      color: var(--rds-mute);
      font-family: var(--font-ui);
    }
    /* Override identity.css's footer .container { display: flex } —
       v10 footer is composed as a vertical stack (tagline → grid → meta),
       not a horizontal split. */
    footer.site-footer .container {
      display: block;
    }
    .footer-tagline {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(18px, 1.8vw, 22px);
      color: var(--rds-storm);
      letter-spacing: -0.01em;
      max-width: 40ch;
      line-height: 1.4;
      margin-bottom: 56px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 56px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--rds-rule);
    }
    .footer-col h4 {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--rds-storm);
      margin-bottom: 18px;
      font-weight: 500;
    }
    .footer-col a, .footer-col li {
      font-size: 15px;
      color: var(--rds-mute);
      display: block;
      padding: 6px 0;
    }
    .footer-col a:hover { color: var(--rds-ochre-deep); }
    .footer-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--rds-mute);
      text-transform: uppercase;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .roster-row { grid-template-columns: 1fr; gap: 8px; }
      .how-row { grid-template-columns: 1fr; gap: 28px; }
      .price-table { grid-template-columns: 1fr; }
      .price-col { border-right: none; border-bottom: 1px solid var(--rds-rule); padding: 32px 0; }
      .price-col:not(:first-child) { padding-left: 0; }
      .creed-row { grid-template-columns: 1fr; gap: 8px; }
      .team-grid { grid-template-columns: 1fr; gap: 32px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
      .footer-col { min-width: 0; }
      .footer-col a { overflow-wrap: anywhere; word-break: break-word; }
      .founding-note { grid-template-columns: 4px 1fr; }
      .founding-note .fn-count { grid-column: 2; padding-left: 24px; margin-top: 12px; }
      .ir-row { grid-template-columns: 1fr; gap: 8px; }
      .founder { grid-template-columns: 1fr; gap: 36px; }
      .contact-form .form-row { grid-template-columns: 1fr; gap: 24px; }
      .beam-specs-grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* Phone-specific: single-column footer, stacked footer-meta */
    @media (max-width: 560px) {
      .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; margin-bottom: 32px; }
      .footer-tagline { margin-bottom: 40px; }
      .footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.5;
      }
    }

    /* ── Replacements for previously-inline style attributes
       (extracted so the live site's CSP can apply them). ── */
    .btn--compact { padding: 10px 18px; font-size: 14px; }
    .section--white-rule { background: #fff; border-block: 1px solid var(--rds-rule); }
    .section--bone-deep-rule { background: var(--rds-bone-deep); border-block: 1px solid var(--rds-rule); }
    /* Bumped from 18px to 44px so the m-valley raindrop has clear sky
       above the wordmark and doesn't crowd "THE PLATFORM UNDERNEATH". */
    .beam-row--inset { margin-top: 44px; }
    .hero-actions--mt-lg { margin-top: 64px; }
    .footer-brand-mark { font-size: 28px; }
    .footer-brand-blurb { font-size: 14px; margin-top: 14px; max-width: 32ch; line-height: 1.55; }

    /* Contact-form fallback (shown only if the send endpoint is unavailable). */
    .form-fallback { margin-top: 16px; }
    .form-fallback p { margin: 0 0 12px; color: var(--rds-storm); font-size: 14px; line-height: 1.5; }

    /* ════════════════════════════════════════════════════════
       Mobile UX pass — scannable pricing, hamburger nav, density.
       Scoped to the marketing page (home.css loads only on index.html).
       ════════════════════════════════════════════════════════ */

    /* Pricing "what's included" as scannable bullets, not run-on prose. */
    ul.price-includes { list-style: none; padding: 0; margin: 12px 0 0; }
    ul.price-includes li {
      position: relative;
      padding-left: 18px;
      margin-bottom: 9px;
    }
    ul.price-includes li:last-child { margin-bottom: 0; }
    ul.price-includes li::before {
      content: '';
      position: absolute;
      left: 0; top: 0.6em;
      width: 8px; height: 2px;
      background: var(--rds-ochre);
      border-radius: 1px;
    }

    /* Quiet customer sign-in link — utility weight, separated from the
       primary nav links by a thin hairline so it reads as "this is the
       door for returning customers", not a marketing destination. */
    .nav-signin {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--rds-bone);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.01em;
      text-decoration: none;
      position: relative;
      padding: 6px 0;
    }
    .nav-signin span { color: var(--rds-ochre); transition: transform 160ms ease; }
    .nav-signin:hover { color: var(--rds-ochre); }
    .nav-signin:hover span { transform: translateX(3px); }
    .nav-signin-bar {
      margin-left: 14px;
      padding: 7px 14px;
      border: 1px solid rgba(244, 241, 235, 0.28);
      border-radius: 2px;
      transition: border-color 160ms ease, background 160ms ease;
    }
    .nav-signin-bar:hover {
      border-color: var(--rds-ochre);
      background: rgba(212, 138, 58, 0.08);
    }

    /* Hamburger hidden on desktop; in-menu CTA only appears in the dropdown. */
    .nav-toggle { display: none; }
    .nav-cta-li, .nav-signin-li { display: none; }

    @media (max-width: 760px) {
      .nav-bar-cta { display: none; }
      .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px; height: 44px;
        padding: 0; margin: -8px -8px -8px 0;
        background: none; border: none; cursor: pointer;
      }
      .nav-toggle-bar {
        display: block;
        width: 22px; height: 2px;
        margin: 0 auto;
        background: var(--rds-storm);
        border-radius: 1px;
        transition: transform 160ms ease, opacity 160ms ease;
      }
      .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
      .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

      .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--rds-bone);
        border-bottom: 1px solid var(--rds-rule);
        box-shadow: 0 14px 28px rgba(26, 33, 40, 0.10);
        padding: 6px 0;
      }
      .nav-links.open { display: flex; }
      .nav-links li { width: 100%; }
      .nav-links .nav-link {
        display: block;
        padding: 15px 24px;
        font-size: 17px;
        border-bottom: 1px solid var(--rds-rule);
      }
      .nav-signin-bar { display: none; }
      .nav-signin-li {
        display: block;
        padding: 15px 24px;
        border-bottom: 1px solid rgba(244, 241, 235, 0.08);
      }
      .nav-signin-li .nav-signin {
        display: block;
        font-size: 17px;
        color: var(--rds-bone);
      }
      .nav-signin-li .nav-signin span { color: var(--rds-ochre); }
      .nav-cta-li { display: block; padding: 14px 24px; border-bottom: none; }
      .nav-menu-cta { display: block; text-align: center; }
    }

    /* Phone density — tighten the desktop-scale vertical rhythm. */
    @media (max-width: 560px) {
      section { padding-block: 44px; }
      .hero-v8 { padding-block: 48px 36px; }
      .hero-v8 .eyebrow { margin-bottom: 22px; }
      .hero-v8 .hero-mark { margin-bottom: 22px; }
      .hero-v8 .pitch { margin-bottom: 30px; }
      .hero-v8 .ochre-rule { margin-top: 40px; }
      .sec-head { margin-bottom: 26px; }
      .creed { gap: 24px; }
      .faq { gap: 22px; }
      .beam-specs-grid { gap: 28px; }
      .price-col { padding: 26px 0; }
    }

    /* Collapsible FAQ + Beam specs + audience roster + creed: open
       everywhere by default (editorial), collapsed on phones via JS.
       Summary is the question / spec label / audience label / value
       word.

       Pricing follows the same vocabulary but only the bullet list
       (".price-details") collapses — name + price + frame stay
       always-visible as the buying-decision header. */
    details.faq-item > summary,
    details.beam-spec > summary,
    details.roster-row > summary,
    details.creed-row > summary,
    details.price-details > summary { cursor: pointer; list-style: none; }
    details.faq-item > summary::-webkit-details-marker,
    details.beam-spec > summary::-webkit-details-marker,
    details.roster-row > summary::-webkit-details-marker,
    details.creed-row > summary::-webkit-details-marker,
    details.price-details > summary::-webkit-details-marker { display: none; }

    @media (min-width: 561px) {
      /* Desktop keeps the open editorial layout — no toggle affordance. */
      details.faq-item > summary,
      details.beam-spec > summary,
      details.roster-row > summary,
      details.creed-row > summary { cursor: default; }
      /* Pricing: hide the "What's included" toggle entirely on desktop;
         the bullet list is always visible inline as today. */
      details.price-details > summary { display: none; }
    }
    @media (max-width: 560px) {
      details.faq-item > summary,
      details.beam-spec > summary,
      details.roster-row > summary,
      details.creed-row > summary,
      details.price-details > summary {
        display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
      }
      details.faq-item > summary::after,
      details.beam-spec > summary::after,
      details.roster-row > summary::after,
      details.creed-row > summary::after,
      details.price-details > summary::after {
        content: '+'; flex: none;
        color: var(--rds-ochre); font-weight: 600; font-size: 1.15em; line-height: 1;
      }
      details[open].faq-item > summary::after,
      details[open].beam-spec > summary::after,
      details[open].roster-row > summary::after,
      details[open].creed-row > summary::after,
      details[open].price-details > summary::after { content: '\2013'; }

      /* Mobile-only styling for the "What's included" toggle line —
         mono-cap mini-label sitting just above the bullets. */
      details.price-details > summary.price-toggle {
        font-family: var(--font-mono);
        font-size: 12px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--rds-storm);
        padding: 14px 0 0;
        margin-top: 8px;
        border-top: 1px solid var(--rds-rule);
      }
    }