/* Shared responsive layer. !important overrides the DC export's inline layout. */
/* Restore the saved viewport instantly while the asynchronous page is hidden. */
html[data-fcs-loading] { scroll-behavior: auto !important; }
[data-menu-toggle] { display: none; }
[data-site-brand] { flex-shrink: 0; }
[data-menu-toggle]:focus-visible,
[data-site-nav] a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

@media (max-width: 1100px) {
  [data-site-header] { flex-wrap: wrap; gap: 0 12px !important; }
  html[data-fcs-navigation] [data-menu-toggle] {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-left: auto; min-width: 82px; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--seam); border-radius: 2px;
    background: var(--riser); color: var(--bone); cursor: pointer;
    font: 600 11px/1.2 "Archivo", system-ui, sans-serif;
    letter-spacing: .1em; text-transform: uppercase;
  }
  [data-menu-icon] { width: 14px; height: 10px; border-block: 1px solid currentColor; }
  [data-menu-toggle][aria-expanded="true"] [data-menu-icon] { transform: rotate(90deg); }
  [data-site-nav] {
    flex-basis: 100%; flex-direction: column; flex-wrap: nowrap !important; align-items: stretch !important; gap: 4px !important; padding-top: 16px;
  }
  html[data-fcs-navigation] [data-site-nav] { display: none !important; }
  html[data-fcs-navigation] [data-site-nav][data-open="true"] { display: flex !important; }
  [data-site-nav] > a { display: flex; flex: 0 0 auto; align-items: center; min-height: 44px; box-sizing: border-box; }
  [data-site-nav] > span { display: flex; align-items: center !important; min-height: 44px; border-left: 0 !important; padding-left: 0 !important; }
  [data-site-nav] > span a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 900px) {
  [data-col] > *, [data-footer-grid] > * { min-width: 0; }
  [data-footer-grid] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 32px !important; }
  [data-footer-contact] a { overflow-wrap: anywhere; }
  [data-awards] { grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 56px !important; }
  [data-awards-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  [data-steps] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-intro { padding: 96px 0 80px !important; }
  [data-hero-title] { font-size: clamp(64px, 10vw, 96px) !important; }
  [data-hero-meta] { gap: 16px 40px !important; padding-bottom: 48px !important; }
  [data-player-meters] { border-left: 0 !important; border-top: 1px solid var(--seam-soft); padding: 20px 0 0 !important; }
  [data-player-meters] > div { max-width: none; }
  [data-player-volume], [data-player-vu] { display: none !important; }
  [data-peak-meter] { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; flex: 1 !important; }
  [data-peak-meter] > span { grid-column: 1 / -1; }
  [data-peak-bars] { grid-column: 2; grid-row: 2; flex-direction: column; gap: 6px !important; margin-top: 12px !important; }
  /* The existing signal logic paints from the last segment to the first. */
  [data-peak-strip] { flex-direction: row-reverse !important; width: 100% !important; }
  [data-peak-strip] > span { flex: 1; min-width: 0; height: 8px !important; }
  [data-peak-labels] { grid-column: 1; grid-row: 2; flex-direction: column; gap: 6px !important; margin-top: 12px !important; }
  [data-peak-labels] > span { width: 16px !important; height: 8px; line-height: 8px; }
  [data-player-controls] { gap: 20px !important; }
  [data-voice-card] { flex-basis: calc((100% - 24px) / 2) !important; box-sizing: border-box; }
  [data-reader] { gap: 32px !important; }
  [data-reader-sidebar] { position: static !important; }
  /* Put the guide itself before its index on a phone or tablet. */
  [data-guide-reader] > article { grid-row: 1; }
  [data-reader-sidebar] a { overflow-wrap: anywhere; }
  [data-assistant] { right: 16px !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; }
  [data-assistant-panel] { max-width: calc(100vw - 32px) !important; max-height: calc(100dvh - 88px); overflow-y: auto; }
  [data-assistant-panel] input { font-size: 16px !important; }
  [data-assistant-panel] button[aria-label] { min-width: 44px; min-height: 44px; }
}

@media (max-width: 600px) {
  [data-site-frame], .hero-frame { padding-inline: 20px !important; }
  [data-site-header] { padding-block: 12px !important; }
  [data-site-brand] { gap: 8px !important; }
  [data-site-brand] > span:last-child { display: none; }
  [data-site-nav] { gap: 4px 12px !important; }
  [data-site-nav] > a { font-size: 12px !important; }
  [data-site-nav] > span { gap: 24px !important; }
  [data-site-nav] > span > * { font-size: 12px !important; }
  .hero-intro { padding: 64px 0 48px !important; }
  [data-hero-title] { font-size: clamp(43px, 12vw, 72px) !important; line-height: .98 !important; margin-top: 20px !important; }
  .hero-intro > p { margin-top: 24px !important; font-size: 16px; }
  [data-hero-actions] { margin-top: 24px !important; gap: 10px !important; }
  [data-hero-actions] a { min-height: 44px; box-sizing: border-box; }
  [data-hero-meta] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px !important; padding-bottom: 88px !important; font-size: 10px !important; }
  [data-home-section] { padding: 56px 20px !important; }
  [data-section-heading] { margin-bottom: 32px !important; }
  [data-home-section] h2 { font-size: 30px !important; line-height: 1.12 !important; }
  [data-home-section] [data-col] { gap: 24px !important; }
  [data-home-section] p, [data-home-section] a > span { overflow-wrap: break-word; }
  [data-services] p, [data-guide-cards] > a > span:nth-child(3),
  [data-price-row] > span:nth-child(2) { font-size: 15px !important; line-height: 1.65 !important; }
  [data-section-meta] { gap: 12px 20px !important; }
  [data-player] { padding: 12px !important; }
  [data-player] canvas { height: 110px !important; }
  [data-player] input[data-vfader] { height: 44px !important; }
  [data-player-controls] > div:first-child { gap: 12px !important; }
  [data-player-controls] button { min-height: 44px; }
  [data-player-genres] { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px !important; }
  [data-player-genres] button { width: 100%; padding-inline: 6px !important; }
  [data-awards-grid], [data-steps] { grid-template-columns: 1fr !important; }
  [data-awards-grid] { gap: 20px !important; }
  [data-price-row] { gap: 12px !important; }
  [data-price-row] > div:last-child { max-width: 240px; }
  [data-voice-carousel] { flex-wrap: wrap; gap: 16px !important; }
  [data-voice-window] { flex: 1 1 100% !important; order: -1; }
  [data-voice-card] { flex-basis: 100% !important; padding-left: 16px !important; }
  [data-voice-card] p { font-size: 21px !important; }
  [data-voice-carousel] > .sc-host-x > button { min-width: 44px; min-height: 44px; font-size: 17px !important; }
  [data-voice-carousel] > .sc-host-x:last-child > button { margin-left: auto; }
  [data-voice-dots] button { min-height: 44px; }
  [data-platform-links] { gap: 32px 20px !important; padding: 32px 0 !important; }
  [data-platform-links] > a { flex-basis: calc(50% - 20px) !important; min-width: 0; }
  [data-platform-links] img { max-width: 100%; object-fit: contain; }
  [data-fcs-contact] input, [data-fcs-contact] textarea { font-size: 16px !important; }
  [data-contact-submit] { flex-wrap: wrap; gap: 12px !important; }
  [data-contact-submit] button { min-height: 44px; }
  [data-footer] > div { padding: 48px 20px 96px !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-footer-grid] a { min-height: 44px; box-sizing: border-box; }
  [data-footer-legal] { gap: 16px !important; }
  [data-footer-legal] > span:last-child { margin-right: 0 !important; gap: 12px 20px !important; padding-bottom: 0 !important; }
  [data-footer-legal] a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
  [data-resource-intro-grid] { padding: 48px 0 32px !important; gap: 16px !important; }
  [data-resource-intro="copy"] h1, [data-reader] h1 { font-size: 32px !important; overflow-wrap: break-word; }
  [data-resource-main] { padding: 0 20px 64px !important; }
  [data-resource-main] > div { padding-top: 40px !important; gap: 40px !important; }
  [data-resource-main] [data-col] { gap: 16px !important; }
  [data-resource-main] p, [data-resource-main] blockquote { overflow-wrap: anywhere; }
  [data-guide-row] { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 12px !important; padding: 20px 0 !important; }
  [data-resource-tabs] { gap: 16px !important; }
  [data-resource-tabs] > a { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
  [data-resource-tabs] > span { flex-basis: 100%; margin-left: 0 !important; }
  [data-reader] { padding-top: 40px !important; }
  [data-reader-sidebar] { margin-top: 16px; }
  [data-assistant-panel] > div:first-child { display: grid !important; grid-template-columns: 8px minmax(0, 1fr) 44px; gap: 4px 8px !important; }
  [data-assistant-panel] > div:first-child > span { grid-column: 2; margin-left: 0 !important; }
  [data-assistant-panel] > div:first-child > span:nth-of-type(2) { grid-row: 2; }
  [data-assistant-panel] > div:first-child > button { grid-column: 3; grid-row: 1 / span 2; }
  .privacy-main { padding-inline: 20px; }
  .privacy-main h1 { font-size: 40px; overflow-wrap: anywhere; }
  .privacy-sections { min-width: 0; overflow-wrap: anywhere; }
  .privacy-header-inner, .privacy-footer-inner { padding-inline: 20px; }
}

@media (max-width: 360px) {
  [data-site-brand] > span { font-size: 13px !important; letter-spacing: .12em !important; }
  [data-player-genres] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}