/* ==========================================================================
   Dial — sub-brand stylesheet for the apposite.ai/dial subsection.

   Ported from the design system's `templates/dial-landing/DialLanding.dc.html`.
   Dial is Apposite's guitar & ukulele tuner. It deliberately does NOT inherit
   the studio's paper/oxide palette or the Darker Grotesque + Cormorant pairing:
   the app has its own Braun-influenced instrument identity, set by the product
   and its App Store presence. Use these tokens on /dial pages only.

   TYPE / LICENCE BOUNDARY — read before changing --dial-font.
   The app's artwork is set in Akzidenz-Grotesk BE, which Apposite licenses for
   DESKTOP use only. Rasterised output (App Store screenshots, Pinterest pins)
   is fine. Serving the .ttf via @font-face is redistribution and is NOT covered
   by that licence, so nothing here loads a font file: the web stack is
   Helvetica (the face drawn to compete with Akzidenz) falling back to
   Instrument Sans. Do not add the Akzidenz files to this repo.

   The studio nav sits on these pages so /dial still reads as part of
   apposite.ai; the footer is Dial's own.
   ========================================================================== */

:root {
  /* Field — the saturated orange the whole brand hangs on */
  --dial-orange: #e1671e;
  --dial-orange-deep: #c4551a;

  /* Surfaces */
  --dial-page: #fbfaf8;            /* the landing page ground */
  --dial-cream: #f2efeb;           /* the app's screen, and panel fills */

  /* Marks on the instrument surface */
  --dial-ink: #2b2a28;
  --dial-ink-muted: #6e6862;
  --dial-ink-subtle: #a39c94;

  /* Marks on the orange field */
  --dial-on-orange: #fff7f2;
  --dial-on-orange-muted: rgba(255, 247, 242, 0.82);
  --dial-rule: rgba(43, 42, 40, 0.12);

  /* One family does everything. Numerals run tabular so frequency columns
     align; there is no separate mono. */
  --dial-font: "Helvetica Neue", Helvetica, "Instrument Sans", Arial, sans-serif;

  --dial-radius-panel: 28px;
  --dial-radius-pill: 100px;
  --dial-radius-icon: 14px;

  /* Studio chrome, carried over from the site's :root blocks so the nav
     matches the rest of apposite.ai exactly. */
  --color-bg: #faf9f7;
  --color-text: #1a1918;
  --color-text-muted: #6b6560;
  --font-sans: "Darker Grotesque", -apple-system, sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--dial-font);
  background: var(--dial-page);
  color: var(--dial-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--dial-orange); color: var(--dial-on-orange); }

/* height:auto is load-bearing — the img tags carry width/height attributes for
   layout stability, and without it the intrinsic height wins over the CSS width. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--dial-orange-deep); text-decoration: none; }
a:hover { color: var(--dial-orange); }

/* --------------------------------------------------------------------------
   Studio nav — lifted from apps.html so /dial reads as part of the site.
   -------------------------------------------------------------------------- */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(251, 250, 248, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.logo {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}

.nav-links { display: flex; gap: 3rem; list-style: none; }

.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--color-text);
  transition: width 0.4s var(--ease-out-expo);
}

.nav-links a:hover { color: var(--color-text); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}

.nav-toggle span {
  width: 20px; height: 1.5px;
  background: var(--color-text);
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.dial-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 3.5rem;
}

.dial-section { margin-top: 6.5rem; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.dial-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dial-ink-subtle);
}

.dial-display {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-left: -0.06em;
}

.dial-lede {
  font-size: clamp(1.25rem, 2vw, 1.4375rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--dial-ink-muted);
}

.dial-statement {
  font-size: clamp(2rem, 4vw, 2.875rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.028em;
}

.dial-h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.dial-body {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--dial-ink-muted);
}

.dial-note { font-size: 0.875rem; line-height: 1.5; color: var(--dial-ink-subtle); }

.dial-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons and the app icon
   -------------------------------------------------------------------------- */

.dial-btn {
  display: inline-block;
  background: var(--dial-orange);
  color: var(--dial-on-orange);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.9375rem 1.75rem;
  border-radius: var(--dial-radius-pill);
  white-space: nowrap;
  transition: background 0.3s var(--ease-out-expo);
}

.dial-btn:hover { background: var(--dial-orange-deep); color: var(--dial-on-orange); }

.dial-icon {
  width: 62px; height: 62px;
  border-radius: var(--dial-radius-icon);
  box-shadow: 0 0 14px rgba(43, 42, 40, 0.09), 0 4px 12px rgba(43, 42, 40, 0.07);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.dial-hero {
  padding-top: 10.5rem;
  display: flex;
  gap: 5rem;
  align-items: center;
}

.dial-hero-copy { flex: 1; }
.dial-hero .dial-lede { max-width: 420px; }
.dial-hero-device { flex: none; width: 340px; }

.dial-cta-row {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.375rem;
}

/* --------------------------------------------------------------------------
   Stat strip — hairline top and bottom, no fill
   -------------------------------------------------------------------------- */

.dial-stats {
  display: flex;
  border-top: 1px solid var(--dial-rule);
  border-bottom: 1px solid var(--dial-rule);
}

.dial-stat { flex: 1; padding: 1.875rem 0; }

.dial-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: 2.375rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.dial-stat-label {
  margin-top: 0.5625rem;
  font-size: 0.875rem;
  color: var(--dial-ink-muted);
}

/* --------------------------------------------------------------------------
   Orange statement band — full bleed
   -------------------------------------------------------------------------- */

.dial-band {
  background: var(--dial-orange);
  color: var(--dial-on-orange);
  padding: 6rem 0;
}

.dial-band .dial-statement { max-width: 820px; }

.dial-band .dial-body {
  margin-top: 1.625rem;
  color: var(--dial-on-orange-muted);
  max-width: 620px;
}

/* --------------------------------------------------------------------------
   Three-up feature columns
   -------------------------------------------------------------------------- */

.dial-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}

.dial-feature-title {
  margin-top: 1.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.dial-feature-desc {
  margin-top: 0.5625rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dial-ink-muted);
}

/* --------------------------------------------------------------------------
   Split — a heading beside a paragraph, over a hairline
   -------------------------------------------------------------------------- */

.dial-split {
  border-top: 1px solid var(--dial-rule);
  padding-top: 3.5rem;
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}

.dial-split .dial-h2 { flex: none; width: 340px; }
.dial-split .dial-body { max-width: 520px; }

/* --------------------------------------------------------------------------
   Closing panel
   -------------------------------------------------------------------------- */

.dial-panel {
  background: var(--dial-cream);
  border-radius: var(--dial-radius-panel);
  padding: 3.5rem 3.5rem 3.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.dial-panel-title {
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.dial-panel-desc {
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--dial-ink-muted);
  max-width: 400px;
}

/* --------------------------------------------------------------------------
   Tuning pages — /dial/tunings/ and /dial/tunings/<slug>/
   Ported from the design system's templates/dial-tuning-page. These pages are
   generated: edit the generator in the design system's tools/tuning-pages/,
   not the emitted HTML.
   -------------------------------------------------------------------------- */

.dial-tuning-hero {
  background: var(--dial-orange);
  color: var(--dial-on-orange);
  padding: 9.5rem 0 6.5rem;
}

.dial-tuning-hero .dial-eyebrow { color: rgba(255, 247, 242, 0.7); }
.dial-tuning-hero .dial-display { margin-top: 1.25rem; }

.dial-tuning-hero .dial-lede {
  margin-top: 1.375rem;
  color: var(--dial-on-orange-muted);
  max-width: 640px;
}

.dial-crumb {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 247, 242, 0.7);
}

.dial-crumb:hover { color: var(--dial-on-orange); }

/* The chart card overlaps the bottom of the orange band. */
.dial-chart-pull { position: relative; margin-top: -3.5rem; }

.dial-chart-card {
  background: var(--dial-cream);
  border-radius: var(--dial-radius-panel);
  padding: 2.25rem 2.5rem 2.5rem;
}

.dial-chart-heads {
  display: flex;
  gap: 3rem;
}

.dial-chart-fig { flex: 1; min-width: 0; }

.dial-chart-fig.is-narrow {
  flex: none;
  width: 46%;
  margin: 0 auto;
}

.dial-chart-cap {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dial-ink-subtle);
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--dial-rule);
}

.dial-chart-fig svg { display: block; width: 100%; height: auto; margin-top: 1rem; }

/* Inline-SVG headstock chart colours */
.dial-hs-line { fill: var(--dial-cream); stroke: rgba(43, 42, 40, 0.55); }
.dial-hs-post { fill: #fdfcfa; stroke: rgba(43, 42, 40, 0.55); }
.dial-hs-dot { fill: rgba(43, 42, 40, 0.55); }
.dial-hs-label { font-family: var(--dial-font); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; fill: var(--dial-ink); }
.dial-hs-lead { stroke: rgba(43, 42, 40, 0.4); stroke-width: 2; }

/* String / frequency table */
.dial-strings {
  display: flex;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dial-rule);
}

.dial-string { flex: 1; }

.dial-string-pos { font-size: 0.875rem; color: var(--dial-ink-muted); }

.dial-string-note {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dial-string-freq {
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: var(--dial-ink-muted);
}

/* Chord diagrams — "A few chords to try" */
.dial-chords {
  margin-top: 2.25rem;
  display: flex;
  gap: 3.5rem;
  flex-wrap: wrap;
}

.dial-chord { width: 150px; }

.dial-chord-name {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dial-chord-pos {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dial-ink-subtle);
}

.dial-chord svg { display: block; width: 100%; height: auto; margin-top: 0.875rem; }

.dial-cd-line { stroke: rgba(43, 42, 40, 0.45); stroke-width: 1.5; }
.dial-cd-nut { fill: var(--dial-ink); }
.dial-cd-dot { fill: var(--dial-ink); }
.dial-cd-sym { font-family: var(--dial-font); font-size: 14px; fill: var(--dial-ink-muted); }
.dial-cd-fret { font-family: var(--dial-font); font-size: 14px; font-weight: 600; fill: var(--dial-ink-muted); }

/* "Get in tune" upsell — steps beside the device render */
.dial-get {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.dial-get-copy { flex: 1; }
.dial-get-device { flex: none; width: 270px; }

.dial-steps {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.dial-step { display: flex; gap: 1.125rem; }

.dial-step-num {
  flex: none;
  width: 28px; height: 28px;
  border-radius: var(--dial-radius-pill);
  background: var(--dial-orange);
  color: var(--dial-on-orange);
  font-size: 0.9375rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dial-step-title { font-size: 1.125rem; font-weight: 600; }

.dial-step-desc {
  margin-top: 0.25rem;
  font-size: 1rem;
  color: var(--dial-ink-muted);
}

/* Nearby / index tuning lists — rows of name + notes over hairlines */
.dial-tuning-list {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.5rem;
}

.dial-tuning-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--dial-rule);
}

.dial-tuning-row-name { font-size: 1.1875rem; font-weight: 600; color: var(--dial-ink); }
.dial-tuning-row-notes {
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  color: var(--dial-ink-muted);
  white-space: nowrap;
}

a.dial-tuning-row:hover .dial-tuning-row-name { color: var(--dial-orange); }

/* Footer stats block (right side of the dark footer on tuning pages) */
.dial-footer-stats {
  font-size: 0.875rem;
  color: var(--dial-ink-subtle);
  text-align: right;
}

@media (max-width: 900px) {
  .dial-tuning-hero { padding: 8rem 0 5.5rem; }
  .dial-chart-card { padding: 1.75rem 1.5rem 2rem; }
  .dial-chart-heads { flex-direction: column; gap: 2rem; }
  .dial-chart-fig.is-narrow { width: 100%; max-width: 340px; margin: 0; }

  .dial-strings { flex-wrap: wrap; gap: 1.25rem 0; }
  .dial-string { flex: none; width: 33.33%; }

  .dial-get { flex-direction: column; gap: 3rem; }
  .dial-get-device { align-self: center; }

  .dial-tuning-list { grid-template-columns: 1fr; }
  .dial-footer-stats { text-align: left; }
}

/* --------------------------------------------------------------------------
   Dial's own footer — dark, distinct from the studio footer
   -------------------------------------------------------------------------- */

.dial-footer { background: var(--dial-ink); padding: 2.75rem 0; }

.dial-footer .dial-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.dial-footer-left { font-size: 0.875rem; color: var(--dial-ink-subtle); }
.dial-footer-left a { color: var(--dial-cream); }
.dial-footer-left a:hover { color: #fff; }

.dial-footer-links { display: flex; gap: 1.75rem; font-size: 0.875rem; }
.dial-footer-links a { color: var(--dial-ink-subtle); }
.dial-footer-links a:hover { color: var(--dial-cream); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .dial-features { grid-template-columns: 1fr; gap: 3rem; max-width: 420px; }
  .dial-split { flex-direction: column; gap: 1.5rem; }
  .dial-split .dial-h2 { width: auto; }
}

@media (max-width: 860px) {
  nav { padding: 1.5rem 2rem; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    width: 100%; height: 100vh;
    background: var(--dial-page);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav-links.active { opacity: 1; visibility: visible; }
  .nav-links a { font-size: 1rem; color: var(--color-text); }

  .dial-wrap { padding: 0 1.5rem; }
  .dial-section { margin-top: 4.5rem; }

  .dial-hero {
    padding-top: 8rem;
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
  }

  .dial-hero-device { width: 100%; max-width: 300px; align-self: center; }

  .dial-cta-row { flex-wrap: wrap; gap: 1rem 1.375rem; }

  .dial-stats { flex-direction: column; }
  .dial-stat { padding: 1.25rem 0; border-bottom: 1px solid var(--dial-rule); }
  .dial-stat:last-child { border-bottom: 0; }

  .dial-band { padding: 4rem 0; }

  .dial-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.5rem 2rem 2.75rem;
  }

  .dial-footer .dial-wrap { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}