/* AtlaVentures component styles - CANYON DUSK (approved 19AUG2026).
   Visual source of truth: design/concepts/04-canyon-dusk.html
   Tokens in tokens.css; project accents in project-colors.css.
   House rules: sharp corners, letter-spaced uppercase labels,
   gradient dusk bands top and bottom, numbered project banners. */

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

html { scroll-behavior: smooth; }

body {
  font: var(--md-type-body-lg);
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--md-sys-color-primary); }

.wrap { width: min(1120px, 100% - 52px); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: calc(100% - 32px); } }

/* ---------- The dusk band (header + hero live inside it) ---------- */

.topband {
  background: linear-gradient(160deg, var(--dusk1) 0%, var(--dusk2) 78%);
  color: var(--on-dusk);
}
.topband a { color: var(--on-dusk); }

.appbar .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}
.wordmark {
  font: 700 17px/1 var(--font-display);
  letter-spacing: 0.2em;
  color: var(--on-dusk);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { opacity: .75; }
.appbar nav { display: flex; gap: 6px; margin-left: auto; }
.appbar nav a {
  font: var(--md-type-label-md);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-dusk);
  opacity: .82;
  text-decoration: none;
  padding: 9px 12px;
}
.appbar nav a:hover { opacity: 1; }
/* AVT-N3 (08SEP2026, answers Q19): a plain two-button pair against Overture's
   public window.Overture API, replacing the four-option <overture-look-
   switcher> in the header - a real div now, not a custom element, so (unlike
   the AVT-G15 block this replaces) every child here is always live, not a
   no-JS fallback that only shows if a shadow root never attaches. The full
   four-look switcher still exists, unfiltered, on /settings. */
.lookswitch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.lookswitch > button {
  font: var(--md-type-label-md);
  padding: 6px 9px;
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid color-mix(in srgb, var(--on-dusk) 45%, transparent);
  background: transparent;
  color: var(--on-dusk);
  cursor: pointer;
}
.lookswitch > button:hover { background: color-mix(in srgb, var(--on-dusk) 12%, transparent); }
.lookswitch > button[aria-pressed="true"] {
  border-color: var(--on-dusk);
  background: color-mix(in srgb, var(--on-dusk) 16%, transparent);
}
.lookswitch-more {
  font: var(--md-type-label-md);
  font-size: 12px;
  color: var(--on-dusk);
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lookswitch-more:hover { opacity: 1; }

/* Phone: the bar wraps - wordmark + toggle on top, nav on its own row.
   (Without this the wordmark, three nav links and the toggle overflow 375px.) */
@media (max-width: 700px) {
  .appbar .wrap { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-block: 12px 4px; }
  .wordmark { font-size: 15px; letter-spacing: 0.16em; }
  /* Two buttons + the "More looks" link still crowd the wordmark at 375px,
     so the switcher keeps its own row between the wordmark and the nav
     (which is order: 3) rather than fighting for the same line. */
  .lookswitch { order: 2; width: 100%; margin-left: 0; padding-bottom: 6px; }
  .appbar nav { order: 3; width: 100%; margin-left: -12px; gap: 0; padding-bottom: 6px; }
  .appbar nav a { padding: 8px 12px; }
}

/* ---------- Home hero (inside the band) ---------- */

.hero { padding: 76px 0 88px; }
.hero .kicker {
  font: var(--md-type-label-md);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 18px;
}
.hero h1 {
  font: var(--md-type-display-sm);
  letter-spacing: -.015em;
  max-width: 16ch;
}
@media (min-width: 840px) { .hero h1 { font: var(--md-type-display-lg); letter-spacing: -.02em; } }
.hero h1 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--on-dusk-accent);
}
.hero p {
  font: var(--md-type-body-lg);
  opacity: .86;
  max-width: 54ch;
  margin-top: 20px;
}
.hero .actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- Buttons (MD3 roles, Canyon Dusk shape) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: var(--md-type-label-lg);
  font-weight: 600;
  letter-spacing: .03em;
  min-height: 46px;
  padding: 0 30px;
  border-radius: var(--md-sys-shape-corner-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  opacity: 0; transition: opacity 120ms;
}
.btn:hover::after { opacity: var(--md-sys-state-hover); }
.btn:active::after { opacity: var(--md-sys-state-pressed); }
/* on the dusk band, "filled" is the light-on-dark inversion from the concept */
.topband .btn-filled { background: var(--on-dusk); color: var(--dusk1); }
.topband .btn-outlined {
  background: transparent; color: var(--on-dusk);
  border: 1px solid color-mix(in srgb, var(--on-dusk) 48%, transparent);
}
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; min-height: 40px; }
.btn-project { background: var(--project-color); color: var(--project-on-color); }
.btn-project-tonal { background: var(--project-container); color: var(--project-on-container); }

/* ---------- Cards ---------- */

.card {
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-lg);
  padding: 26px;
}
.card.elevated { box-shadow: var(--md-sys-elevation-1); border: none; background: var(--md-sys-color-surface-container-lowest); }

/* ---------- Badges / chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--md-type-label-md);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--project-color, var(--md-sys-color-primary)); }
.chip.status-live, .chip.status-available { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border: none; }
.chip.status-coming-soon { background: transparent; color: var(--project-color, var(--md-sys-color-primary)); border: 1px dashed currentColor; }
.chip.kind { background: var(--project-container, var(--md-sys-color-surface-variant)); color: var(--project-on-container, var(--md-sys-color-on-surface-variant)); border: none; }
/* chips sitting on a dusk band */
.topband .chip { border-color: color-mix(in srgb, var(--on-dusk) 40%, transparent); color: var(--on-dusk); }
.topband .chip.status-live, .topband .chip.status-available { background: color-mix(in srgb, var(--on-dusk) 16%, transparent); color: var(--on-dusk); }
.topband .chip.status-coming-soon { color: var(--on-dusk-accent); border-color: currentColor; }
.topband .chip.kind { background: color-mix(in srgb, var(--on-dusk) 16%, transparent); color: var(--on-dusk); }
/* 5c contrast fix: --on-dusk-accent measures 4.02:1 against dusk1 in the two
   light looks - below WCAG AA's 4.5:1 for this 12px bold label text (it is
   NOT a token value bug; --on-dusk-accent is Overture's own token, shared
   across every project's looks, so its value is not this site's to change -
   see the site-level exception below instead). --on-dusk measures 5.53:1
   against the same background and passes. Dark looks are untouched: the
   pair already measures 7.46:1 there. */
[data-look="global-light"] .topband .chip.status-coming-soon,
[data-look="matinee"] .topband .chip.status-coming-soon { color: var(--on-dusk); }

/* ---------- Section headings ---------- */

.section-label {
  font: var(--md-type-label-md);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
  margin-bottom: 10px;
}
.section-title { font: var(--md-type-headline-md); letter-spacing: -.01em; margin: 52px 0 8px; }
.section-title:first-child { margin-top: 0; }
.section-sub { color: var(--md-sys-color-on-surface-variant); margin-bottom: 28px; font: var(--md-type-body-md); }

/* ---------- Numbered project banners (the Canyon Dusk signature) ---------- */

.project-banners { display: grid; gap: 20px; margin-bottom: 68px; }

.project-banner {
  display: grid;
  grid-template-columns: 96px 1fr 300px;
  align-items: center;
  gap: 26px;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 4px solid var(--project-color, var(--md-sys-color-primary));
  border-radius: var(--md-sys-shape-corner-lg);
  box-shadow: var(--md-sys-elevation-1);
  padding: 28px 32px;
  text-decoration: none;
  color: var(--md-sys-color-on-surface);
  transition: box-shadow 160ms, transform 160ms;
}
.project-banner:hover { box-shadow: var(--md-sys-elevation-2); transform: translateY(-2px); }
.project-banner .num {
  font: 700 52px/1 var(--font-display);
  letter-spacing: -.04em;
  color: var(--project-color, var(--md-sys-color-primary));
}
.project-banner .head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.project-banner h3 { font: var(--md-type-headline-sm); letter-spacing: -.01em; }
.project-banner .tagline { color: var(--md-sys-color-on-surface-variant); font: var(--md-type-body-md); margin-top: 8px; max-width: 56ch; }
.project-banner .more {
  display: inline-block; margin-top: 10px;
  font: var(--md-type-label-md); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--project-color, var(--md-sys-color-primary));
}
.project-banner .art {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-md);
  overflow: hidden;
  background: var(--md-sys-color-surface);
  aspect-ratio: 16/10;
}
.project-banner .art img { width: 100%; height: 100%; object-fit: cover; }
.project-banner .art .ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--project-container), var(--project-color));
  color: var(--project-on-color);
  font: var(--md-type-label-md); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 12px;
}
@media (max-width: 900px) {
  .project-banner { grid-template-columns: 64px 1fr; padding: 22px; gap: 18px; }
  .project-banner .num { font-size: 34px; }
  .project-banner .art { grid-column: 1 / -1; }
}

/* ---------- Project page ---------- */

.p-hero { padding: 54px 0 74px; border-top: 3px solid var(--project-color); }
.p-hero .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.p-hero h1 { font: var(--md-type-headline-lg); letter-spacing: -.02em; }
@media (min-width: 840px) { .p-hero h1 { font: 700 50px/1.05 var(--font-display); letter-spacing: -.025em; } }
.p-hero .tagline {
  font: var(--md-type-title-lg); font-weight: 400;
  font-family: var(--font-accent); font-style: italic;
  opacity: .9; max-width: 58ch; margin-top: 14px;
}
.p-hero .actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
/* project CTA on the dusk band: use the light inversion so it always reads */
.topband .btn-project { background: var(--on-dusk); color: var(--dusk1); }
.topband .btn-project-tonal {
  background: transparent; color: var(--on-dusk);
  border: 1px solid color-mix(in srgb, var(--on-dusk) 48%, transparent);
}

.p-body { padding: 52px 0 76px; display: grid; gap: 52px; }
.p-desc { max-width: 68ch; }
.p-desc p + p { margin-top: 14px; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.feature { border-left: 3px solid var(--project-color); padding: 2px 0 2px 18px; }
.feature b { display: block; margin-bottom: 5px; font: var(--md-type-title-md); }
.feature span { color: var(--md-sys-color-on-surface-variant); font: var(--md-type-body-md); }

/* align-items:start matters: a portrait phone shot next to a landscape desktop
   shot would otherwise stretch the whole row and leave a tall empty block
   under the shorter one. max-height keeps the two roughly comparable. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}
.shot {
  border-radius: var(--md-sys-shape-corner-lg);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}
.shot img { width: 100%; max-height: 460px; object-fit: contain; object-position: top; }
.shot figcaption {
  font: var(--md-type-label-md); color: var(--md-sys-color-on-surface-variant);
  padding: 10px 14px; background: var(--md-sys-color-surface-container-low);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.shot-placeholder {
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--project-container), var(--project-color));
  color: var(--project-on-color);
  font: var(--md-type-label-lg); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 16px;
}

/* Template-specific blocks */

.price-card { display: flex; align-items: baseline; gap: 14px; }
.price-card .price { font: 700 44px/1 var(--font-display); letter-spacing: -.03em; color: var(--project-color); }
.price-card .per { color: var(--md-sys-color-on-surface-variant); font: var(--md-type-body-md); }

.free-banner {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-radius: var(--md-sys-shape-corner-md);
  padding: 10px 18px;
  font: var(--md-type-label-lg); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

.install-steps { counter-reset: step; display: grid; gap: 14px; max-width: 60ch; }
.install-steps li {
  list-style: none; counter-increment: step;
  display: flex; gap: 16px; align-items: baseline;
}
.install-steps li::before {
  content: counter(step, decimal-leading-zero);
  flex: none;
  min-width: 34px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--md-sys-shape-corner-sm);
  background: var(--project-color); color: var(--project-on-color);
  font: var(--md-type-label-md); font-weight: 700; letter-spacing: .06em;
}

.notice {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 3px solid var(--project-color, var(--md-sys-color-primary));
  border-radius: var(--md-sys-shape-corner-md);
  padding: 18px 22px;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-type-body-md);
  max-width: 70ch;
}

/* AVT-N3: the full four-look switcher on /settings, unfiltered. */
.settings-switcher { margin: 22px 0; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 110px 0 130px; }
.notfound h1 { font: var(--md-type-display-sm); letter-spacing: -.02em; margin-bottom: 12px; }
.notfound p { color: var(--md-sys-color-on-surface-variant); margin-bottom: 28px; }

/* ---------- Static pages (Terms, Privacy, Refunds, thank-you, ...) ---------- */
.static-page { padding: 64px 0 90px; }
.static-page h1 { font: var(--md-type-headline-lg); letter-spacing: -.02em; margin-bottom: 28px; }
.static-body { max-width: 68ch; font: var(--md-type-body-md); }
.static-body h2 { font: var(--md-type-title-lg); letter-spacing: -.01em; margin: 36px 0 12px; }
.static-body h2:first-child { margin-top: 0; }
.static-body p { margin-bottom: 14px; }
.static-body ul, .static-body ol { margin: 0 0 14px 22px; }
.static-body li + li { margin-top: 6px; }
.static-body a { color: var(--md-sys-color-primary); }

/* Legal-page furniture (AVT-W2): the date stamp, the "short version" callout,
   the unfinished-fact placeholders, and inline code for key/host names. */
.static-body .updated {
  font: var(--md-type-label-md); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 26px;
}
.static-body .notice { margin-bottom: 26px; max-width: none; }
.static-body .notice p:last-child { margin-bottom: 0; }
/* PLACEHOLDER blocks: deliberately loud. They mark a real-world fact that
   does not exist yet, and must be replaced - never quietly deleted. */
.static-body .todo {
  background: var(--md-sys-color-surface-container-high);
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-md);
  padding: 16px 20px;
  margin: 0 0 18px;
  color: var(--md-sys-color-on-surface-variant);
}
.static-body .todo b { color: var(--md-sys-color-on-surface); }
.static-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 3px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
.static-body .see-also {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Footer (the closing dusk band) ---------- */

footer {
  margin-top: auto;
  background: linear-gradient(160deg, var(--dusk2) 0%, var(--dusk1) 100%);
  color: var(--on-dusk);
  padding: 52px 0 44px;
}
footer .wrap { display: grid; gap: 22px; }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer nav a {
  font: var(--md-type-label-md); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dusk); opacity: .8; text-decoration: none;
}
footer nav a:hover { opacity: 1; }
footer .ai-statement { max-width: 68ch; opacity: .9; font: var(--md-type-body-md); }
footer .ai-statement b, footer .ai-statement strong { color: var(--on-dusk-accent); }
/* 5c contrast fix - same root cause and same fix as the chip rule above:
   --on-dusk-accent measures 4.02:1 in the two light looks, below AA's
   4.5:1 for 14px bold text; --on-dusk measures 5.53:1 and passes. Dark
   looks untouched (already 7.46:1). Not a token-value change - see the
   comment on .topband .chip.status-coming-soon. */
[data-look="global-light"] footer .ai-statement b,
[data-look="global-light"] footer .ai-statement strong,
[data-look="matinee"] footer .ai-statement b,
[data-look="matinee"] footer .ai-statement strong { color: var(--on-dusk); }
footer .copyright {
  font: var(--md-type-label-md); letter-spacing: .1em; text-transform: uppercase;
  opacity: .55;
}