/* CD Wally — cdwally.com landing page
   Design tokens carried from the existing CD Wally web identity
   (SF system type, ultralight display, #7B68EE accent). Warm + tactile to
   match the skeuomorphic product; dark sections = the car, light = home.
   No glassmorphism / gradient text / glow shadows / middot separators. */

:root {
  --ink:      #1d1d1f;
  --ink-2:    #6e6e73;
  --ink-3:    #9a9a9f;
  --paper:    #ffffff;
  --paper-2:  #f6f5f2;   /* warm light panel */
  --night:    #0d0d11;   /* nylon black / night dashboard */
  --night-2:  #17171d;
  --night-ink:   #f4f3f7;
  --night-ink-2: #a9a8b4;
  --accent:      #7b68ee;
  --accent-lift: #9b8bff;
  --line:      rgba(0,0,0,.10);
  --line-dk:   rgba(255,255,255,.12);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --measure: 34rem;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, "Roboto Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--display);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lift); }

/* ---------- layout ---------- */
.section { padding: var(--s8) var(--s3); }
.wrap { max-width: 1040px; margin: 0 auto; }
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

.section--night { background: var(--night); color: var(--night-ink); }
.section--night h1, .section--night h2 { color: var(--night-ink); }
.section--night p { color: var(--night-ink-2); }
.section--paper2 { background: var(--paper-2); }

/* ---------- type ---------- */
.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s2);
}
.section--night .kicker { color: var(--accent-lift); }

h1, h2 { font-weight: 200; letter-spacing: -.022em; margin: 0 0 var(--s3); }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; }
.lead { font-size: clamp(1.12rem, 1.9vw, 1.35rem); color: var(--ink-2); max-width: var(--measure); }
.section--night .lead { color: var(--night-ink-2); }
p { max-width: var(--measure); }
strong { font-weight: 500; color: inherit; }

/* ---------- hero ---------- */
.hero { padding-top: var(--s8); padding-bottom: var(--s12); text-align: center; background: var(--paper-2); }
.hero .wrap { display: flex; flex-direction: column; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s6); }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand span { font-size: 1.02rem; letter-spacing: .01em; color: var(--ink); }
.hero h1 { max-width: 16ch; }
.hero .lead { text-align: center; margin: 0 auto var(--s6); }
.hero-media { margin: var(--s8) auto 0; width: 100%; max-width: 980px; }

/* screens */
.screen {
  border-radius: 18px;
  border: 1px solid var(--line-dk);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
/* framed device shots (bezelbub): transparent PNG, no card chrome, no shadow */
.device {
  width: 100%;
  margin: 0 auto;
}

.figure { margin: 0; }
.media .figure + .figure { margin-top: var(--s3); }
.figure figcaption {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: var(--s2);
}
.section--night .figure figcaption { color: var(--night-ink-2); }

/* ---------- buttons ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff;
  font-size: 1.02rem; font-weight: 400;
  padding: 14px 26px; border-radius: 999px;
  transition: background .15s ease, transform .15s ease;
}
.cta:hover { background: var(--accent-lift); color: #fff; transform: translateY(-1px); }
.cta svg { width: 18px; height: 18px; }
.microcopy { font-size: .85rem; color: var(--ink-3); margin: var(--s2) 0 0; }
.section--night .microcopy { color: var(--night-ink-2); }
.cta-row { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s6); }

/* ---------- split rows ---------- */
.split { display: grid; gap: var(--s8); align-items: center; }
.split .body { max-width: var(--measure); }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s12); }
  .split.reverse .media { order: 2; }
}

/* ---------- device breadth grid ---------- */
.devices { display: grid; gap: var(--s3); margin-top: var(--s8); }
/* breadth row: iPad smaller, Apple TV (the big screen) larger */
@media (min-width: 760px) { .devices { grid-template-columns: 2fr 3fr; align-items: center; } }
.devices .figure figcaption { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; }

/* two screenshots side by side, with normal (non-uppercase) captions */
.pair { display: grid; gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- tiers ---------- */
.tiers { display: grid; gap: var(--s3); margin-top: var(--s8); }
@media (min-width: 720px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  display: block;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s4);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tier:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.tier--free { border-color: var(--accent); }
.tier .size { font-size: 1.4rem; font-weight: 300; margin: 0 0 4px; letter-spacing: -.01em; }
.tier .price { font-family: var(--mono); font-size: .95rem; color: var(--ink-2); margin: 0; }
.tier .note { font-size: .9rem; color: var(--ink-2); margin: var(--s2) 0 0; }
.tier .tag {
  display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2);
}

/* ---------- footer ---------- */
footer { text-align: center; }
footer .studio { font-size: .85rem; color: var(--night-ink-2); margin: var(--s8) auto 0; }
footer .studio a { color: var(--night-ink); }

.slot {
  border: 1px dashed var(--accent);
  border-radius: 18px;
  padding: var(--s6);
  color: var(--accent);
  font-family: var(--mono);
  font-size: .8rem;
  text-align: center;
  background: rgba(123,104,238,.05);
}

/* motion honoring */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta { transition: none; }
}