/* Signal Records software site — shared bits on top of styles.css + chordal.css:
   header nav, footer legal row, Privacy choices panel, home page, store grid, screenshots, buy page. */

html, body { overflow-x: hidden; }
body.chordal .site-header { background: rgba(89, 89, 89, 0.96); }

/* ---------- Header ---------- */
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eee;
}
.site-nav a[aria-current="page"] { color: var(--chordal-yellow); }
.site-nav .contact-email { color: #ccc; }

/* ---------- Footer ---------- */
.site-footer { padding: var(--spacing-lg) 0 var(--spacing-md); }
.legal-links button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: #ccc;
  background: none;
  border: 0;
  border-bottom: 1px solid #777;
  padding: 0 0 2px;
  cursor: pointer;
}
.legal-links button:hover { color: #fff; }
.footer-company { font-size: var(--fs-xs); color: #8a8a8a; letter-spacing: 0.06em; margin-top: 10px; line-height: 1.7; }
.footer-company a { text-decoration: underline; }
.site-footer .copyright { color: #8a8a8a; }
.copyright a { text-decoration: underline; }

/* Privacy choices panel (built by js/site.js) */
.privacy-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  margin: 0 auto;
  max-width: 420px;
  background: #000;
  color: #fff;
  border: 1px solid var(--chordal-border, #979797);
  border-radius: 12px;
  padding: 18px 20px;
  z-index: 2000;
  text-align: left;
}
.privacy-panel[hidden] { display: none; }
.privacy-panel h2 {
  font-size: var(--fs-s);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  color: #fff;
}
.privacy-panel p { font-size: var(--fs-xs); color: #ccc; margin-bottom: 12px; }
.privacy-panel a { color: var(--chordal-blue, #5eb5e0); text-decoration: underline; }
.privacy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.privacy-row .label { font-weight: var(--font-weight-normal); }
.seg { display: inline-flex; border: 1px solid #979797; border-radius: 50px; overflow: hidden; }
.seg button {
  font: inherit;
  font-size: var(--fs-xs);
  background: transparent;
  color: #ddd;
  border: 0;
  padding: 6px 16px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--chordal-yellow-fill, #e0d15e); color: #3a3a3a; }
.privacy-panel .close {
  font: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  color: #ccc;
  border: 1px solid #777;
  border-radius: 50px;
  padding: 6px 16px;
  cursor: pointer;
}
.privacy-panel .status { font-size: var(--fs-xs); color: #999; margin: 0 0 12px; min-height: 1em; }

/* ---------- Screenshots ---------- */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #4d4d4d;
}
.hero-shot { max-width: 1000px; margin: 0 auto; padding: 0 16px var(--spacing-md); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gallery figure { margin: 0; background: #000; border-radius: 35px; padding: 12px 12px 16px; }
.gallery figcaption { color: var(--chordal-body); font-size: var(--fs-s); padding: 10px 10px 0; }
.gallery figcaption strong { color: var(--chordal-yellow); font-family: var(--font-chordal); font-weight: 400; font-size: var(--fs-m); display: block; }

/* ---------- Price ---------- */
.price-note { color: #999; font-size: var(--fs-xs); }
.buy-price .price-note { font-size: var(--fs-xs); }
.price-big { font-family: var(--font-chordal); font-size: var(--fs-xxl); color: var(--chordal-yellow); line-height: 1; }

/* ---------- Home ---------- */
.home-hero { max-width: 1000px; margin: 0 auto; padding: 150px 16px var(--spacing-md); text-align: center; }
.home-hero .eyebrow { color: var(--color-text-muted); letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--fs-xs); margin-bottom: 12px; }
.home-hero h1 { font-size: var(--fs-title); margin-bottom: 16px; }
.home-hero p.lead { color: var(--chordal-body); max-width: 640px; margin: 0 auto var(--spacing-md); font-size: var(--fs-m); }
.home-hero .hero-links { gap: 16px; }

.product-feature {
  max-width: 955px; /* narrowed so "Perform, compose, record." starts its own line (James 12 Nov 2026) */
  margin: 0 auto var(--spacing-md);
  background: #000;
  border-radius: 35px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
.product-feature .shot-wrap { background: #000; padding: 18px; display: flex; align-items: center; }
.product-feature .shot { border-radius: 8px; }
.product-feature .body { padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.product-feature .wordmark { font-size: var(--fs-xxl); line-height: 1; }
.product-feature p { color: var(--chordal-body); }
.product-feature .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.product-feature .btn-stadium { height: 52px; font-size: var(--fs-l); padding: 0 28px; }

.home-section { max-width: 760px; margin: 0 auto; padding: var(--spacing-md) 16px; text-align: center; }
.home-section h2 { font-size: var(--fs-xl); margin-bottom: 12px; }
.home-section p { color: var(--chordal-body); margin-bottom: 10px; }
.home-section a.inline { text-decoration: underline; }
.contact-line { font-size: var(--fs-m); }
.contact-line a { color: var(--chordal-yellow); text-decoration: underline; }

/* ---------- Store ---------- */
.store-head { max-width: 1000px; margin: 0 auto; padding: var(--spacing-md) 16px 0; }
.store-head h1 { font-size: var(--fs-title); margin-bottom: 6px; }
.store-head p { color: var(--chordal-body); }
.store-grid {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-md) 16px var(--spacing-lg);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.store-card { background: #000; border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; }
.store-card .shot-wrap { background: #595959; padding: 12px; margin: 12px 12px 0; border-radius: 24px; }
.store-card .shot { border-radius: 8px; }
.store-card .body { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.store-card h2 { font-family: var(--font-chordal); color: var(--chordal-yellow); text-transform: none; letter-spacing: 0; font-size: var(--fs-xxl); line-height: 1.1; }
.store-card .kind { color: #999; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.store-card p { color: var(--chordal-body); font-size: var(--fs-s); }
.store-card .row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.store-card .btn-stadium { height: 48px; font-size: var(--fs-m); padding: 0 24px; }

/* ---------- Buy page ---------- */
.buy-page { max-width: 760px; margin: 0 auto; padding: var(--spacing-md) 16px var(--spacing-lg); }
.buy-page h1 { font-size: var(--fs-title); margin-bottom: 6px; }
.buy-summary { background: #000; border-radius: 35px; padding: 18px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0; }
.buy-summary img { width: 56px; height: 56px; }
.buy-summary .what { flex: 1; min-width: 180px; color: var(--chordal-body); font-size: var(--fs-s); }
.buy-summary .what strong { color: var(--chordal-yellow); font-family: var(--font-chordal); font-weight: 400; font-size: var(--fs-xl); display: block; }
.checkout-container { min-height: 120px; }
.checkout-fallback { background: #000; border-radius: 12px; padding: 18px 22px; color: var(--chordal-body); }
.checkout-fallback[hidden] { display: none; }
.checkout-fallback a { color: var(--chordal-yellow); text-decoration: underline; }
.buy-legal { color: #aaa; font-size: var(--fs-xs); margin-top: 16px; }
.buy-legal a { color: #ddd; text-decoration: underline; }
.patent-line { text-align: center; color: #999; font-size: var(--fs-xs); padding: 0 16px 4px; }

/* ---------- 404 ---------- */
.notfound { max-width: 640px; margin: 0 auto; padding: 170px 16px var(--spacing-lg); text-align: center; }
.notfound h1 { margin-bottom: 12px; }
.notfound p { color: var(--chordal-body); margin-bottom: 18px; }

/* ---------- Phone width ---------- */
@media (max-width: 768px) {
  .site-header { padding: 12px 16px; }
  .site-nav { gap: 14px; }
  .site-nav .contact-email { display: none; }
  .product-feature { grid-template-columns: 1fr; }
  .product-feature .body { padding: 22px 22px 26px; text-align: center; align-items: center; }
  .product-feature .actions { justify-content: center; }
  .gallery { grid-template-columns: 1fr; }
  .home-hero { padding-top: 120px; }
  .notfound { padding-top: 130px; }
}
.checkout-container[hidden], #checkout-loading[hidden] { display: none; }
html { scroll-padding-top: 110px; }

/* ---------- Brand pass (James 11 Nov 2026): ADLaM everywhere, yellow headings + nav, outlined screenshots ---------- */
body, button, input, select, textarea { font-family: var(--font-chordal); font-weight: 400; }
h1, h2, h3, h4,
.doc h1, .doc h2, .doc h3,
.chordal-hero h1, .chordal-section > h2, .feature h3 {
  font-family: var(--font-chordal);
  font-weight: 400;
  color: var(--chordal-yellow);
  text-transform: none;
  letter-spacing: 0;
}
.site-nav a, .site-nav .contact-email { color: var(--chordal-yellow); letter-spacing: 0.06em; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* App screenshots on the grey page sit on a full-width black band (James 11 Nov 2026) */
.hero-shot { padding: 28px 16px; margin: 0 auto var(--spacing-md); background: #000; box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }
.store-card .shot-wrap { background: #000; padding: 0; margin: 20px 20px 0; }
.chordal-hero .tagline { color: var(--chordal-yellow); }
/* Whole site one size smaller (James 11 Nov 2026): every rem size scales from this */
html { font-size: 90%; }
/* Running text in Helvetica Neue Light, as on the label site; ADLaM stays for headings, nav, buttons, prices, tagline (James 11 Nov 2026) */
:root { --font-read: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
p, li, td, th, dd, dt, blockquote, figcaption, .footer-company { font-family: var(--font-read); font-weight: 300; }
.site-nav, .site-nav *, .chordal-hero .tagline, .gallery figcaption strong, .price-big, .buy-price, button, .btn { font-family: var(--font-chordal); }
/* 2px yellow line under the top bar (James 11 Nov 2026) */
.site-header { border-bottom: 2px solid var(--chordal-yellow); }
/* Bigger menu links (James 11 Nov 2026) */
.site-nav a { font-size: var(--fs-l); }
@media (max-width: 768px) { .site-nav a { font-size: var(--fs-xs); } }
/* Text links in CHORDAL blue #5eb5e0, the app's button blue (James 11 Nov 2026) */
.doc a, .privacy-panel a, main p a:not(.btn):not(.btn-stadium), main li a:not(.btn):not(.btn-stadium), main td a, main details a, .site-footer p a { color: var(--chordal-blue); }
/* Yellow social buttons (James 11 Nov 2026) */
.social-links a { background: var(--chordal-yellow); }
.social-links a:hover { background: #fff27a; }
.social-links a { width: 30px; height: 30px; }
.social-links svg { fill: #595959; width: 16px; height: 16px; }
/* Tight footer: no gaps between rows (James 11 Nov 2026) */
.site-footer { padding: 16px 0; }
.site-footer .legal-links { margin: 0 0 8px; }
.site-footer .social-links { margin: 0 0 8px; gap: 10px; }
.site-footer .copyright, .site-footer .footer-company { margin: 0; line-height: 1.4; }
/* Footer links yellow, no underline (James 11 Nov 2026) */
.legal-links a, .legal-links button { color: var(--chordal-yellow); border-bottom: 0; text-decoration: none; }
.legal-links a:hover, .legal-links button:hover { color: #fff27a; }
/* Footer small print: same Helvetica Neue Light as body, no wide letter-spacing (James 11 Nov 2026) */
.site-footer .copyright, .site-footer .footer-company { letter-spacing: 0; font-size: var(--fs-xs); }
/* Privacy settings panel: yellow border, yellow centred Done (James 11 Nov 2026) */
.privacy-panel { border-color: #ffed68; }
.privacy-panel .close { display: block; margin: 4px auto 0; background: #ffed68; color: #595959; border: 0; padding: 7px 22px; }
.privacy-panel .close:hover { background: #fff27a; color: #333; }
.privacy-panel h2 { color: #ffed68; }
/* Pipes between footer links (James 11 Nov 2026) */
.legal-links { gap: 8px 12px; }
.legal-links > * + *::before { content: "|"; margin-right: 12px; color: var(--chordal-yellow); }
/* Hidden page titles: kept for screen readers and search engines (James 11 Nov 2026) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Account icon right of Contact (James 11 Nov 2026) */
.site-nav .nav-account { display: inline-flex; align-items: center; }
.site-nav .nav-account svg { width: 1.15rem; height: 1.15rem; fill: var(--chordal-yellow); }
.site-nav .nav-account:hover svg { fill: #fff27a; }
/* Type scale (James 11 Nov 2026): every font-size on the site uses one of these. Root is 90%, so 1rem = 14.4px. */
:root {
  --fs-xs: 0.8rem;     /* small print, footer, labels, notes */
  --fs-s: 0.9rem;      /* secondary text, menu links, buttons */
  --fs-m: 1rem;        /* body text */
  --fs-l: 1.15rem;     /* card headings, lead text */
  --fs-xl: 1.4rem;     /* section titles (every page, incl. account portal) */
  --fs-xxl: 2rem;      /* prices */
  --fs-title: clamp(1.75rem, 4vw, 2.5rem);  /* page titles */
  --fs-hero: clamp(2.6rem, 8vw, 4.5rem);    /* [chordal] wordmark */
}
/* "Coming soon" card on the Software page (James 11 Nov 2026) */
.coming-card .body { justify-content: center; align-items: center; text-align: center; padding: 40px 24px; }
/* Home intro in ADLaM white (James 11 Nov 2026) */
.home-hero p.lead { font-family: var(--font-chordal); font-weight: 400; color: #fff; max-width: 860px; }
.home-section p.justify { text-align: justify; }
.home-hero .accent-yellow { color: var(--chordal-yellow); }
.coming-card p.coming { font-family: var(--font-chordal); font-weight: 400; color: var(--chordal-yellow); font-size: var(--fs-l); }
/* Software page: cards centred as a group (James 12 Nov 2026) */
.store-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 430px)); justify-content: center; }
/* Home [chordal] box bottom line = Software page card bottom line (James 12 Nov 2026) */
.product-feature .buy-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.product-feature .buy-line .btn-stadium { height: 48px; font-size: var(--fs-m); padding: 0 24px; }
/* "+ local tax" vertically centred beside £50 (home box + Software cards) */
.price-line { display: inline-flex; align-items: center; gap: 4px; }
.price-line .price-note { position: relative; top: 2px; } /* optical nudge: ADLaM sits high */
/* Product page hero: no logo or byline, smaller [chordal] (James 12 Nov 2026) */
.chordal-hero.no-logo { grid-template-columns: 1fr; }
.chordal-hero.no-logo h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); text-align: center; }
/* Product page price row = home/Software rows: "+ local tax" tight beside £50, BUY NOW on the right (James 12 Nov 2026) */
.buy-panel .buy-price { align-items: center; gap: 4px; }
.buy-panel .buy-price strong { line-height: 1; }
.buy-panel .buy-price .price-note { position: relative; top: 2px; }
.buy-panel > .btn-stadium { margin-left: auto; height: 48px; font-size: var(--fs-m); padding: 0 24px; }
.buy-panel .buy-note { flex-basis: 100%; }
@media (max-width: 768px) { .buy-panel > .btn-stadium { margin-left: 0; } }
.buy-note a.guarantee-link { color: var(--chordal-yellow); text-decoration: underline; }
/* Product page buy box: price left (bigger) | BUY NOW centre (bigger) | 4 info lines right, ADLaM (James 12 Nov 2026) */
.buy-panel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 32px; }
.buy-panel .buy-price { justify-self: start; }
.buy-panel .buy-price strong { font-size: 3rem; }
.buy-panel > .btn-stadium { justify-self: center; margin-left: 0; height: 64px; font-size: var(--fs-xl); padding: 0 40px; }
.buy-panel .buy-note { justify-self: end; flex-basis: auto; margin: 0; text-align: right; font-family: var(--font-chordal); font-weight: 400; line-height: 1.5; }
@media (max-width: 768px) {
  .buy-panel { grid-template-columns: 1fr; justify-items: center; }
  .buy-panel .buy-price, .buy-panel .buy-note { justify-self: center; text-align: center; }
}
.chordal-hero.no-logo .tagline { text-align: center; font-size: var(--fs-xl); }
.chordal-hero.no-logo .lede { text-align: center; margin-left: auto; margin-right: auto; }
.chordal-hero.no-logo .buy-panel + .lede { margin-top: var(--spacing-md); }
.cta-band > p:first-child { font-family: var(--font-chordal); font-weight: 400; } /* ADLaM, original light grey (James 12 Nov 2026) */
.cta-band a[href*="accounts.signalrecords.co.uk"] { color: var(--chordal-yellow) !important; } /* "your account" link yellow (James 12 Nov 2026) */
.spec-table th { font-weight: 700; text-align: right; padding-right: 20px; } /* labels bolder, right-aligned toward the values (James 12 Nov 2026) */
main details a:not(.btn):not(.btn-stadium), main .feature a:not(.btn):not(.btn-stadium), main .buy-panel a:not(.btn):not(.btn-stadium), main .feature p a:not(.btn):not(.btn-stadium), main details p a:not(.btn):not(.btn-stadium), main details li a:not(.btn):not(.btn-stadium) { color: var(--chordal-yellow); } /* links on black panels yellow, not blue (James 12 Nov 2026) */
.faq-group { font-size: var(--fs-l); margin: var(--spacing-md) 0 10px; } .faq-group:first-of-type { margin-top: 0; }
/* Product page logo lockup = chordal.io / app splash: icon, [chordal], byline tucked under (James 12 Nov 2026). px so it matches chordal.io exactly. */
.brand-lockup { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 8px; }
.brand-lockup .lockup-icon { height: 109px; width: auto; margin-top: 8px; }
.brand-lockup .lockup-word { display: flex; flex-direction: column; align-items: flex-end; margin-top: 16px; }
.chordal-hero .brand-lockup h1.lockup-wordmark { font-family: var(--font-chordal); font-weight: 400; font-size: 44px; line-height: 1; color: var(--chordal-yellow); margin: 0; text-align: right; }
.brand-lockup .lockup-by { font-family: var(--font-chordal); font-size: 12px; color: #ffffbb44; margin-top: 3px; padding-right: 1.6em; line-height: 1.2; }
/* Home hero backdrop: the label site's concert photo, zoomed 1.5x + pre-blurred, greyscale at 60%, fading into #595959 at the bottom (James 12 Nov 2026) */
.home-hero { position: relative; isolation: isolate; }
.home-hero::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: url('/images/home-hero-bg.webp?v=4') center / cover no-repeat; opacity: 0.6; }
.home-hero::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: linear-gradient(to bottom, rgba(89, 89, 89, 0) 40%, #595959 100%); }
.home-hero::after { display: none; } /* no fade into #595959 (James 12 Nov 2026) */
/* Home: the concert backdrop covers the whole page, fixed behind everything (James 12 Nov 2026) */
.home-hero::before { display: none; }
body.home-page { isolation: isolate; }
body.home-page::before { content: ''; position: fixed; inset: 0; z-index: -1; background: url('/images/home-hero-bg.webp?v=4') center / cover no-repeat; opacity: 0.6; pointer-events: none; }
body.home-page::before { opacity: 0.6; filter: none; } /* darker backdrop for readable text (James 12 Nov 2026) */
/* CHORDAL product page: same backdrop as chordal.io (pre-blurred, darkened app close-up at 50%), fixed behind the grey areas (James 12 Nov 2026) */
body.product-page { isolation: isolate; }
body.product-page::before { content: ''; position: fixed; inset: 0; z-index: -1; background: url('/images/chordal/app-backdrop.webp') center / auto 1900px no-repeat; opacity: 0.5; pointer-events: none; }
.store-card .body p { text-align: justify; } /* Software page card text justified (James 12 Nov 2026) */
/* Main screenshot band sits inside the hero: logo/tagline, screenshot, lede, buy bar (12 Nov 2026) */
.chordal-hero .hero-shot { padding: 28px 0; margin: var(--spacing-md) 0; }
.chordal-hero.no-logo .hero-shot + .lede { margin-bottom: 0; }
.buy-panel .buy-note { color: var(--chordal-yellow); }
/* Tagline matches the chordal.io headline: 30.88px (12 Nov 2026) */
.chordal-hero.no-logo .tagline { font-size: clamp(20px, 4.6vw, 30.88px); }