/* Pickuptone website, first version. Static, no scripts.
   Colours come from tokens.css plus the theme A brand tokens defined below (copied from design/website/theme-a.css).
   Light and dark follow the visitor's system setting (no toggle, so nothing is stored on the device). */

/* Theme A brand tokens, light */
:root {
  --brand-field: #2A0D5E;
  --brand-on-field: #E9DFFF;
  --brand-on-field-muted: #C3B1F5;
  --brand-warm: #F5B841;
  --brand-on-warm: #1A1033;
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --logo-mark: var(--color-primary);
  --logo-tone: var(--color-primary);
  --logo-word: var(--color-heading);
}
/* Theme A dark overrides (as in theme-a.css) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0F0B1A;
    --color-surface: #1A1430;
    --color-surface-2: #241B3E;
    --color-on-surface: #F3F0FA;
    --color-on-surface-muted: #AEA6C2;
    --color-heading: #F3F0FA;
    --color-primary: #C3B1F5;
    --color-on-primary: #2A0D5E;
    --color-outline-strong: #6E6688;
    --color-outline: #3A2F5C;
    --brand-field: #1A1430;
    --brand-warm: #F7C25A;
    --brand-on-warm: #1A1033;
    --logo-mark: #F3F0FA;
    --logo-tone: var(--brand-warm);
    --logo-word: #F3F0FA;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-bg); color: var(--color-on-surface); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--size-focus-ring) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
svg { max-inline-size: 100%; }
.muted { color: var(--color-on-surface-muted); }
.wrap { max-inline-size: 1100px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 600px) { .wrap { padding-inline: var(--space-5); } }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; inset-inline-start: var(--space-2); inset-block-start: -100px; z-index: var(--z-toast); background: var(--color-surface); color: var(--color-on-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--elevation-3); min-block-size: 48px; display: inline-flex; align-items: center; }
.skip:focus { inset-block-start: var(--space-2); }

/* Type */
.h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.02em; overflow-wrap: break-word; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em; color: var(--color-heading); overflow-wrap: break-word; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); color: var(--color-heading); }
.lede { font-size: clamp(1.125rem, 2vw, 1.3125rem); max-inline-size: 40em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 56px; min-inline-size: 48px; padding-inline: var(--space-6); border-radius: var(--radius-pill); border: 2px solid transparent; background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-size: var(--text-body-lg); font-weight: 700; text-decoration: none; text-align: center; }
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn.warm { background: var(--brand-warm); color: var(--brand-on-warm); }
.btn.outline { background: transparent; color: inherit; border-color: currentColor; }
.btn.sm { min-block-size: 48px; padding-inline: var(--space-5); font-size: var(--text-body); }

/* Header */
.site-header { background: var(--color-bg); border-block-end: 1px solid var(--color-outline); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); min-block-size: 72px; }
.alogo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--logo-word); min-block-size: 48px; }
.alogo-mark { inline-size: 36px; block-size: 36px; flex: none; }
.alogo-mark .mk { fill: var(--logo-mark); }
.alogo-mark .tn { stroke: var(--logo-tone); }
.alogo-word { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.alogo-word b { font-weight: 800; }
.nav { margin-inline-start: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.nav a { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: var(--space-3); border-radius: var(--radius-pill); color: var(--color-on-surface); text-decoration: none; font-size: var(--text-label); font-weight: 500; }
.nav a:hover { background: var(--color-surface-2); }
.nav a[aria-current="page"] { background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 700; }

/* Violet field: hero, call-to-action band, footer */
.field, .site-footer { background: var(--brand-field); color: var(--brand-on-field); --logo-mark: #fff; --logo-tone: var(--brand-warm); --logo-word: #fff; }
:is(.field, .site-footer) :focus-visible { outline-color: var(--brand-warm); }
:is(.field, .site-footer) a:not(.btn) { color: inherit; }
:is(.field) .h1, :is(.field) .h2 { color: #fff; }
.field .lede { color: var(--brand-on-field); }
.field .muted, .site-footer .muted { color: var(--brand-on-field-muted); }

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
@media (min-width: 840px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } }
.hero .copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-inline-size: 0; }
.status { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--brand-on-field-muted); font-size: var(--text-label); font-weight: 600; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pills li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--brand-on-field-muted); font-size: var(--text-label); font-weight: 600; }
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Sections and cards */
.section { padding-block: clamp(2.5rem, 7vw, 5rem); }
.section.tint { background: var(--color-surface-2); }
.section-head { margin-block-end: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 44em; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid.g3 { grid-template-columns: repeat(3, 1fr); } .grid.g2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--color-surface); color: var(--color-on-surface); border: 1px solid var(--color-outline); border-radius: 24px; padding: var(--space-5); box-shadow: var(--elevation-1); }
.card.brass { border-block-start: 4px solid var(--brand-warm); }
.card h3 { margin-block-end: var(--space-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--color-primary); margin-block-end: var(--space-2); }

/* Sample call card */
.transcript { margin: 0; background: var(--color-surface); color: var(--color-on-surface); border: 1px solid var(--color-outline-strong); border-radius: 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.transcript .t-head { padding: var(--space-3) var(--space-4); background: var(--color-surface-2); border-block-end: 1px solid var(--color-outline); font-weight: 600; }
.transcript ol { list-style: none; margin: 0; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.turn { display: flex; flex-direction: column; gap: 2px; max-inline-size: 92%; }
.turn .who { font-size: var(--text-caption); font-weight: 600; color: var(--color-on-surface-muted); }
.turn .say { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.turn.caller { align-self: flex-end; align-items: flex-end; }
.turn.caller .say { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.transcript figcaption { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-outline); font-size: var(--text-label); color: var(--color-on-surface-muted); }

/* Reading pages */
.prose { max-inline-size: 46em; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 7vw, 5rem); }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 3vw, 1.75rem); color: var(--color-heading); margin-block: var(--space-7) var(--space-3); }
.prose h2:first-child { margin-block-start: 0; }
.prose p, .prose ul, .prose ol, .prose address { margin-block-end: var(--space-3); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }
.prose address { font-style: normal; }
.prose .callout { background: var(--color-surface-2); border: 1px solid var(--color-outline); border-inline-start: 4px solid var(--brand-warm); border-radius: var(--radius-lg); padding: var(--space-4); margin-block: var(--space-4); }
.updated { color: var(--color-on-surface-muted); font-size: var(--text-label); }
.quote { font-size: var(--text-body-lg); font-weight: 600; }

/* Call-to-action band (home, contact) */
.band { background: var(--color-surface-2); color: var(--color-on-surface); border: 1px solid var(--color-outline); border-block-start: 4px solid var(--brand-warm); border-radius: 32px; padding: clamp(1.5rem, 5vw, 3rem); display: grid; gap: var(--space-5); }
@media (min-width: 840px) { .band { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.band ul { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); }

/* Footer */
.site-footer { padding-block: var(--space-8) var(--space-6); }
.site-footer .cols { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1.4fr; } }
.site-footer h2 { font-size: var(--text-label); font-weight: 700; color: var(--brand-on-field-muted); margin-block-end: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-block-size: 48px; text-decoration: none; }
.site-footer li a:hover, .site-footer p a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; display: grid; gap: var(--space-1); }
.site-footer address a { display: inline-flex; align-items: center; min-block-size: 32px; }
.site-footer .legal { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--brand-on-field-muted); font-size: var(--text-label); }

/* 404 */
.lost { min-block-size: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-8); }
.lost .inner { max-inline-size: 36em; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.lost .code { font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--brand-warm); }
.lost ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.lost li a { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }
@media print { .site-header, .site-footer, .skip { display: none; } }