:root {
  color-scheme: dark;
  --ink: #fffaf2;
  --ink-soft: #e7dfec;
  --muted: #aaa0b5;
  --dim: #8f8795;
  --void: #08070c;
  --night: #0e0a14;
  --panel: #15101d;
  --panel-strong: #1d1428;
  --line: rgba(237, 218, 255, 0.14);
  --line-bright: rgba(237, 218, 255, 0.3);
  --control-line: rgba(237, 218, 255, 0.4);
  --violet: #ad85ff;
  --violet-bright: #cdb5ff;
  --magenta: #ff6da9;
  --gold: #f2ce83;
  --gold-hot: #ffe5a4;
  --mint: #83e7c1;
  --blue: #7ab6ff;
  --danger: #ffb0c2;
  --shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell-gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --shell: min(calc(100% - var(--shell-gutter) - var(--shell-gutter)), 80rem);
  --radius: 1.4rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background: var(--void);
}

html.start-chooser-page {
  scroll-behavior: auto;
  overflow-anchor: none;
}

body {
  margin: 0;
  overflow-x: auto;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% -6%, rgba(118, 68, 178, 0.18), transparent 34rem),
    radial-gradient(circle at 94% 20%, rgba(75, 45, 122, 0.14), transparent 32rem),
    var(--void);
  font-family: var(--sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(circle at 50% 20%, #000, transparent 78%);
  pointer-events: none;
  content: "";
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-user-select: text;
  user-select: text;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #120c1a;
  background: var(--gold);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.site-shell {
  width: var(--shell);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.72rem 1rem;
  border-radius: 0.65rem;
  color: #0b0710;
  background: #fff;
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid transparent;
  background: rgba(8, 7, 12, 0.78);
  backdrop-filter: blur(22px) saturate(130%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.site-header[data-scrolled],
.site-header[data-scrolled="true"] {
  border-color: var(--line);
  background: #08070c;
  box-shadow: 0 0.8rem 2.8rem rgba(0, 0, 0, 0.24);
}

.header-inner {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.site-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.85rem, 1.8vw, 1.65rem);
  margin-left: auto;
  white-space: nowrap;
}

.site-nav a {
  position: relative;
  flex: 0 0 auto;
  color: #c6bccb;
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.045em;
  text-decoration: none;
  transition: color 160ms ease;
}

.site-nav a:not(.nav-start, .site-brand)::after {
  position: absolute;
  right: 0;
  bottom: -0.52rem;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  content: "";
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.72rem;
  color: var(--ink) !important;
  font-family: var(--display);
  font-size: clamp(1.08rem, 2vw, 1.3rem) !important;
  font-weight: 650 !important;
  /* pruned: -0.035em !important lost to the owner's spaced-out masthead */
  text-decoration: none;
}

.site-brand::before {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  place-items: center;
  border: 1px solid rgba(242, 206, 131, 0.72);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, var(--gold-hot) 44% 47%, transparent 48%) center / 0.78rem 0.78rem no-repeat,
    linear-gradient(-45deg, transparent 43%, var(--gold-hot) 44% 47%, transparent 48%) center / 0.78rem 0.78rem no-repeat,
    radial-gradient(circle, var(--ink) 0 5%, transparent 7% 27%, rgba(173, 133, 255, 0.42) 29% 31%, transparent 33%),
    radial-gradient(circle, rgba(242, 206, 131, 0.2), transparent 64%),
    #100c15;
  box-shadow:
    inset 0 0 0 0.22rem rgba(8, 7, 12, 0.78),
    0 0 1.8rem rgba(173, 133, 255, 0.23);
  content: "";
}

.site-nav > .site-brand {
  margin-right: auto;
}

.site-nav:has(> .site-brand) {
  width: 100%;
  margin-left: 0;
}

.header-inner > .site-nav:only-child {
  width: 100%;
  margin-left: 0;
}

.nav-start {
  margin-left: 0.2rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(242, 206, 131, 0.48);
  border-radius: 0.2rem;
  color: var(--ink) !important;
  background: rgba(242, 206, 131, 0.06);
}

.nav-start:hover,
.nav-start:focus-visible {
  border-color: var(--gold);
  background: rgba(242, 206, 131, 0.12);
}

.nav-call {
  display: none;
}

.menu-button {
  display: none;
}

main {
  display: block;
}

.eyebrow,
.card-kicker,
.overline {
  margin: 0 0 0.85rem;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow::before {
  display: inline-block;
  width: 1.8rem;
  height: 1px;
  margin-right: 0.65rem;
  background: currentColor;
  vertical-align: 0.25em;
  content: "";
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--ink);
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.045em;
}

h3 {
  letter-spacing: -0.025em;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  z-index: -2;
  top: -13rem;
  left: 46%;
  width: 48rem;
  height: 48rem;
  border: 1px solid rgba(173, 133, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgba(173, 133, 255, 0.025),
    0 0 0 10rem rgba(173, 133, 255, 0.018);
  content: "";
}

.hero-grid {
  display: grid;
  min-height: clamp(34rem, 70vh, 48rem);
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.88fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 11.5ch;
  margin-bottom: 1.35rem;
  font-size: clamp(3.3rem, 7.8vw, 7.25rem);
  line-height: 0.88;
}

.hero .lede {
  max-width: 39rem;
}

.lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 2vw, 1.38rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.button {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.15rem;
  border: 1px solid var(--control-line);
  border-radius: 0.2rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.875rem;
  font-weight: 820;
  letter-spacing: 0.065em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 180ms var(--ease-out);
}

.button:hover,
.button:focus-visible {
  border-color: var(--violet-bright);
  background: rgba(173, 133, 255, 0.1);
  transform: translateY(-2px);
}

.button-primary {
  border-color: transparent;
  color: #130a1c;
  background: linear-gradient(135deg, var(--gold-hot), #dfb75e);
  box-shadow: 0 14px 42px rgba(242, 206, 131, 0.15);
}

.button-primary:hover,
.button-primary:focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, #fff0bf, #edc873);
}

.button-quiet {
  border-color: var(--control-line);
  background: rgba(255, 255, 255, 0.025);
}

.hero-art {
  position: relative;
  min-width: 0;
}

.hero-art::before,
.hero-art::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
  content: "";
}

.hero-art::before {
  top: -10%;
  right: -8%;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(242, 206, 131, 0.32);
  box-shadow: 0 0 4rem rgba(242, 206, 131, 0.15);
}

.hero-art::after {
  bottom: -7%;
  left: -8%;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgba(173, 133, 255, 0.28);
  box-shadow: 0 0 5rem rgba(173, 133, 255, 0.15);
}

.hero-image {
  width: 100%;
  aspect-ratio: 1.15;
  border: 1px solid var(--line-bright);
  border-radius: clamp(1.4rem, 4vw, 3rem);
  object-fit: cover;
  box-shadow: var(--shadow);
}

.hero-art figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  max-width: 16rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  color: var(--ink-soft);
  background: rgba(8, 7, 12, 0.82);
  backdrop-filter: blur(10px);
  font-size: 0.75rem;
  line-height: 1.45;
}

.home-hero .hero-grid {
  min-height: clamp(42rem, 88vh, 62rem);
}

.home-hero .hero-art {
  margin-right: 0;
}

.home-hero .hero-image {
  aspect-ratio: 0.9;
  border-radius: 9rem 1.6rem 9rem 1.6rem;
  object-position: 54% center;
  filter: saturate(0.9) contrast(1.06);
}

.home-hero h1 em {
  color: var(--gold);
  font-style: italic;
}

.proof-strip {
  position: relative;
  z-index: 3;
  display: grid;
  width: var(--shell);
  margin: -2.25rem auto 0;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(16, 11, 23, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.proof-item {
  min-width: 0;
  padding: 1rem 1.15rem;
}

.proof-item + .proof-item {
  border-left: 1px solid var(--line);
}

.proof-item strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
}

.proof-item span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.section {
  position: relative;
  padding-block: clamp(3.75rem, 6vw, 5.5rem);
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section-dark {
  background:
    radial-gradient(circle at 86% 30%, rgba(85, 54, 130, 0.13), transparent 28rem),
    #0a080e;
}

.section-head {
  display: grid;
  max-width: 62rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr);
  gap: clamp(1.4rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 4.5rem);
}

.section-head h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.45rem, 5.6vw, 5rem);
  line-height: 0.93;
}

.section-head p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.door-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 29rem;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 80% 10%, rgba(173, 133, 255, 0.15), transparent 16rem),
    linear-gradient(150deg, rgba(30, 20, 42, 0.96), rgba(13, 9, 18, 0.96));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: border-color 180ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.door-card::before {
  position: absolute;
  z-index: -1;
  right: -22%;
  bottom: -28%;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(173, 133, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 2rem rgba(173, 133, 255, 0.025),
    0 0 0 4rem rgba(173, 133, 255, 0.018);
  content: "";
}

.door-card:nth-child(2) {
  background:
    radial-gradient(circle at 80% 10%, rgba(242, 206, 131, 0.16), transparent 16rem),
    linear-gradient(150deg, rgba(34, 25, 34, 0.96), rgba(14, 10, 17, 0.96));
}

.door-card:nth-child(3) {
  background:
    radial-gradient(circle at 80% 10%, rgba(131, 231, 193, 0.14), transparent 16rem),
    linear-gradient(150deg, rgba(20, 34, 35, 0.96), rgba(9, 14, 17, 0.96));
}

.door-card:hover,
.door-card:focus-visible {
  border-color: var(--violet-bright);
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.42);
  transform: translateY(-0.5rem);
}

.door-index {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  margin-bottom: auto;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.9rem;
}

.door-card h3 {
  max-width: 11ch;
  margin: 4rem 0 0.75rem;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 0.98;
}

.door-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.door-arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.door-arrow::after {
  font-size: 1rem;
  content: "↗";
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 55%),
    rgba(17, 12, 24, 0.68);
}

.card h2,
.card h3 {
  margin-bottom: 0.65rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.08;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.card p + p,
.card ul + p {
  margin-top: 0.75rem;
}

.card a:not(.button) {
  display: inline-flex;
  margin-top: auto;
  color: var(--gold);
}

.scope-pricing-note {
  display: grid;
  grid-template-columns: minmax(14rem, 0.4fr) minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: start;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(242, 206, 131, 0.26);
  border-radius: 0.9rem;
  background: rgba(242, 206, 131, 0.05);
}

.scope-pricing-note strong {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.15;
}

.scope-pricing-note p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.scope-disclosure {
  margin-top: 1rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(8, 7, 12, 0.28);
}

.scope-disclosure > summary {
  position: relative;
  padding: 1rem 2.25rem 1rem 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 820;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.scope-disclosure > summary::-webkit-details-marker {
  display: none;
}

.scope-disclosure > summary::after {
  position: absolute;
  top: 0.95rem;
  right: 0;
  color: var(--gold);
  content: "+";
}

.scope-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
}

.scope-disclosure[open] > summary::after {
  content: "−";
}

.scope-disclosure > :not(summary) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.scope-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.scope-tier {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 55%),
    rgba(17, 12, 24, 0.72);
}

.scope-tier header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.65rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.scope-tier header p {
  grid-row: 1 / 3;
  margin: 0;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 830;
}

.scope-tier h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1;
}

.scope-tier header span {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.scope-tier dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0.8rem 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  overflow: hidden;
}

.scope-tier dl > div {
  min-width: 0;
  padding: 0.65rem;
  background: rgba(8, 7, 12, 0.42);
}

.scope-tier dl > div:nth-child(even) {
  border-left: 1px solid var(--line);
}

.scope-tier dl > div:nth-child(n + 3) {
  border-top: 1px solid var(--line);
}

.scope-tier dt {
  color: var(--dim);
  font-size: 0.875rem;
  font-weight: 830;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scope-tier dd {
  margin: 0.22rem 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.scope-tier > p {
  margin: auto 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.scope-tier-scale {
  grid-column: 1 / -1;
  border-color: rgba(131, 231, 193, 0.3);
  background:
    radial-gradient(circle at 88% 10%, rgba(131, 231, 193, 0.08), transparent 18rem),
    rgba(14, 18, 22, 0.72);
}

.scope-tier-scale dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scope-tier-scale dl > div:nth-child(even),
.scope-tier-scale dl > div:nth-child(n + 3) {
  border: 0;
}

.scope-tier-scale dl > div + div {
  border-left: 1px solid var(--line);
}

.creativity-card {
  border-top-color: rgba(242, 206, 131, 0.42);
}

.creative-proof-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 0.7fr);
  gap: 1.5rem 4rem;
  align-items: end;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.creative-proof-intro h3 {
  max-width: 14ch;
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 0.98;
}

.creative-proof-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.creative-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.creative-specimen {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.025);
}

.specimen-browser {
  overflow: hidden;
  min-height: 25rem;
  border-bottom: 1px solid var(--line);
  background: #f6f1e7;
  color: #17201e;
}

.specimen-bar {
  display: flex;
  gap: 0.32rem;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border-bottom: 1px solid rgba(23, 32, 30, 0.12);
  background: rgba(255, 255, 255, 0.6);
}

.specimen-bar i {
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.36;
}

.specimen-bar span {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.specimen-page {
  position: relative;
  min-height: 23rem;
  padding: 1.25rem;
  isolation: isolate;
}

.specimen-page p {
  margin: 0;
}

.specimen-brand {
  position: relative;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.specimen-page h4 {
  position: relative;
  z-index: 2;
  margin: 4.5rem 0 0.8rem;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.specimen-page h4 + p {
  position: relative;
  z-index: 2;
  max-width: 21rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.specimen-action {
  position: absolute;
  z-index: 2;
  bottom: 1.2rem;
  left: 1.25rem;
  display: inline-flex;
  padding-bottom: 0.22rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.specimen-essential-rule {
  width: 3.5rem;
  height: 1px;
  margin-top: 1rem;
  background: #17201e;
}

.creative-specimen-distinctive .specimen-browser {
  background: #f2b654;
  color: #29171c;
}

.creative-specimen-distinctive .specimen-page {
  overflow: hidden;
}

.creative-specimen-distinctive .specimen-number {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.creative-specimen-distinctive .specimen-page h4 {
  margin-top: 7.5rem;
}

.specimen-orbit {
  position: absolute;
  top: 2.8rem;
  right: -3rem;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(41, 23, 28, 0.35);
  border-radius: 50%;
}

.specimen-orbit::before,
.specimen-orbit::after,
.specimen-orbit b {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: #df5e45;
  transform-origin: 50% 5.7rem;
}

.specimen-orbit::before {
  top: 0.5rem;
  left: 5rem;
  width: 2rem;
  height: 4.2rem;
  transform: rotate(35deg);
}

.specimen-orbit::after {
  top: 1.4rem;
  left: 3.2rem;
  width: 2.1rem;
  height: 4.6rem;
  transform: rotate(-38deg);
}

.specimen-orbit b {
  top: 4.2rem;
  left: 1.7rem;
  width: 3.6rem;
  height: 2.2rem;
  background: #255d4f;
  transform: rotate(18deg);
}

.creative-specimen-atelier .specimen-browser {
  color: #fcf1dc;
  background:
    radial-gradient(circle at 78% 24%, rgba(241, 150, 90, 0.22), transparent 28%),
    radial-gradient(circle at 22% 88%, rgba(81, 185, 151, 0.24), transparent 34%),
    #15171c;
}

.creative-specimen-atelier .specimen-bar {
  border-color: rgba(252, 241, 220, 0.16);
  background: rgba(5, 7, 9, 0.36);
}

.creative-specimen-atelier .specimen-page h4 {
  max-width: 14ch;
  margin-top: 5.6rem;
  font-size: clamp(2.1rem, 2.8vw, 2.8rem);
  text-shadow: 0 0 2rem rgba(241, 150, 90, 0.25);
}

.creative-specimen-atelier .specimen-page h4 + p {
  max-width: 14rem;
}

.specimen-whisper {
  position: absolute;
  top: 3.2rem;
  left: 1.25rem;
  z-index: 2;
  max-width: 14rem;
  color: #a6d8c6;
  font-family: var(--display);
  font-size: 0.75rem;
  font-style: italic;
}

.specimen-bloom {
  position: absolute;
  top: 2.8rem;
  right: -0.8rem;
  width: 12rem;
  height: 12rem;
  opacity: 0.9;
  animation: specimen-drift 9s ease-in-out infinite alternate;
}

.specimen-bloom i {
  position: absolute;
  top: 3.8rem;
  left: 4.2rem;
  width: 3.4rem;
  height: 5.8rem;
  border: 1px solid rgba(252, 241, 220, 0.38);
  border-radius: 70% 20% 70% 20%;
  background: linear-gradient(150deg, rgba(241, 150, 90, 0.65), rgba(71, 132, 111, 0.2));
  transform-origin: 50% 70%;
}

.specimen-bloom i:nth-child(2) {
  transform: rotate(72deg);
}

.specimen-bloom i:nth-child(3) {
  transform: rotate(144deg);
}

.specimen-bloom i:nth-child(4) {
  transform: rotate(216deg);
}

.specimen-bloom i:nth-child(5) {
  transform: rotate(288deg);
}

@keyframes specimen-drift {
  from { transform: rotate(-4deg) translateY(-0.2rem); }
  to { transform: rotate(5deg) translateY(0.35rem); }
}

.creative-specimen > footer {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
}

.creative-specimen > footer strong {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
}

.creative-specimen > footer span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.scope-component-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.scope-component-grid article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.025);
}

.scope-component-grid strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.1;
}

.scope-component-grid p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.scope-receipt {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(131, 231, 193, 0.26);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 10%, rgba(131, 231, 193, 0.09), transparent 18rem),
    rgba(12, 17, 20, 0.76);
  box-shadow: var(--shadow);
}

.scope-receipt h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.scope-receipt dl {
  display: grid;
  gap: 0.55rem;
  margin: 1.2rem 0 0;
}

.scope-receipt dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.32fr) minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: rgba(8, 7, 12, 0.4);
}

.scope-receipt dt {
  color: var(--mint);
  font-size: 0.875rem;
  font-weight: 830;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scope-receipt dd {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.process-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.process-phase-grid > article {
  min-width: 0;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 55%),
    rgba(17, 12, 24, 0.62);
}

.process-phase-grid header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.process-phase-grid header > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(242, 206, 131, 0.35);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
}

.process-phase-grid header p {
  margin: 0 0 0.18rem;
  color: var(--dim);
  font-size: 0.875rem;
  font-weight: 830;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-phase-grid h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 500;
  line-height: 1.05;
}

.process-phase-grid dl {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
}

.process-phase-grid dl > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.3fr) minmax(0, 1fr);
  gap: 0.75rem;
}

.process-phase-grid dt {
  color: var(--mint);
  font-size: 0.875rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.process-phase-grid dd {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.process-mechanics-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(24rem, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.process-mechanics-grid h2 {
  max-width: 12ch;
  margin: 0.55rem 0 1.5rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.process-rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.process-rules li {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.process-rules strong {
  color: var(--ink);
  font-size: 1rem;
}

.process-rules span {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.quote-anatomy {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid rgba(242, 206, 131, 0.28);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 88% 8%, rgba(242, 206, 131, 0.08), transparent 18rem),
    rgba(12, 9, 16, 0.8);
  box-shadow: var(--shadow);
}

.quote-anatomy h3 {
  max-width: 15ch;
  margin: 0.5rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
}

.quote-anatomy dl {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.quote-anatomy dl > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.25fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}

.quote-anatomy dt {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 840;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-anatomy dd,
.quote-anatomy > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.quote-anatomy > p:last-child {
  margin-top: 1rem;
}

.about-hero {
  padding: clamp(4.5rem, 9vw, 8rem) 0 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 22%, rgba(111, 71, 160, 0.16), transparent 32rem),
    linear-gradient(180deg, rgba(8, 7, 12, 0.2), rgba(8, 7, 12, 0.92));
}

.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.about-hero-copy h1 {
  max-width: 12ch;
  margin: 0.65rem 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.about-hero-copy .lede {
  max-width: 42rem;
}

.about-portrait-alternative {
  position: relative;
  min-width: 0;
  margin: 0;
}

.about-portrait-alternative::before {
  position: absolute;
  z-index: -1;
  inset: -1.2rem 12% 1.4rem -1.2rem;
  border: 1px solid rgba(242, 206, 131, 0.18);
  border-radius: 7rem 1.2rem 7rem 1.2rem;
  content: "";
}

.about-portrait-alternative img {
  display: block;
  width: 100%;
  min-height: 34rem;
  object-fit: cover;
  border: 1px solid rgba(242, 206, 131, 0.26);
  border-radius: 7rem 1.2rem 7rem 1.2rem;
  box-shadow: var(--shadow);
}

.about-portrait-alternative figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  max-width: 17rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(242, 206, 131, 0.2);
  border-radius: 0.6rem;
  color: var(--muted);
  background: rgba(8, 7, 12, 0.9);
  font-size: 0.75rem;
  line-height: 1.5;
  backdrop-filter: blur(12px);
}

.about-fact-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}

.about-fact-rail > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 1rem;
}

.about-fact-rail > div + div {
  border-left: 1px solid var(--line);
}

.about-fact-rail span {
  color: var(--dim);
  font-size: 0.75rem;
  font-weight: 830;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-fact-rail strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 500;
}

.about-fact-note {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.about-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(22rem, 1fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.about-note-grid h2 {
  max-width: 9ch;
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.about-note {
  position: relative;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(242, 206, 131, 0.26);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 206, 131, 0.08), transparent 16rem),
    rgba(255, 255, 255, 0.025);
}

.about-note::before {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--gold);
  content: "“";
  font-family: var(--display);
  font-size: 4rem;
  line-height: 0.5;
}

.about-note p {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  line-height: 1.18;
}

.about-note footer {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.about-accountability {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.about-accountability li {
  display: grid;
  grid-template-columns: 4rem minmax(11rem, 0.4fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}

.about-accountability li > span {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
}

.about-accountability li > div {
  display: contents;
}

.about-accountability strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 500;
}

.about-accountability p {
  max-width: 50rem;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.about-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.about-proof-grid a {
  position: relative;
  display: grid;
  min-height: 17rem;
  gap: 1rem;
  align-content: space-between;
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 71, 160, 0.14), transparent 17rem),
    rgba(255, 255, 255, 0.025);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.about-proof-grid a:nth-child(even) {
  background:
    radial-gradient(circle at 100% 0%, rgba(242, 206, 131, 0.11), transparent 17rem),
    rgba(255, 255, 255, 0.025);
}

.about-proof-grid a > span {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-proof-grid strong {
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
}

.about-proof-grid i {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
}

.about-proof-grid i::after {
  margin-left: 0.4rem;
  color: var(--gold);
  content: "→";
}

.about-contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 0.7fr);
  gap: 2rem 5rem;
  align-items: end;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid rgba(131, 231, 193, 0.24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 10%, rgba(131, 231, 193, 0.08), transparent 20rem),
    rgba(14, 18, 22, 0.72);
  box-shadow: var(--shadow);
}

.about-contact-panel h2 {
  max-width: 12ch;
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.about-contact-panel > div:last-child > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.split.reverse > :first-child {
  order: 2;
}

.split h2 {
  max-width: 16ch;
  margin-bottom: 1.2rem;
  font-size: clamp(2.7rem, 6vw, 5.2rem);
  line-height: 0.94;
}

.split p {
  color: var(--muted);
}

.split .lede {
  color: var(--ink-soft);
}

.visual-panel {
  position: relative;
  overflow: hidden;
  min-height: 30rem;
  border: 1px solid var(--line);
  border-radius: clamp(1.2rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 26% 22%, rgba(242, 206, 131, 0.28), transparent 8rem),
    radial-gradient(circle at 72% 66%, rgba(173, 133, 255, 0.3), transparent 14rem),
    linear-gradient(145deg, #22172f, #0d0913);
  box-shadow: var(--shadow);
}

.visual-panel::before,
.visual-panel::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 1rem;
  background: rgba(8, 7, 12, 0.58);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
  content: "";
}

.visual-panel::before {
  top: 13%;
  right: 10%;
  width: 58%;
  height: 58%;
  transform: rotate(4deg);
}

.visual-panel::after {
  bottom: 10%;
  left: 10%;
  width: 48%;
  height: 38%;
  transform: rotate(-5deg);
}

.visual-panel img {
  width: 100%;
  min-height: 30rem;
  object-fit: cover;
}

.visual-panel-image::before,
.visual-panel-image::after {
  display: none;
}

.visual-panel-image img {
  height: 100%;
  object-position: center;
}

.visual-panel-image figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line-bright);
  border-radius: 0.7rem;
  color: var(--ink-soft);
  background: rgba(8, 7, 12, 0.84);
  backdrop-filter: blur(12px);
  font-size: 0.8rem;
  line-height: 1.5;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.pill-list li {
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.75rem;
  font-weight: 730;
}

.steps {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 0.7fr) minmax(20rem, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.step > span {
  color: var(--gold);
  font-family: var(--display);
  font-size: 0.95rem;
}

.step h2,
.step h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 500;
}

.step p {
  margin: 0;
  color: var(--muted);
}

.quote-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 5rem);
  border: 1px solid var(--line-bright);
  border-radius: clamp(1.4rem, 4vw, 2.8rem);
  background:
    radial-gradient(circle at 86% 20%, rgba(242, 206, 131, 0.18), transparent 18rem),
    radial-gradient(circle at 14% 90%, rgba(173, 133, 255, 0.17), transparent 22rem),
    #15101d;
  box-shadow: var(--shadow);
}

.quote-panel h2 {
  max-width: 18ch;
  margin-bottom: 1rem;
  overflow-wrap: normal;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  line-height: 0.92;
  word-break: normal;
}

.quote-panel p {
  max-width: 48rem;
  color: var(--ink-soft);
}

.anchor-nav {
  position: sticky;
  z-index: 20;
  top: 4.7rem;
  display: flex;
  width: 100%;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.8rem max(1.25rem, calc((100vw - 80rem) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(8, 7, 12, 0.9);
  scrollbar-width: none;
  backdrop-filter: blur(14px);
}

.anchor-nav::-webkit-scrollbar {
  display: none;
}

.anchor-nav a {
  flex: 0 0 auto;
  padding: 0.42rem 0.66rem;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 780;
  text-decoration: none;
}

.anchor-nav a:hover,
.anchor-nav a:focus-visible {
  color: var(--ink);
  border-color: var(--violet);
}

.service-shelf-head {
  margin-bottom: 1.4rem;
}

.service-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.service-compare a {
  display: grid;
  gap: 0.45rem;
  min-height: 8rem;
  align-content: end;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
}

.service-compare a:hover,
.service-compare a:focus-visible {
  border-color: var(--violet);
  background: rgba(173, 133, 255, 0.07);
}

.service-compare span {
  color: var(--gold);
  font-size: 0.875rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-compare strong {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-weight: 550;
}

.solution-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.solution-section {
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 55%),
    rgba(17, 12, 24, 0.7);
  scroll-margin-top: 8.5rem;
}

.solution-section:target {
  border-color: rgba(242, 206, 131, 0.54);
  box-shadow: 0 0 0 1px rgba(242, 206, 131, 0.12), 0 24px 70px -50px rgba(242, 206, 131, 0.5);
}

.solution-section-featured {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 90% 12%, rgba(229, 184, 83, 0.14), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 55%),
    rgba(25, 17, 27, 0.78);
}

.solution-section-domain {
  border-color: rgba(131, 231, 193, 0.25);
  background:
    radial-gradient(circle at 100% 0%, rgba(131, 231, 193, 0.1), transparent 28%),
    rgba(14, 25, 25, 0.68);
}

.solution-card-head {
  display: grid;
  align-content: start;
}

.solution-card-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  line-height: 0.98;
}

.solution-card-head .card-kicker {
  margin: 0 0 0.65rem;
  color: var(--gold);
}

.solution-card-head > p:last-child {
  max-width: 42rem;
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 1rem;
}

.solution-section details {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.solution-section summary {
  position: relative;
  padding: 1rem 2rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 820;
  cursor: pointer;
  list-style: none;
}

.solution-section summary::-webkit-details-marker {
  display: none;
}

.solution-section summary::after {
  position: absolute;
  top: 0.95rem;
  right: 0;
  color: var(--gold);
  content: "+";
}

.solution-section details[open] summary::after {
  content: "−";
}

.solution-section .solution-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
  gap: 1rem;
  padding-top: 1rem;
}

.solution-section .solution-body > div {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(8, 7, 12, 0.4);
}

.solution-section .solution-body p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.solution-section .solution-body ul {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  list-style: none;
}

.solution-section .solution-body li {
  position: relative;
  padding-left: 1.25rem;
}

.solution-section .solution-body li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.45rem;
  height: 1px;
  background: var(--gold);
  content: "";
}

.solution-section .solution-body .solution-fit > strong {
  color: var(--gold);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solution-section .solution-body .solution-fit p {
  margin-top: 0.6rem;
}

.solution-section .solution-body .button {
  margin-top: 1rem;
}

.work-card {
  display: flex;
  min-height: 23rem;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 55%),
    rgba(17, 12, 24, 0.68);
}

.work-card .work-number {
  margin-bottom: auto;
  color: var(--dim);
  font-family: var(--display);
  font-size: 3rem;
  line-height: 1;
}

.work-card h2 {
  margin-top: 4rem;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1.6rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.025);
}

.faq-anchor-nav strong {
  margin: 0 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq-anchor-nav a {
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(242, 206, 131, 0.2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.78rem;
  text-decoration: none;
}

.faq-anchor-nav a:hover,
.faq-anchor-nav a:focus-visible {
  border-color: rgba(242, 206, 131, 0.62);
  color: var(--gold);
}

.faq-list details {
  scroll-margin-top: 7rem;
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 1.35rem 3rem 1.35rem 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 1.42rem;
  right: 0;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 1rem;
  content: "+";
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details > div {
  max-width: 48rem;
  padding: 0 0 1.5rem;
  color: var(--muted);
}

.faq-list details > p {
  max-width: 48rem;
  padding: 0 0 1.5rem;
  color: var(--muted);
}

.faq-list details p {
  margin: 0;
}

.faq-list details p + p {
  margin-top: 0.8rem;
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: 1rem;
}

.contact-panel > * {
  min-width: 0;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.contact-panel h2 {
  margin-bottom: 0.8rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
}

.contact-panel a:not(.button) {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.65rem;
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  overflow-wrap: anywhere;
}

.contact-method-label {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 830;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.contact-method-value {
  margin: 0;
}

.contact-method-value + p {
  color: var(--muted);
}

.contact-intake-grid .card {
  min-height: 0;
}

.contact-intake-grid .card h3 {
  max-width: 16ch;
}

.contact-panel > .intake-context {
  grid-column: 1 / -1;
}

.intake-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.intake-topic-list li {
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  scroll-margin-top: 8.5rem;
}

.intake-topic-list li:target {
  border-color: var(--gold);
  color: var(--ink);
  background: rgba(242, 206, 131, 0.1);
  box-shadow: 0 0 0 2px rgba(242, 206, 131, 0.14);
}

.intake-context p:last-child {
  max-width: 62rem;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.choice-grid .card {
  min-height: 18rem;
}

.choice-grid .card h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.choice-grid .button {
  margin-top: 1.4rem;
}

.product-state-badge {
  display: grid;
  gap: 0.25rem;
  margin: 1rem 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(131, 231, 193, 0.3);
  border-radius: 0.75rem;
  color: var(--ink-soft);
  background: rgba(131, 231, 193, 0.06);
  font-size: 0.82rem;
  line-height: 1.45;
}

.product-state-badge strong {
  color: var(--mint);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.start-hero .start-layout {
  display: grid;
  min-height: clamp(42rem, 82vh, 58rem);
  grid-template-columns: minmax(18rem, 0.62fr) minmax(28rem, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.start-hero h1 {
  max-width: 10ch;
}

.start-direct-link {
  margin: 1.6rem 0 0;
  color: var(--gold);
  font-size: 1rem;
  font-weight: 760;
}

.start-chooser {
  min-width: 0;
  min-height: 35rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 90% 8%, rgba(173, 133, 255, 0.13), transparent 20rem),
    linear-gradient(145deg, rgba(30, 21, 41, 0.94), rgba(12, 9, 17, 0.97));
  box-shadow: var(--shadow);
  overflow-anchor: none;
}

.chooser-step,
.chooser-result {
  scroll-margin-top: 7rem;
}

.chooser-step[hidden],
.chooser-result[hidden] {
  display: none;
}

.chooser-step h2,
.chooser-result h2 {
  max-width: 15ch;
  margin: 0.8rem 0 1.8rem;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1;
}

.chooser-options {
  display: grid;
  gap: 0.7rem;
}

.chooser-options[data-start-options] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chooser-options :is(a, button) {
  display: grid;
  width: 100%;
  min-height: 5.2rem;
  grid-template-columns: minmax(9rem, 0.48fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--ink);
  background: rgba(8, 7, 12, 0.52);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    transform 180ms var(--ease-out);
}

.chooser-options[data-start-options] button {
  min-height: 4.6rem;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

.chooser-options :is(a, button):hover,
.chooser-options :is(a, button):focus-visible {
  border-color: rgba(242, 206, 131, 0.58);
  background: rgba(242, 206, 131, 0.07);
  transform: translateX(0.25rem);
}

.chooser-options strong {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.chooser-options small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.chooser-back {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.4rem;
  padding: 0 0.7rem;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 760;
  cursor: pointer;
}

.chooser-back:hover,
.chooser-back:focus-visible {
  color: var(--gold);
}

.chooser-result {
  min-height: 30rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(131, 231, 193, 0.3);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 90% 8%, rgba(131, 231, 193, 0.1), transparent 18rem),
    rgba(8, 7, 12, 0.56);
}

.chooser-result > p:not(.card-kicker, .chooser-human) {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.chooser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block: 2rem 1.4rem;
}

.chooser-human {
  margin: 0;
  color: var(--gold);
  font-size: 0.8rem;
}

.chooser-human a {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: 0.2rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.legal-contents {
  position: sticky;
  top: 6.8rem;
  max-height: calc(100vh - 8rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background:
    linear-gradient(145deg, rgba(131, 231, 193, 0.045), transparent 60%),
    rgba(8, 7, 12, 0.7);
  scrollbar-color: rgba(242, 206, 131, 0.5) transparent;
  scrollbar-width: thin;
}

.legal-contents > strong {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-contents > div {
  display: grid;
  gap: 0.5rem;
}

.legal-contents a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.42rem 0.5rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
  text-decoration: none;
}

.legal-contents a:hover,
.legal-contents a:focus-visible {
  border-left-color: var(--gold);
  color: var(--ink);
  background: rgba(242, 206, 131, 0.04);
}

.legal-copy {
  width: 100%;
  max-width: 50rem;
}

.legal-copy h2 {
  scroll-margin-top: 7rem;
  margin: 3rem 0 0.8rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
}

.legal-copy h2:first-child {
  margin-top: 0;
}

.legal-copy h3 {
  margin: 1.8rem 0 0.55rem;
}

.legal-copy p,
.legal-copy li {
  color: var(--muted);
}

.legal-copy a {
  color: var(--gold);
}

.legal-copy li + li {
  margin-top: 0.5rem;
}

.legal-topic-summary {
  max-width: 44rem;
  margin: 0 0 0.8rem;
  color: var(--ink-soft) !important;
  font-size: 1rem;
  line-height: 1.65;
}

.legal-topic {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(8, 7, 12, 0.28);
}

.legal-topic summary {
  position: relative;
  padding: 0.9rem 2.6rem 0.9rem 1rem;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.legal-topic summary::-webkit-details-marker {
  display: none;
}

.legal-topic summary::after {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  content: "+";
}

.legal-topic[open] summary {
  border-bottom: 1px solid var(--line);
}

.legal-topic[open] summary::after {
  content: "−";
}

.legal-topic-body {
  padding: 1rem;
}

.legal-topic-body > :first-child {
  margin-top: 0;
}

.legal-topic-body > :last-child {
  margin-bottom: 0;
}

.hive-planner {
  display: grid;
  grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(19, 35, 34, 0.72), rgba(15, 10, 21, 0.94));
  box-shadow: var(--shadow);
}

.hive-choice-stage,
.hive-stage-shell {
  min-width: 0;
}

.hive-choice-stage {
  align-self: start;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: rgba(8, 7, 12, 0.62);
}

.hive-choice-stage h3,
.hive-stage-start h3,
.hive-stage-card h3 {
  margin: 0.35rem 0 0;
  font: 500 clamp(1.55rem, 3vw, 2.35rem)/1 var(--display);
  letter-spacing: -0.035em;
}

.hive-choice-stage > p:last-of-type,
.hive-stage-start > p:last-child {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.hive-stage-number {
  margin: 0;
  color: var(--mint);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hive-controls {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  margin-top: 1rem;
}

.hive-cell {
  min-height: 3.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--control-line);
  border-radius: 0.7rem;
  color: var(--ink-soft);
  background: rgba(8, 7, 12, 0.54);
  font-size: 0.82rem;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.hive-cell:disabled {
  cursor: default;
  opacity: 0.72;
}

.hive-cell:hover,
.hive-cell:focus-visible,
.hive-cell[aria-checked="true"],
.hive-cell[data-hive-selected="true"] {
  border-color: var(--mint);
  color: var(--ink);
  background: rgba(131, 231, 193, 0.09);
}

.hive-stage-shell {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(131, 231, 193, 0.09), transparent 30%),
    rgba(8, 7, 12, 0.72);
}

.hive-step-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.hive-step-list li {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
  color: #8f8794;
  font-size: 0.875rem;
  font-weight: 760;
  text-align: center;
}

.hive-step-list span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}

.hive-step-list [data-hive-step-state="current"],
.hive-step-list [data-hive-step-state="complete"] {
  color: var(--ink-soft);
}

.hive-step-list [data-hive-step-state="current"] span {
  border-color: var(--mint);
  color: #06110d;
  background: var(--mint);
}

.hive-step-list [data-hive-step-state="complete"] span {
  border-color: rgba(131, 231, 193, 0.5);
  color: var(--mint);
  background: rgba(131, 231, 193, 0.08);
}

.hive-blueprint-status {
  margin: 0;
  padding-top: 1rem;
  color: var(--mint);
  font-size: 0.75rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hive-stage-navigation {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 0.55rem;
}

.hive-back-button {
  min-height: 2.75rem;
  padding-inline: 0.8rem;
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}

.hive-back-button:hover,
.hive-back-button:focus-visible {
  border-color: var(--line-bright);
  color: var(--mint);
  background: rgba(131, 231, 193, 0.06);
}

.hive-back-button[hidden] {
  display: none;
}

.hive-stage-start,
.hive-stage-card {
  min-height: 26rem;
  padding-top: clamp(2rem, 5vw, 4.5rem);
}

.hive-stage-start {
  display: grid;
  align-content: start;
}

.hive-stage-start[hidden],
.hive-stage-card[hidden] {
  display: none;
}

.hive-stage-start h3:focus-visible,
.hive-stage-card h3:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 0.35rem;
}

.hive-selected-label {
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem 0 0;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(131, 231, 193, 0.34);
  border-radius: 999px;
  color: var(--mint);
  background: rgba(131, 231, 193, 0.06);
  font-size: 0.78rem;
  font-weight: 800;
}

.hive-result {
  max-width: 48rem;
  margin: 0.55rem 0 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.55;
}

.hive-answer-label {
  margin-top: 1.25rem;
}

.hive-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.hive-answer-grid article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgba(18, 14, 24, 0.7);
}

.hive-answer-grid article > p:last-child {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.hive-limit-card {
  border-color: rgba(238, 138, 122, 0.3) !important;
  background: rgba(83, 30, 32, 0.16) !important;
}

.hive-pause-demo,
.hive-finish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: end;
  margin-top: 0.75rem;
  padding: 1.1rem;
  border: 1px solid rgba(229, 184, 83, 0.34);
  border-radius: 0.85rem;
  background: linear-gradient(120deg, rgba(229, 184, 83, 0.1), rgba(131, 231, 193, 0.05));
}

.hive-pause-demo h4,
.hive-finish h4 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.hive-pause-demo > div > p:not(.card-kicker, .hive-pause-status),
.hive-finish p {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.hive-blueprint-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.hive-pause-status {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.hive-stage-actions {
  display: flex;
  margin-top: 1.25rem;
  justify-content: flex-end;
}

.hive-review-list {
  display: grid;
  gap: 0;
  margin: 1.35rem 0 0;
}

.hive-review-list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.3fr) minmax(0, 1.7fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}

.hive-review-list dt {
  color: var(--mint);
  font-size: 0.76rem;
  font-weight: 800;
}

.hive-review-list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.hive-download-status {
  font-weight: 700;
}

.hive-planner[data-hive-paused="true"] [data-hive-stage="4"] {
  border-color: rgba(238, 138, 122, 0.48);
}

.hive-planner[data-hive-paused="true"] .hive-pause-button {
  border-color: rgba(238, 138, 122, 0.58);
  color: #fff0ec;
  background: rgba(154, 56, 55, 0.32);
}

.hive-noscript h3 {
  margin: 0;
  color: var(--ink);
}

.hive-noscript ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0.8rem 0;
  padding-left: 1.2rem;
}

.hive-noscript li {
  padding-left: 0.2rem;
}

.hive-noscript li strong,
.hive-noscript li span {
  display: block;
}

.hive-noscript li strong {
  color: var(--ink-soft);
}

.hive-noscript li span {
  margin-top: 0.2rem;
}

.boundary-note {
  margin-top: 1rem;
  padding: 1rem;
  border-left: 3px solid var(--mint);
  color: var(--muted);
  background: rgba(131, 231, 193, 0.06);
  font-size: 0.78rem;
}

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 6.5rem) 0 1.4rem;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% -12%, rgba(173, 133, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 92% 110%, rgba(242, 206, 131, 0.08), transparent 28rem),
    #07060a;
}

.site-footer::before {
  position: absolute;
  z-index: -1;
  right: -12rem;
  bottom: -20rem;
  width: 36rem;
  height: 36rem;
  border: 1px solid rgba(242, 206, 131, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(173, 133, 255, 0.018),
    0 0 0 8rem rgba(173, 133, 255, 0.012);
  content: "";
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(10rem, 0.52fr));
  gap: clamp(2.5rem, 7vw, 7rem);
}

.footer-intro strong {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 550;
  letter-spacing: -0.035em;
}

.footer-intro strong::before {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  border: 1px solid rgba(242, 206, 131, 0.62);
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 43%, var(--gold-hot) 44% 47%, transparent 48%) center / 0.64rem 0.64rem no-repeat,
    linear-gradient(-45deg, transparent 43%, var(--gold-hot) 44% 47%, transparent 48%) center / 0.64rem 0.64rem no-repeat,
    radial-gradient(circle, rgba(173, 133, 255, 0.28), transparent 65%);
  box-shadow: 0 0 1.4rem rgba(173, 133, 255, 0.2);
  content: "";
}

.footer-intro p {
  max-width: 32rem;
  margin: 1rem 0 0;
  color: #b9afbd;
  font-size: 0.88rem;
  line-height: 1.75;
}

.footer-links,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  font-style: normal;
}

.footer-links strong,
.footer-contact strong {
  margin-bottom: 0.55rem;
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-links a,
.footer-contact a {
  width: fit-content;
  max-width: 100%;
  color: #b9afbd;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: color 160ms ease, transform 180ms var(--ease-out);
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--gold);
  transform: translateX(0.18rem);
}

.footer-contact a {
  font-size: 1rem;
}

.footer-legal {
  display: flex;
  margin-top: clamp(3rem, 7vw, 5rem);
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: #9a91a0;
  font-size: 0.75rem;
  line-height: 1.65;
}

.footer-legal p {
  margin: 0;
}

.footer-legal p:first-child {
  max-width: 50rem;
}

.reveal {
  opacity: 1;
  transform: none;
}

.reveal-ready .reveal {
  opacity: 0;
  transition: opacity 520ms ease;
}

.reveal-ready .reveal[data-revealed="true"] {
  opacity: 1;
}

.js .hero .reveal,
.js .hero .reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .start-chooser.reveal,
.js .start-chooser.reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: none;
}

.not-found {
  display: grid;
  min-height: 80vh;
  place-items: center;
  padding-block: 5rem;
  text-align: center;
}

.not-found h1 {
  margin-bottom: 1rem;
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: 0.75;
}

.not-found p {
  max-width: 35rem;
  margin-inline: auto;
  color: var(--muted);
}

.abracadabra-hero .hero-grid {
  align-items: center;
}

.abracadabra-noscript {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(242, 206, 131, 0.28);
  border-left: 4px solid var(--gold);
  border-radius: 0.75rem;
  color: var(--muted);
  background: rgba(242, 206, 131, 0.08);
  line-height: 1.6;
}

.abracadabra-noscript strong {
  color: var(--ink);
}

.maker-proof {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
}

.showcase-browser {
  overflow: hidden;
  border: 1px solid rgba(242, 206, 131, 0.25);
  border-radius: 1.25rem;
  background: #f4eee5;
  box-shadow: 0 35px 90px -52px #000;
}

.showcase-browser-bar {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.36rem;
  padding: 0.55rem 0.75rem;
  color: #62576d;
  background: #eee6db;
  font-size: 0.75rem;
  font-weight: 760;
}

.showcase-browser-bar i {
  width: 0.52rem;
  height: 0.52rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b6a9bb;
}

.showcase-browser-bar i:first-child {
  background: #bc7191;
}

.showcase-browser-bar i:nth-child(2) {
  background: #c49b55;
}

.showcase-browser-bar i:nth-child(3) {
  background: #629686;
}

.showcase-browser-bar span {
  margin-left: auto;
}

.showcase-viewport {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1.55;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.8), transparent),
    #f4eee5;
}

.showcase-viewport::before,
.showcase-viewport::after {
  position: absolute;
  z-index: 2;
  transition: opacity 220ms ease, visibility 220ms ease;
  pointer-events: none;
}

.showcase-viewport::before {
  inset: 0;
  background:
    radial-gradient(circle at 78% 24%, rgba(188, 113, 145, 0.22), transparent 26%),
    linear-gradient(145deg, #f8f2e9, #e8ddd0);
  content: "";
}

.showcase-viewport::after {
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: 82%;
  padding-top: 1.8rem;
  color: #342b31;
  background:
    radial-gradient(circle, #b95c3d 0 0.22rem, transparent 0.24rem) top center / 1rem 1rem no-repeat;
  font: 560 clamp(1.1rem, 3vw, 2rem)/1 var(--display);
  letter-spacing: -0.035em;
  text-align: center;
  transform: translate(-50%, -50%);
  content: "Juniper & Clay";
}

[data-showcase-shell][data-rendered="true"] .showcase-viewport::before,
[data-showcase-shell][data-rendered="true"] .showcase-viewport::after {
  visibility: hidden;
  opacity: 0;
}

.showcase-viewport iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 190%;
  height: 190%;
  border: 0;
  transform: scale(0.5264);
  transform-origin: 0 0;
  pointer-events: none;
}

.maker-proof-featured {
  position: relative;
  z-index: 1;
  align-self: center;
}

.maker-proof-featured::before {
  position: absolute;
  z-index: -1;
  inset: 12% -7% -8% 20%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(73, 134, 225, 0.25), transparent 58%),
    radial-gradient(circle at 70% 30%, rgba(174, 112, 255, 0.28), transparent 45%);
  filter: blur(24px);
  content: "";
}

.maker-proof-featured .showcase-viewport {
  aspect-ratio: 1.5;
}

.maker-proof-featured .showcase-viewport iframe {
  width: 150%;
  height: 150%;
  transform: scale(0.6667);
}

.maker-proof figcaption {
  display: flex;
  order: 2;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.maker-proof figcaption strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.showcase-status {
  display: block;
  order: 3;
  margin-top: 0.3rem;
  color: var(--dim);
  font-size: 0.75rem;
}

[data-showcase-shell][data-ready="true"] .showcase-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.abracadabra-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abracadabra-step-grid li {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background:
    linear-gradient(140deg, rgba(122, 182, 255, 0.08), transparent 52%),
    rgba(21, 16, 29, 0.8);
}

.abracadabra-step-grid li > span {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 1px solid rgba(242, 206, 131, 0.35);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 820;
}

.abracadabra-step-grid h3 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.abracadabra-step-grid p {
  margin: 0.6rem 0 0;
  color: var(--muted);
}

.local-state-note {
  display: flex;
  margin-top: 1rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(131, 231, 193, 0.24);
  border-radius: 0.85rem;
  color: #ccecdf;
  background: rgba(63, 135, 108, 0.08);
  font-size: 0.84rem;
}

.local-state-note strong {
  flex: 0 0 auto;
  color: var(--ink);
}

.local-state-note > summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 780;
}

.path-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.path-card {
  display: flex;
  /* Sized by its content. A fixed minimum left a void in the middle of the
     shorter card, which read as an unfinished layout rather than breathing room. */
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 85% 5%, rgba(174, 112, 255, 0.12), transparent 15rem),
    var(--panel);
}

.path-card-product {
  color: #251b2d;
  border-color: rgba(92, 62, 26, 0.15);
  background:
    radial-gradient(circle at 85% 5%, rgba(122, 182, 255, 0.36), transparent 16rem),
    #f4ead7;
}

.path-card-product h2,
.path-card-product h3 {
  color: #251b2d;
}

.path-card-product .card-kicker {
  color: #633d1f;
}

.path-card h2,
.path-card h3 {
  max-width: 22ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.path-card p:not(.card-kicker) {
  max-width: 38rem;
  margin: 1rem 0 2rem;
  color: var(--muted);
}

.path-card-product p:not(.card-kicker) {
  color: #5d5262;
}

.path-card .button {
  margin-top: auto;
}

.abracadabra-close {
  background:
    radial-gradient(circle at 84% 15%, rgba(122, 182, 255, 0.2), transparent 19rem),
    radial-gradient(circle at 68% 100%, rgba(174, 112, 255, 0.18), transparent 20rem),
    var(--panel-strong);
}

.help-progress-panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(122, 182, 255, 0.24);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 8%, rgba(122, 182, 255, 0.17), transparent 17rem),
    linear-gradient(150deg, rgba(29, 20, 40, 0.96), rgba(12, 9, 17, 0.98));
  box-shadow: var(--shadow);
}

.help-progress-panel ol {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.help-progress-panel li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.75rem;
  align-items: center;
  padding: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
}

.help-progress-panel li > span {
  display: grid;
  grid-row: 1 / 3;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #111;
  background: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
}

.help-progress-panel strong {
  font-size: 0.88rem;
}

.help-progress-panel small {
  color: var(--muted);
  font-size: 0.76rem;
}

.help-preflight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.help-preflight .card {
  min-height: 21rem;
}

.help-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-flow > li {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
}

.help-flow > li:last-child {
  border-bottom: 1px solid var(--line);
}

.help-flow-heading > span {
  display: inline-grid;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 1.2rem;
  place-items: center;
  border: 1px solid rgba(242, 206, 131, 0.38);
  border-radius: 50%;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 840;
}

.help-flow-heading h2 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.3rem);
  line-height: 0.98;
}

.help-flow-body {
  align-self: end;
}

.help-flow-body p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
}

.help-flow-body p + p {
  margin-top: 1rem;
}

@keyframes slow-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.55rem);
  }
}

.hero-art {
  animation: slow-float 8s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("/assets/cursor-wand.svg") 4 4, auto;
  }

  a,
  button,
  summary {
    cursor: url("/assets/cursor-wand-active.svg") 4 4, pointer;
  }

  .about-proof-grid a:hover {
    border-color: rgba(242, 206, 131, 0.38);
    background-color: rgba(255, 255, 255, 0.045);
    transform: translateY(-0.25rem);
  }
}

@media (max-width: 68rem) {
  :root {
    --shell-gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .site-nav {
    gap: 0.9rem;
  }

  .hero-grid {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-block: clamp(4.5rem, 10vw, 7rem);
  }

  .hero-copy {
    max-width: 50rem;
  }

  .hero-art {
    width: min(100%, 42rem);
    margin-inline: auto;
  }

  .home-hero .hero-art {
    margin-right: auto;
  }

  .home-hero .hero-image {
    aspect-ratio: 1.3;
    border-radius: 5rem 1.2rem 5rem 1.2rem;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .legal-contents {
    position: static;
    max-height: none;
  }

  .legal-contents > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-item:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .proof-item:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .door-grid,
  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-tier-grid,
  .scope-component-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creative-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creative-specimen:last-child {
    grid-column: 1 / -1;
  }

  .process-mechanics-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-grid,
  .about-note-grid,
  .about-contact-panel {
    grid-template-columns: 1fr;
  }

  .about-portrait-alternative {
    width: min(100%, 48rem);
    margin-inline: auto;
  }

  .about-fact-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-fact-rail > div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .about-fact-rail > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .scope-tier-scale {
    grid-column: 1 / -1;
  }

  .door-card:last-child {
    grid-column: 1 / -1;
    min-height: 23rem;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .start-hero .start-layout {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .start-hero .hero-copy {
    max-width: 48rem;
  }

  .split.reverse > :first-child {
    order: initial;
  }

  .visual-panel,
  .visual-panel img {
    min-height: 24rem;
  }
}

@media (max-width: 60rem) {
  .hive-planner,
  .hive-answer-grid,
  .hive-pause-demo,
  .hive-finish {
    grid-template-columns: 1fr;
  }

  .hive-stage-start,
  .hive-stage-card {
    min-height: 0;
    padding-top: 2rem;
  }

  .hive-blueprint-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 78rem) {
  html {
    scroll-padding-top: 5.25rem;
  }

  .site-header {
    overflow: visible;
  }

  .creative-proof-grid {
    grid-template-columns: 1fr;
  }

  .creative-specimen:last-child {
    grid-column: auto;
  }

  .specimen-browser {
    min-height: 27rem;
  }

  .specimen-page {
    min-height: 25rem;
  }

  .header-inner {
    min-height: 4.6rem;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
  }

  .site-brand {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    font-size: 1.05rem !important;
  }

  .site-brand::before {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  /* The complete navigation remains visible when scripting is off. */
  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem 1rem;
    margin-left: 0;
    padding-bottom: 0.9rem;
    white-space: normal;
  }

  .site-nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .site-nav .nav-start {
    margin-left: 0;
  }

  .menu-ready .site-header:has(.menu-button) {
    background: #08070c;
    backdrop-filter: none;
  }

  #service-shelf {
    scroll-margin-top: 15rem;
  }

  .menu-ready .site-header:has(.menu-button) .header-inner {
    min-height: 4.6rem;
    flex-wrap: nowrap;
  }

  .menu-ready .site-header:has(.menu-button) .menu-button {
    position: relative;
    z-index: 3;
    display: inline-flex;
    min-width: 4.5rem;
    min-height: 2.8rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-left: auto;
    padding: 0.25rem 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu-button i,
  .menu-button i::before,
  .menu-button i::after {
    display: block;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
    content: "";
  }

  .menu-button i::before {
    transform: translateY(-0.43rem);
  }

  .menu-button i::after {
    transform: translateY(0.37rem);
  }

  .menu-button[aria-expanded="true"] i {
    background: transparent;
  }

  .menu-button[aria-expanded="true"] i::before {
    transform: rotate(45deg);
  }

  .menu-button[aria-expanded="true"] i::after {
    transform: rotate(-45deg) translateY(-1px);
  }

  .menu-ready .site-header:has(.menu-button) .site-nav {
    position: fixed;
    z-index: 2;
    inset: 4.6rem 0 0;
    display: none;
    width: 100%;
    height: calc(100vh - 4.6rem);
    height: calc(100dvh - 4.6rem);
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
    margin: 0;
    padding:
      1.1rem max(1rem, calc((100vw - 80rem) / 2))
      max(2rem, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    background:
      radial-gradient(circle at 92% 4%, rgba(173, 133, 255, 0.14), transparent 22rem),
      rgba(8, 7, 12, 0.995);
    overscroll-behavior: contain;
    white-space: normal;
  }

  .menu-ready .site-header:has(.menu-button) .site-nav[data-open=""],
  .menu-ready .site-header:has(.menu-button) .site-nav[data-open="true"],
  .menu-ready .site-header:has(.menu-button) .menu-button[aria-expanded="true"] + .site-nav {
    display: grid;
  }

  .menu-ready .site-header:has(.menu-button) .site-nav a {
    display: flex;
    min-height: 4rem;
    align-items: center;
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--line);
    color: #d4cbd7;
    font-family: var(--display);
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .menu-ready .site-header:has(.menu-button) .site-nav a::after {
    display: none;
  }

  .menu-ready .site-header:has(.menu-button) .site-nav a:hover,
  .menu-ready .site-header:has(.menu-button) .site-nav a:focus-visible,
  .menu-ready .site-header:has(.menu-button) .site-nav a[aria-current="page"] {
    color: var(--gold-hot);
  }

  .menu-ready .site-header:has(.menu-button) .site-nav .nav-start {
    min-height: 3.4rem;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(242, 206, 131, 0.5);
    color: #130a1c !important;
    background: linear-gradient(135deg, var(--gold-hot), #dfb75e);
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  html:has(.site-header .site-nav[data-open=""]),
  html:has(.site-header .site-nav[data-open="true"]) {
    overflow: hidden;
  }
}

@media (max-width: 48rem) {
  :root {
    --shell-gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 5.25rem);
    line-height: 0.96;
  }

  .section-head h2,
  .split h2,
  .quote-panel h2 {
    max-width: 18ch;
    font-size: clamp(2.15rem, 11vw, 3.5rem);
    line-height: 1;
  }

  .hero-art figcaption {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: none;
    margin-top: 0.65rem;
  }

  .home-hero .hero-image,
  .hero-image {
    aspect-ratio: 1;
    border-radius: 2.4rem 0.9rem 2.4rem 0.9rem;
  }

  .proof-strip,
  .door-grid,
  .card-grid,
  .card-grid.two,
  .card-grid.four,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .scope-pricing-note,
  .scope-tier-grid,
  .scope-component-grid {
    grid-template-columns: 1fr;
  }

  .creative-proof-intro,
  .process-phase-grid {
    grid-template-columns: 1fr;
  }

  .about-hero-copy h1 {
    font-size: clamp(3rem, 14vw, 5.4rem);
  }

  .about-portrait-alternative img {
    min-height: 24rem;
    border-radius: 3.5rem 0.9rem 3.5rem 0.9rem;
  }

  .about-proof-grid {
    grid-template-columns: 1fr;
  }

  .about-accountability li {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
  }

  .about-accountability li > div {
    display: grid;
    gap: 0.45rem;
  }

  .scope-tier-scale {
    grid-column: auto;
  }

  .scope-tier-scale dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-tier-scale dl > div + div {
    border-left: 0;
  }

  .scope-tier-scale dl > div:nth-child(even) {
    border-left: 1px solid var(--line);
  }

  .scope-tier-scale dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .process-phase-grid dl > div,
  .quote-anatomy dl > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .proof-item + .proof-item {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .door-card,
  .door-card:last-child {
    min-height: 23rem;
    grid-column: auto;
  }

  .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .step {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .step p {
    grid-column: 2;
  }

  .service-compare,
  .solution-list,
  .solution-section .solution-body {
    grid-template-columns: 1fr;
  }

  .anchor-nav {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .solution-section-featured {
    grid-column: auto;
  }

  .contact-panel {
    grid-template-columns: 1fr;
  }

  .start-chooser {
    min-height: 0;
  }

  .chooser-options :is(a, button) {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    align-items: start;
  }

  .chooser-options[data-start-options] {
    grid-template-columns: 1fr;
  }

  .chooser-result {
    min-height: 25rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-intro {
    grid-column: 1 / -1;
  }

  .footer-legal {
    flex-direction: column;
  }

  .footer-links a,
  .footer-contact a,
  .card a:not(.button),
  .anchor-nav a,
  .faq-anchor-nav a,
  .legal-contents a,
  .legal-copy a[href^="tel:"],
  .legal-copy a[href^="mailto:"],
  .contact-panel a[href^="tel:"],
  .contact-panel a[href^="mailto:"],
  .faq-list a,
  .start-noscript a,
  .start-direct-link a {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
  }

  .legal-contents a {
    width: 100%;
  }

  .legal-contents > div {
    grid-template-columns: 1fr;
  }

  .solution-section summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
  }
}

@media (max-width: 48rem) and (max-height: 40rem) {
  .abracadabra-hero .hero-grid {
    gap: 1.5rem;
    padding-block: 2rem;
  }

  .abracadabra-hero h1 {
    margin-bottom: 0.9rem;
    font-size: 3rem;
  }

  .abracadabra-hero .lede {
    font-size: 1rem;
    line-height: 1.45;
  }

  .abracadabra-hero .hero-actions {
    margin-top: 1rem;
  }
}

@media (max-width: 30rem) {
  .hive-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hive-step-list li {
    font-size: 1rem;
  }

  .hive-review-list > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .hive-noscript ul {
    grid-template-columns: 1fr;
  }

  .about-fact-rail {
    grid-template-columns: 1fr;
  }

  .about-fact-rail > div + div,
  .about-fact-rail > div:nth-child(4) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .hero-actions,
  .hero-actions .button {
    width: 100%;
  }

  .button {
    width: 100%;
  }

  .proof-strip {
    margin-top: -1.25rem;
  }

  .step {
    grid-template-columns: 1fr;
  }

  .step p {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-intro {
    grid-column: auto;
  }
}

@media (max-width: 56rem) {
  .showcase-grid,
  .abracadabra-step-grid,
  .path-pair,
  .help-preflight,
  .help-flow > li {
    grid-template-columns: 1fr;
  }

  .local-state-note,
  .maker-proof figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .path-card {
    min-height: 0;
  }

  .help-preflight .card {
    min-height: 0;
  }

  .help-flow > li {
    gap: 1.4rem;
  }
}

@media (max-width: 38rem) {
  .maker-proof-featured .showcase-viewport,
  .showcase-grid .showcase-viewport {
    aspect-ratio: 1.35;
  }

  .abracadabra-step-grid li {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-header,
  .site-nav,
  .site-footer,
  .proof-strip,
  .door-card,
  .card,
  .visual-panel,
  .quote-panel,
  .contact-panel > *,
  .hive-planner,
  .hive-cell,
  .hive-choice-stage,
  .hive-stage-shell,
  .hive-stage-card,
  .hive-pause-demo,
  .hive-finish,
  .button,
  .nav-start,
  .menu-button {
    border: 1px solid CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .site-brand::before,
  .footer-intro strong::before {
    border: 1px solid CanvasText;
    background: CanvasText;
    box-shadow: none;
  }

  .menu-button i,
  .menu-button i::before,
  .menu-button i::after {
    background: CanvasText;
  }

  .menu-button[aria-expanded="true"] i {
    background: transparent;
  }
}

/* ---------------------------------------------------------------------------
   Header call button.

   `.nav-call` shipped as `display: none` with no rule anywhere restoring it,
   so the phone number was unreachable from the header at every width. For a
   local trades business the tap-to-call target is the highest-value control on
   the page, so it now lives in `.header-inner` as a sibling of the nav — NOT
   inside it — because the nav collapses into a drawer below 56rem and anything
   inside it disappears behind the menu button.
   --------------------------------------------------------------------------- */

.nav-call {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(242, 206, 131, 0.34);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(242, 206, 131, 0.05);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.nav-call::before {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 0.85rem;
  background: var(--gold);
  content: "";
  /* Handset glyph, inlined so the header never waits on an icon font. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-call:hover,
.nav-call:focus-visible {
  border-color: var(--gold);
  background: rgba(242, 206, 131, 0.12);
}

/* Below the drawer breakpoint the call button sits between the wordmark and
   the menu button, and keeps its own auto margin so it is never pushed off. */
@media (max-width: 78rem) {
  .menu-ready .site-header:has(.menu-button) .site-brand {
    order: 1;
  }

  .menu-ready .site-header:has(.menu-button) .nav-call {
    order: 2;
    margin-left: auto;
  }

  .menu-ready .site-header:has(.menu-button) .menu-button {
    order: 3;
    margin-left: 0.85rem;
  }

  .menu-ready .site-header:has(.menu-button) .site-nav {
    order: 4;
  }
}

/* The narrowest phones keep the tap target but drop the digits to the icon,
   so the wordmark and the menu button never collide. */
@media (max-width: 26rem) {
  .nav-call {
    gap: 0;
    padding: 0.55rem 0.7rem;
  }

  .nav-call span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Domain search.

   The site described four ways to have an address and gave the visitor no way
   to look one up — every path ended in a phone number. This is the control
   that makes the page do something.
   --------------------------------------------------------------------------- */

.domain-search {
  margin: 1.8rem 0 0;
}

.domain-search-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.domain-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.domain-search-input {
  min-width: 0;
  flex: 1 1 14rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
  font: inherit;
  font-size: 1rem;
}

.domain-search-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
}

.domain-search-input:focus-visible {
  border-color: var(--gold);
  outline: 2px solid rgba(242, 206, 131, 0.35);
  outline-offset: 2px;
}

.domain-search-status {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.domain-results {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.domain-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  margin-bottom: 0.55rem;
  background: rgba(255, 255, 255, 0.02);
}

.domain-result strong {
  flex: 1 1 12rem;
  font-size: 1.02rem;
}

.domain-result span {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Available reads as an opportunity; taken reads as closed but not alarming. */
.domain-result-free {
  border-color: rgba(242, 206, 131, 0.45);
  background: rgba(242, 206, 131, 0.05);
}

.domain-result-free span {
  color: var(--gold);
  font-weight: 780;
}

.domain-result-taken {
  opacity: 0.62;
}

.domain-result .button {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Light path card, remaining contrast.

   The product card sits on cream, so anything inheriting the dark theme's
   light-on-dark colours disappears. The heading was the visible failure; these
   are the rest of the same bug.
   --------------------------------------------------------------------------- */

.path-card-product .pill-list li {
  border-color: rgba(92, 62, 26, 0.28);
  color: #4a3a52;
  background: rgba(255, 255, 255, 0.55);
}

.path-card-product .button {
  border-color: rgba(37, 27, 45, 0.45);
  /* pruned: milk-pill era dark ink; the ring button rules champagne now */
  background: rgba(255, 255, 255, 0.6);
}

.path-card-product .button:hover,
.path-card-product .button:focus-visible {
  border-color: #251b2d;
  background: #fff;
}

/* ---------------------------------------------------------------------------
   Fork card rhythm.

   The card is a flex column with its own gap, but the paragraph, pill list and
   action row each still carried the margins they use elsewhere on the site.
   Stacked together they compounded into ~100px voids inside the cards. Inside
   a path-card the flex gap is the rhythm; the legacy margins are zeroed.
   --------------------------------------------------------------------------- */

.path-card p:not(.card-kicker) {
  margin: 0;
}

.path-card .pill-list {
  margin: 0.25rem 0 0;
}

.path-card .hero-actions {
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Three-card rows.

   .choice-grid is two columns, so any grid holding exactly three cards wrapped
   2+1 and left a hole beside the third — the homepage's "Give me a ring" card
   sat alone next to empty space. Exactly-three grids now take three columns on
   wide screens; four-card grids keep their intentional 2x2.
   --------------------------------------------------------------------------- */

@media (min-width: 56.0625rem) {
  .choice-grid:has(> .card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   The storm as the site's backdrop.

   Owner's call: the wizard graphic becomes the background of the site itself,
   not a framed figure. Implemented as a fixed layer rather than
   background-attachment: fixed, which iOS Safari has never honoured.

   The scrim gradient is the whole trick: light enough at the top that the hero
   headline rides visible lightning, and dense enough below that body text
   still sits on near-#08070c. Adjust the three stops here and nowhere else.

   body's own background must go transparent for the layer to show — html
   carries var(--void) beneath it, so nothing flashes white while loading.
   .section-dark slabs also go translucent so they read as glass over the storm
   instead of opaque rectangles chopping it into strips.
   --------------------------------------------------------------------------- */

body.vnext-page {
  background: transparent;
}

/* ::after, NOT ::before — the stylesheet already uses body::before for its
   faint grid texture at opacity .14 with a radial mask. Sharing that pseudo
   made the storm inherit both, which rendered it as murk inside a fading
   circle. The storm lives one layer deeper; the grid stays as texture on top. */
body.vnext-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 7, 12, 0.18) 0%,
      rgba(8, 7, 12, 0.55) 55%,
      rgba(8, 7, 12, 0.78) 100%),
    url("/assets/site-sourcery-storm-atelier-v4.webp") center top / cover no-repeat,
    var(--void);
}

body.vnext-page .section-dark {
  background:
    radial-gradient(circle at 86% 30%, rgba(85, 54, 130, 0.13), transparent 28rem),
    rgba(10, 8, 14, 0.72);
}

/* The homepage hero rides the storm directly: single column, no framed art. */
.home-hero .hero-grid {
  min-height: clamp(38rem, 78vh, 54rem);
  grid-template-columns: minmax(0, 1fr);
}

.home-hero .hero-copy {
  max-width: 46rem;
}

.hero-tagline {
  margin: 1.1rem 0 0;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Owner design pass, homepage.

   1. The storm gets much brighter — the scrim was strangling it.
   2. Text centers: the owner is not a fan of everything ragging left.
   3. Both fork cards go light. Premade turns golden-cream with dark type;
      Custom keeps pearl-cream but stops being plain: gold frame, aurora wash,
      an ornament on the kicker. Custom should look bespoke, not beige.
   4. The Responder card is the deliberate odd one out — dark with a gold ring
      and a storm glow between two light neighbours. Flash by contrast.
   --------------------------------------------------------------------------- */

body.vnext-page::after {
  background:
    linear-gradient(180deg,
      rgba(8, 7, 12, 0.02) 0%,
      rgba(8, 7, 12, 0.26) 55%,
      rgba(8, 7, 12, 0.50) 100%),
    radial-gradient(circle at 72% 30%, rgba(255, 216, 150, 0.16), transparent 46rem),
    radial-gradient(circle at 45% 78%, rgba(214, 170, 255, 0.12), transparent 40rem),
    url("/assets/site-sourcery-storm-atelier-v4.webp") center top / cover no-repeat,
    var(--void);
  /* The artwork itself is dark; no amount of scrim removal lights the robe or
     the table. Brightness does. */
  filter: brightness(1.34) saturate(1.12);
}

/* Bright storm behind centered text needs a local shadow to keep the headline
   sovereign over the lightning. */
.home-hero .hero-copy {
  margin-inline: auto;
  text-align: center;
  text-shadow: 0 2px 28px rgba(8, 7, 12, 0.85), 0 0 60px rgba(8, 7, 12, 0.6);
}

.home-hero .hero-copy .eyebrow {
  justify-content: center;
}

.home-hero .hero h1,
.home-hero h1 {
  margin-inline: auto;
}

.home-hero .lede {
  margin-inline: auto;
}

/* ---- fork cards: light, centered ---- */

.path-card {
  align-items: center;
  text-align: center;
  color: #251b2d;
  border-color: rgba(146, 104, 40, 0.35);
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.55), transparent 24rem),
    linear-gradient(165deg, #faf0d9 0%, #f3ddab 100%);
}

.path-card h2,
.path-card h3 {
  color: #251b2d;
}

.path-card .card-kicker {
  color: #7a4b12;
}

.path-card p:not(.card-kicker) {
  color: #55465c;
}

.path-card .pill-list {
  justify-content: center;
}

.path-card .pill-list li {
  border-color: rgba(92, 62, 26, 0.3);
  color: #4a3a52;
  background: rgba(255, 255, 255, 0.55);
  font-weight: 760;
}

.path-card .hero-actions {
  justify-content: center;
}

/* Gold button on a golden card would vanish; the primary flips dark. */
.path-card .button-primary {
  border-color: #251b2d;
  color: #f6e7c6 !important;
  background: #251b2d;
}

.path-card .button-primary:hover,
.path-card .button-primary:focus-visible {
  background: #3a2b47;
  border-color: #3a2b47;
}

.path-card .button {
  border-color: rgba(37, 27, 45, 0.45);
  /* pruned: milk-pill era dark ink; no current button should inherit it */
  background: rgba(255, 255, 255, 0.55);
}

.path-card .button:hover,
.path-card .button:focus-visible {
  border-color: #251b2d;
  background: #fff;
}

/* Custom: pearl and arcane, framed in gold, faint aurora — bespoke, not beige. */
.path-card-product {
  position: relative;
  border: 1px solid rgba(176, 132, 52, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 0 4px rgba(176, 132, 52, 0.12),
    0 1.2rem 3rem rgba(88, 52, 140, 0.22);
  background:
    radial-gradient(circle at 82% 0%, rgba(122, 182, 255, 0.4), transparent 18rem),
    radial-gradient(circle at 8% 100%, rgba(206, 148, 255, 0.35), transparent 20rem),
    radial-gradient(circle at 50% 50%, rgba(255, 236, 200, 0.75), transparent 30rem),
    linear-gradient(160deg, #fbf4e4 0%, #efe2c4 100%);
}

.path-card-product .card-kicker::before {
  content: "✦ ";
  color: rgba(176, 132, 52, 0.9);
}

/* ---- third row: centered cards, and the flash treatment ---- */

.choice-grid .card {
  text-align: center;
}

.choice-grid .card .hero-actions {
  justify-content: center;
}

.card-flash {
  position: relative;
  border: 1px solid rgba(242, 206, 131, 0.65);
  box-shadow:
    0 0 0 4px rgba(242, 206, 131, 0.1),
    0 0 2.6rem rgba(174, 112, 255, 0.32),
    inset 0 0 3rem rgba(242, 206, 131, 0.06);
  background:
    radial-gradient(circle at 50% 0%, rgba(174, 112, 255, 0.22), transparent 18rem),
    radial-gradient(circle at 50% 120%, rgba(242, 206, 131, 0.14), transparent 16rem),
    rgba(13, 10, 19, 0.9);
}

.card-flash .card-kicker {
  color: var(--gold);
}

.card-flash-price {
  margin: 0.35rem 0 0;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 820;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
   Owner design pass, round two.
   --------------------------------------------------------------------------- */

/* The circle-and-X badge is not the brand and never was. If Site Sourcery ever
   gets a mark it will be a wizard hat; until that exists, the wordmark stands
   alone. content: none removes the pseudo everywhere, including forced-colors. */
.site-brand::before,
.footer-intro strong::before {
  content: none;
}

/* Footer links: no heading above them, so they carry the gold themselves. */
.footer-links a {
  color: var(--gold);
  font-weight: 780;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #ffe3a1;
}

/* Hero: the name spaced wide, the headline bigger and gold-cream. */
.home-hero .eyebrow {
  font-size: 1.02rem;
  letter-spacing: 0.4em;
}

.home-hero h1 {
  color: #f4d9a0;
  font-size: clamp(3.6rem, 8.6vw, 8.2rem);
}

/* Buttons stop being square. Pills across the site, and the primary gets a
   real gold gradient with light behind it instead of a flat swatch. */
.button {
  border-radius: 999px;
  padding: 0.78rem 1.5rem;
}

.button-primary {
  border-color: rgba(242, 206, 131, 0.55);
  background: linear-gradient(180deg, #f8e2ab 0%, #e8b654 100%);
  box-shadow: 0 0.35rem 1.4rem rgba(242, 206, 131, 0.22);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: linear-gradient(180deg, #fdeec4 0%, #f2c86e 100%);
  box-shadow: 0 0.45rem 1.8rem rgba(242, 206, 131, 0.32);
}

.nav-start {
  border-radius: 999px;
}

/* ---- Custom goes dark-luxe: an atelier invitation, not a second cream card.
        Deep aubergine, gold foil frame, faint drafting lines. ---- */
.path-card-product {
  color: #efe6f4;
  border: 1px solid rgba(214, 168, 84, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 160, 0.16),
    0 0 0 4px rgba(214, 168, 84, 0.1),
    0 1.4rem 3.4rem rgba(20, 10, 34, 0.6);
  background:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.05) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.05) 0 1px, transparent 1px 3.4rem),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.3), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.12), transparent 20rem),
    linear-gradient(165deg, #221533 0%, #160e22 100%);
}

.path-card-product h2,
.path-card-product h3 {
  color: #f2d9a4;
}

.path-card-product .card-kicker {
  color: var(--gold);
}

.path-card-product p:not(.card-kicker) {
  color: #cfc2da;
}

.path-card-product .pill-list li {
  border-color: rgba(242, 206, 131, 0.35);
  color: #e9dcc2;
  background: rgba(242, 206, 131, 0.07);
}

.path-card-product .button {
  border-color: rgba(242, 206, 131, 0.6);
  /* The !important dark ink that lived here died in the ring-button round:
     the owner ruled the custom button never wears dark letters. */
  background: linear-gradient(180deg, #f8e2ab 0%, #e8b654 100%);
}

.path-card-product .button:hover,
.path-card-product .button:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(180deg, #fdeec4 0%, #f2c86e 100%);
}

/* ---- The Responder: bigger voice, more magic. ---- */
.card-flash h3 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.card-flash p:not(.card-kicker) {
  font-size: 1.08rem;
}

.card-flash .card-kicker {
  font-size: 0.95rem;
  letter-spacing: 0.22em;
}

.card-flash-price {
  font-size: 1.15rem;
}

.card-flash::before,
.card-flash::after {
  position: absolute;
  color: rgba(242, 206, 131, 0.85);
  font-size: 1.1rem;
  content: "✦";
}

.card-flash::before {
  top: 0.9rem;
  left: 1.1rem;
}

.card-flash::after {
  right: 1.1rem;
  bottom: 0.9rem;
}

@keyframes flash-glow {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(242, 206, 131, 0.1),
      0 0 2.4rem rgba(174, 112, 255, 0.28),
      inset 0 0 3rem rgba(242, 206, 131, 0.06);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(242, 206, 131, 0.18),
      0 0 3.6rem rgba(174, 112, 255, 0.5),
      inset 0 0 3.4rem rgba(242, 206, 131, 0.1);
  }
}

.card-flash {
  animation: flash-glow 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .card-flash {
    animation: none;
  }
}

/* Final word on the premade card's primary: an earlier .path-card .button rule
   was outranking the primary at equal specificity by file order, leaving it a
   frosted pill identical to secondaries. Primaries are gold, everywhere. */
.path-card .button-primary {
  border-color: rgba(214, 168, 84, 0.8);
  color: #1d1128 !important;
  background: linear-gradient(180deg, #f8e2ab 0%, #e8b654 100%);
  box-shadow: 0 0.35rem 1.3rem rgba(160, 112, 30, 0.3);
}

.path-card .button-primary:hover,
.path-card .button-primary:focus-visible {
  border-color: #b8862e;
  background: linear-gradient(180deg, #fdeec4 0%, #f2c86e 100%);
}

/* ---------------------------------------------------------------------------
   Owner design pass, round three.
   --------------------------------------------------------------------------- */

/* Hero: gold a smidgen darker, headline bigger and ALL CAPS. */
.home-hero h1 {
  color: #e6ba6b;
  font-size: clamp(3.9rem, 9.4vw, 9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.home-hero .eyebrow,
.hero-tagline {
  color: #dcaa55;
}

/* ---- The fork cards go glass: sprucing plus the see-through he asked for.
        backdrop-filter lets the storm burn through both without costing the
        text its footing. ---- */

.path-card {
  border-color: rgba(214, 168, 84, 0.5);
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.4), transparent 24rem),
    linear-gradient(165deg, rgba(250, 240, 217, 0.82) 0%, rgba(243, 221, 171, 0.78) 100%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 1rem 2.6rem rgba(20, 10, 34, 0.35);
}

/* Premade's own sparkle: a gold beacon on the kicker. */
.path-card > .card-kicker::before {
  content: "✦ ";
  color: rgba(176, 132, 52, 0.85);
}

/* Custom, pumped: translucent aubergine glass, foil ring, corner stars, and a
   slow aurora drifting through the drafting grid. Real magic, still readable. */
.path-card-product {
  background:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.34), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.16), transparent 20rem),
    linear-gradient(165deg, rgba(34, 21, 51, 0.78) 0%, rgba(22, 14, 34, 0.82) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.path-card-product::before,
.path-card-product::after {
  position: absolute;
  color: rgba(242, 206, 131, 0.9);
  font-size: 1.15rem;
  text-shadow: 0 0 1rem rgba(242, 206, 131, 0.6);
  content: "✦";
}

.path-card-product::before {
  top: 1rem;
  left: 1.2rem;
}

.path-card-product::after {
  right: 1.2rem;
  bottom: 1rem;
}

@keyframes atelier-aurora {
  0%, 100% { box-shadow:
    inset 0 0 0 1px rgba(255, 226, 160, 0.16),
    0 0 0 4px rgba(214, 168, 84, 0.1),
    0 0 2.6rem rgba(174, 112, 255, 0.25),
    0 1.4rem 3.4rem rgba(20, 10, 34, 0.55); }
  50% { box-shadow:
    inset 0 0 0 1px rgba(255, 226, 160, 0.28),
    0 0 0 4px rgba(214, 168, 84, 0.18),
    0 0 3.8rem rgba(174, 112, 255, 0.45),
    0 1.4rem 3.4rem rgba(20, 10, 34, 0.55); }
}

.path-card-product {
  animation: atelier-aurora 6s ease-in-out infinite;
}

/* ---- The Responder: the hook gets the headline size. ---- */
.card-flash .card-kicker {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: 0.12em;
}

.card-flash .pill-list {
  justify-content: center;
}

.card-flash .pill-list li {
  border-color: rgba(242, 206, 131, 0.4);
  color: #efdfba;
  background: rgba(242, 206, 131, 0.08);
}

/* ---- Footer, rebuilt: one centred stack instead of plug-and-play columns. */
.footer-stack {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.2rem;
  text-align: center;
}

.footer-brand {
  color: var(--gold);
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

.footer-tag {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.85rem;
}

.footer-row a {
  color: var(--gold);
  font-weight: 780;
  font-size: 0.92rem;
  text-decoration: none;
}

.footer-row a:hover,
.footer-row a:focus-visible {
  color: #ffe3a1;
}

.footer-row span {
  color: rgba(242, 206, 131, 0.4);
}

.footer-copyright {
  margin: 0.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(242, 206, 131, 0.14);
  color: var(--ink-soft);
  font-size: 0.82rem;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .path-card-product {
    animation: none;
  }
}

/* Caps at 9rem set four stacked lines that swallowed the wizard and collided
   with the eyebrow. Still huge, still caps — but two lines, with air above. */
.home-hero h1 {
  max-width: none;
  font-size: clamp(3.2rem, 6.9vw, 6.4rem);
  line-height: 0.96;
}

.home-hero .eyebrow {
  margin-bottom: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Owner design pass, round four.
   --------------------------------------------------------------------------- */

/* Gold-on-storm lost to the background; the white always read. White caps it
   is — and the headline leaves the 46rem column so "big" stops meaning "more
   wrapped lines". Two lines, huge, balanced. */
.home-hero .hero-copy {
  max-width: none;
}

.home-hero h1 {
  color: var(--ink);
  font-size: clamp(3.4rem, 8vw, 8.4rem);
  text-wrap: balance;
  text-shadow:
    0 3px 30px rgba(8, 7, 12, 0.92),
    0 0 90px rgba(8, 7, 12, 0.7);
}

.home-hero .lede {
  font-size: 1.18rem;
}

/* Header gilded to match the footer: gold wordmark, gold-tinted nav, gold
   hairline underneath. */
.site-header {
  border-bottom: 1px solid rgba(242, 206, 131, 0.16);
}

.site-brand {
  color: var(--gold) !important;
}

.site-nav a {
  color: #cdb98f;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: #ffe3a1;
}

/* ---- Premade: a frame you can see. Double ring, corner stars, lift. ---- */
.path-card {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(214, 168, 84, 0.7),
    0 0 0 5px rgba(214, 168, 84, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 1rem 2.6rem rgba(20, 10, 34, 0.4);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.path-card:hover {
  transform: translateY(-0.3rem);
  box-shadow:
    0 0 0 1px rgba(214, 168, 84, 0.9),
    0 0 0 5px rgba(214, 168, 84, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 1.6rem 3.2rem rgba(20, 10, 34, 0.5);
}

.path-card:not(.path-card-product)::before,
.path-card:not(.path-card-product)::after {
  position: absolute;
  color: rgba(160, 116, 34, 0.8);
  font-size: 1.05rem;
  content: "✦";
}

.path-card:not(.path-card-product)::before {
  top: 1rem;
  left: 1.2rem;
}

.path-card:not(.path-card-product)::after {
  right: 1.2rem;
  bottom: 1rem;
}

/* ---- Custom: a slowly turning gold-and-violet ring around the card. The
        conic gradient paints the border box; the card's own layers sit on the
        padding box above it. Unmissable, and still calm. ---- */
@property --atelier-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes atelier-ring {
  to { --atelier-angle: 360deg; }
}

.path-card-product {
  border: 1.5px solid transparent;
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.34), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.16), transparent 20rem),
    linear-gradient(165deg, rgba(34, 21, 51, 0.86) 0%, rgba(22, 14, 34, 0.9) 100%),
    conic-gradient(from var(--atelier-angle),
      #e8c987 0deg, #7a4fc0 90deg, #e8c987 180deg, #7a4fc0 270deg, #e8c987 360deg);
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  animation: atelier-ring 9s linear infinite, atelier-aurora 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .path-card,
  .path-card:hover {
    transform: none;
  }
  .path-card-product {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Owner design pass, round five.
   --------------------------------------------------------------------------- */

/* Header wordmark: caps, spaced. */
.site-brand {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Hero eyebrow: darker gold, bigger, wider. */
.home-hero .eyebrow {
  color: #c08a2a;
  font-size: 1.3rem;
  letter-spacing: 0.52em;
}

/* The tagline's call is a real control now. */
.hero-tagline {
  font-size: 1rem;
  letter-spacing: 0.14em;
}

.hero-tagline a {
  color: inherit;
  padding-bottom: 2px;
  border-bottom: 2px solid rgba(242, 206, 131, 0.55);
  text-decoration: none;
}

.hero-tagline a:hover,
.hero-tagline a:focus-visible {
  color: #ffe3a1;
  border-bottom-color: #ffe3a1;
}

/* READABILITY WITHOUT DARKENING: a frosted halo behind the hero copy. The
   problem over lightning is contrast NOISE, not brightness — so the halo blurs
   the storm's detail into soft colour right behind the words and nowhere else.
   The storm keeps every lumen; the letters get a calm room to stand in. */
.home-hero .hero-copy::before {
  content: "";
  position: absolute;
  inset: -2.5rem -3.5rem;
  z-index: -1;
  border-radius: 4rem;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 9, 18, 0.10), transparent 74%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 78%);
}

/* ---- Cards: genuinely see-through, with light that MOVES. ---- */

/* Premade: glass at half strength, and a shimmer band that sweeps across
   every few seconds — light passing over glass. */
@keyframes glass-sweep {
  0%       { background-position: -170% 0, 0 0, 0 0; }
  45%, 100% { background-position: 170% 0, 0 0, 0 0; }
}

.path-card:not(.path-card-product) {
  color: #2a2133;
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.34) 50%, transparent 58%),
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.3), transparent 24rem),
    linear-gradient(165deg, rgba(250, 240, 217, 0.55) 0%, rgba(243, 221, 171, 0.48) 100%);
  background-size: 260% 100%, auto, auto;
  background-repeat: no-repeat;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  animation: glass-sweep 6s ease-in-out infinite;
}

.path-card:not(.path-card-product) h2,
.path-card:not(.path-card-product) h3 {
  color: #201828;
}

.path-card:not(.path-card-product) p:not(.card-kicker) {
  color: #3f3347;
}

/* Custom: deeper transparency so the storm genuinely burns through the
   aubergine, a hotter ring, and star corners that twinkle. */
.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.06) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.06) 0 1px, transparent 1px 3.4rem),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.3), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.14), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.55) 0%, rgba(20, 12, 32, 0.62) 100%),
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.55; text-shadow: 0 0 0.5rem rgba(242, 206, 131, 0.4); }
  50%      { opacity: 1;    text-shadow: 0 0 1.4rem rgba(242, 206, 131, 0.9); }
}

.path-card::before,
.path-card::after,
.card-flash::before,
.card-flash::after {
  animation: star-twinkle 2.8s ease-in-out infinite;
}

.path-card::after,
.card-flash::after {
  animation-delay: 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .path-card:not(.path-card-product),
  .path-card::before,
  .path-card::after,
  .card-flash::before,
  .card-flash::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Owner design pass, round six.
   --------------------------------------------------------------------------- */

/* Pills speak in caps. Component-wide, so the voice is one voice. */
.pill-list li {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
}

/* The headline goes from plain white to engraved metal: a silver-cream-gold
   gradient poured into the letters, a sheen that sweeps through them every few
   seconds, and an arcane violet aura underneath. Shadow moves from text-shadow
   to drop-shadow because a text-shadow bleeds through gradient-clipped glyphs
   and muddies them. */
@keyframes headline-sheen {
  0%, 55%   { background-position: -220% 0, 0 0; }
  90%, 100% { background-position: 220% 0, 0 0; }
}

.home-hero h1 {
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f7ecd2 42%, #d8bf8c 54%, #fff6e6 72%, #efe2c4 100%);
  background-size: 240% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 3px 16px rgba(8, 7, 12, 0.9))
    drop-shadow(0 0 44px rgba(130, 84, 210, 0.4));
  animation: headline-sheen 7s ease-in-out infinite;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-hero h1 {
    background: none;
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero h1 {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Owner design pass, round seven.
   --------------------------------------------------------------------------- */

/* Masthead: the wordmark stretches toward the halfway mark. */
.site-brand {
  font-size: clamp(2rem, 4.4vw, 4.1rem) !important;
  letter-spacing: 0.12em;
  line-height: 1;
}

.header-inner {
  min-height: 6.4rem;
}

.nav-call {
  font-size: 0.95rem;
  padding: 0.7rem 1.15rem;
}

/* The word MENU goes; the bars speak for themselves. Text stays for readers. */
.menu-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Metal, take two: the vertical pour gave line one the silver and line two the
   gold, which read as "didn't take". Angled pour crosses every line, and the
   lede gets the same metal so the whole block is one material. */
.home-hero h1 {
  background-image:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    linear-gradient(100deg, #ffffff 0%, #f3e6c8 30%, #d9bd85 50%, #fff3dd 70%, #e6cf9f 100%);
}

.home-hero .lede {
  background-image:
    linear-gradient(100deg, #ffffff 0%, #f0e2c4 35%, #dcc28c 55%, #fff3dd 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(8, 7, 12, 0.9));
  font-weight: 640;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-hero .lede {
    background: none;
    color: var(--ink);
  }
}

/* Halo: tighter to the letters, softer hand. */
.home-hero .hero-copy::before {
  inset: -1.1rem -1.4rem;
  border-radius: 3rem;
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  background: radial-gradient(ellipse at 50% 50%, rgba(12, 9, 18, 0.06), transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 66%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 66%);
}

/* ---- Cards, escalation: thinner glass, and stardust rising inside. ---- */

@keyframes premade-life {
  0% { background-position: -170% 0, 24px 300px, 130px 340px, 0 0, 0 0; }
  45% { background-position: 170% 0, 12px 150px, 90px 170px, 0 0, 0 0; }
  100% { background-position: 170% 0, 0 0, 50px 0, 0 0, 0 0; }
}

.path-card:not(.path-card-product) {
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%),
    radial-gradient(2px 2px at 30px 40px, rgba(255, 244, 214, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 90px 100px, rgba(255, 226, 160, 0.9), transparent 3px),
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.26), transparent 24rem),
    linear-gradient(165deg, rgba(250, 240, 217, 0.36) 0%, rgba(243, 221, 171, 0.30) 100%);
  background-size: 260% 100%, 160px 320px, 200px 360px, auto, auto;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat;
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  animation: premade-life 8s linear infinite;
}

.path-card:not(.path-card-product) h2,
.path-card:not(.path-card-product) h3 {
  color: #1d1626;
}

.path-card:not(.path-card-product) p:not(.card-kicker) {
  color: #382e40;
  font-weight: 560;
}

@keyframes atelier-dust {
  0% { background-position: 0 0, 0 0, 40px 320px, 140px 360px, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 20px 0, 100px 0, 0 0, 0 0, 0 0, 0 0; }
}

.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.07) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.07) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.28), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.12), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.40) 0%, rgba(20, 12, 32, 0.48) 100%),
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  background-size: auto, auto, 180px 320px, 220px 360px, auto, auto, auto, auto;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  border-width: 2px;
  backdrop-filter: blur(26px) saturate(1.35);
  -webkit-backdrop-filter: blur(26px) saturate(1.35);
  animation:
    atelier-ring 9s linear infinite,
    atelier-aurora 6s ease-in-out infinite,
    atelier-dust 10s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .path-card:not(.path-card-product),
  .path-card-product {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Owner design pass, round eight.
   --------------------------------------------------------------------------- */

/* Masthead spaced wider and dipped in the same metal as the headline. */
.site-brand {
  letter-spacing: 0.2em;
  background-image: linear-gradient(100deg, #fff3dd 0%, #e8c987 45%, #fff6e6 65%, #d9bd85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 1px 6px rgba(8, 7, 12, 0.6));
}

.site-header {
  box-shadow: 0 1px 0 rgba(242, 206, 131, 0.22), 0 0.6rem 2rem rgba(8, 7, 12, 0.45);
}

/* Footer joins the same language: metal caps brand, a star over the stack,
   a violet breath behind it. */
.footer-stack {
  position: relative;
}

.footer-stack::before {
  content: "✦";
  color: rgba(242, 206, 131, 0.8);
  font-size: 1.1rem;
  text-shadow: 0 0 1rem rgba(242, 206, 131, 0.5);
}

.footer-brand {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  background-image: linear-gradient(100deg, #fff3dd 0%, #e8c987 45%, #fff6e6 65%, #d9bd85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 76, 190, 0.14), transparent 60%),
    transparent;
  border-top: 1px solid rgba(242, 206, 131, 0.18);
}

/* ---- Hero frost, element by element. The single block halo either sprawled
        or missed the edges; now every line carries its own tight pill of
        frost — blur only, no darkening, sized to its words. ---- */

.home-hero .hero-copy::before {
  content: none;
}

.home-hero .eyebrow,
.home-hero h1,
.home-hero .lede,
.hero-tagline {
  width: fit-content;
  margin-inline: auto;
  border-radius: 999px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

.home-hero .eyebrow {
  padding: 0.35rem 1.4rem;
}

.home-hero h1 {
  padding: 0.6rem 2.2rem;
  border-radius: 3rem;
}

.home-hero .lede {
  padding: 0.45rem 1.6rem;
}

.hero-tagline {
  padding: 0.4rem 1.4rem;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-brand {
    background: none;
    color: var(--gold) !important;
  }
  .footer-brand {
    background: none;
    color: var(--gold);
  }
}

/* ---------------------------------------------------------------------------
   Round eight, corrections — and the card transparency order.
   --------------------------------------------------------------------------- */

/* The frost pills rendered with hard edges — the headline's panel cut a seam
   straight across the wizard. Frost fades; it does not stop. Each pill's blur
   now feathers to nothing at its rim. */
.home-hero .eyebrow,
.home-hero h1,
.home-hero .lede,
.hero-tagline {
  mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent 98%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent 98%);
  padding-inline: 3rem;
}

.home-hero h1 {
  padding-inline: 4rem;
}

/* Stardust leaves the premade card — it stays Custom's trick — and BOTH cards
   thin out to where the wizard genuinely shows through. Dark text gains a
   faint light breath underneath so it keeps its footing on nearly-nothing. */
@keyframes premade-sweep-only {
  0%        { background-position: -170% 0, 0 0, 0 0; }
  45%, 100% { background-position: 170% 0, 0 0, 0 0; }
}

.path-card:not(.path-card-product) {
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%),
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.2), transparent 24rem),
    linear-gradient(165deg, rgba(250, 240, 217, 0.20) 0%, rgba(243, 221, 171, 0.16) 100%);
  background-size: 260% 100%, auto, auto;
  background-repeat: no-repeat;
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
  animation: premade-sweep-only 8s linear infinite;
}

.path-card:not(.path-card-product) h2,
.path-card:not(.path-card-product) h3,
.path-card:not(.path-card-product) p:not(.card-kicker) {
  text-shadow: 0 1px 14px rgba(255, 248, 235, 0.45);
}

.path-card:not(.path-card-product) h2,
.path-card:not(.path-card-product) h3 {
  color: #140f1c;
}

.path-card:not(.path-card-product) p:not(.card-kicker) {
  color: #241c2e;
  font-weight: 600;
}

.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.07) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.07) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.1), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.26) 0%, rgba(20, 12, 32, 0.32) 100%),
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
}

.path-card-product h2,
.path-card-product h3,
.path-card-product p:not(.card-kicker) {
  text-shadow: 0 2px 14px rgba(8, 7, 12, 0.75);
}

/* CORRECTION: masking the element masked the GLYPHS — the headline's edges
   were fading out with the frost. The frost moves to its own layer beneath
   each line: a pseudo-element carries the blur and the feathered mask; the
   words themselves stay untouched and fully opaque. */
.home-hero .eyebrow,
.home-hero h1,
.home-hero .lede,
.hero-tagline {
  position: relative;
  mask-image: none;
  -webkit-mask-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-hero h1::before,
.home-hero .lede::before,
.hero-tagline::before,
.home-hero .eyebrow::after {
  content: "";
  position: absolute;
  inset: -0.5rem -1.8rem;
  z-index: -1;
  border-radius: 999px;
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  mask-image: radial-gradient(ellipse closest-side, #000 52%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 52%, transparent 100%);
}

.home-hero h1::before {
  inset: -1rem -2.6rem;
  border-radius: 3rem;
}

/* The eyebrow's ::before is its dash; frost rides ::after instead. */

/* On near-clear glass the premade kicker's dark bronze vanished into the storm
   behind it. Kickers on glass are gold with a grounding shadow, both cards. */
.path-card .card-kicker {
  color: #f0cd82;
  text-shadow: 0 1px 10px rgba(8, 7, 12, 0.8);
}

/* ---------------------------------------------------------------------------
   Owner design pass, round ten.
   --------------------------------------------------------------------------- */

/* Nav speaks the fork's language, in caps like everything else that matters. */
.site-nav a {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}

/* Eyebrow and tagline abandon gold-on-storm — champagne reads everywhere. */
.home-hero .eyebrow,
.hero-tagline {
  color: #f5e7cb;
  text-shadow: 0 2px 12px rgba(8, 7, 12, 0.9);
}

.hero-tagline a {
  border-bottom-color: rgba(242, 206, 131, 0.75);
}

/* Champagne turned up: richer golds, brighter whites, a hotter sheen. */
.home-hero h1 {
  background-image:
    linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 1) 50%, transparent 60%),
    linear-gradient(100deg, #fffdf6 0%, #f6e8c6 26%, #d3ae62 48%, #fff7e2 66%, #e2c48b 88%, #fffdf6 100%);
}

.home-hero .lede {
  background-image:
    linear-gradient(100deg, #fffdf6 0%, #f2e2ba 40%, #d8b56a 60%, #fff5df 85%);
}

/* Assessment card: refined glass — clearly kin to the fork cards, clearly
   quieter than the Responder beside it. */
.choice-grid .card:not(.card-flash) {
  border: 1px solid rgba(214, 168, 84, 0.4);
  background:
    radial-gradient(circle at 50% -30%, rgba(174, 112, 255, 0.14), transparent 20rem),
    rgba(16, 12, 24, 0.38);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 160, 0.08),
    0 0.8rem 2.2rem rgba(8, 7, 12, 0.45);
}

/* Custom, again, harder: a dashed drafting rule inside the frame, and the
   violet nebula now DRIFTS through the glass while the dust rises. */
.path-card-product {
  outline: 1px dashed rgba(242, 206, 131, 0.42);
  outline-offset: -0.85rem;
  background-size: auto, auto, 180px 320px, 220px 360px, 170% 170%, auto, auto, auto;
}

@keyframes atelier-living {
  0%   { background-position: 0 0, 0 0, 40px 320px, 140px 360px, -10% -10%, 0 0, 0 0, 0 0; }
  50%  { background-position: 0 0, 0 0, 30px 160px, 120px 180px, 18% 22%, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 20px 0, 100px 0, -10% -10%, 0 0, 0 0, 0 0; }
}

.path-card-product {
  animation:
    atelier-ring 9s linear infinite,
    atelier-aurora 6s ease-in-out infinite,
    atelier-living 14s ease-in-out infinite;
}

/* Footer: same bones, richer skin. Twinkling star, drifting motes, a gold
   fade-line over the copyright, links that grow their underline. */
.site-footer {
  background:
    radial-gradient(1.8px 1.8px at 12% 30%, rgba(255, 236, 190, 0.7), transparent 3px),
    radial-gradient(1.4px 1.4px at 78% 55%, rgba(214, 170, 255, 0.6), transparent 3px),
    radial-gradient(1.6px 1.6px at 42% 75%, rgba(255, 226, 160, 0.5), transparent 3px),
    radial-gradient(ellipse at 50% 0%, rgba(120, 76, 190, 0.2), transparent 62%),
    transparent;
}

.footer-stack::before {
  animation: star-twinkle 3.2s ease-in-out infinite;
}

.footer-brand {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}

.footer-row a {
  position: relative;
  padding-bottom: 3px;
}

.footer-row a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 200ms ease;
}

.footer-row a:hover::after,
.footer-row a:focus-visible::after {
  transform: scaleX(1);
}

.footer-copyright {
  border-top: 0;
  background: linear-gradient(90deg, transparent, rgba(242, 206, 131, 0.55), transparent) top / 46% 1px no-repeat;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .footer-stack::before,
  .path-card-product {
    animation: none;
  }
}

/* With the drawer owning everything below 78rem, the inline row only has to
   fit above 1248px — but the masthead still must not eat the nav there. */
.site-brand {
  font-size: clamp(1.7rem, 3.6vw, 4.1rem) !important;
}

/* In drawer mode the header is just brand + pill + bars; let the brand breathe
   but keep the row on one line. */
@media (max-width: 78rem) {
  .site-brand {
    font-size: clamp(1.5rem, 3.4vw, 2.4rem) !important;
  }

  .header-inner {
    min-height: 5rem;
  }
}

/* ---------------------------------------------------------------------------
   The Responder demo: the product, happening, inside its own card.

   A missed call arrives, the text goes out, the customer replies — on loop.
   No decoration says "this answers your phone" better than watching it answer
   the phone. Bubbles share one 14s clock so the scene stays in sync forever.
   --------------------------------------------------------------------------- */

.card-flash {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.6rem;
  align-items: center;
  text-align: center;
}

.card-flash-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.responder-demo {
  display: grid;
  justify-items: center;
}

.rd-phone {
  position: relative;
  width: min(15rem, 100%);
  padding: 0.55rem;
  border: 1px solid rgba(242, 206, 131, 0.55);
  border-radius: 2.4rem;
  background: linear-gradient(165deg, #171222 0%, #0d0a15 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 2.2rem rgba(174, 112, 255, 0.3),
    0 1rem 2.4rem rgba(8, 7, 12, 0.6);
}

.rd-notch {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  width: 5.5rem;
  height: 0.85rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #08070c;
}

.rd-screen {
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 2.4rem 0.8rem 1rem;
  border-radius: 1.9rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(122, 79, 192, 0.16), transparent 12rem),
    #0b0912;
}

.rd-missed {
  align-self: center;
  padding: 0.3rem 0.85rem;
  border: 1px solid rgba(255, 120, 120, 0.35);
  border-radius: 999px;
  color: #ff9d9d;
  background: rgba(255, 100, 100, 0.08);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.rd-bubble {
  max-width: 88%;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
}

.rd-out {
  align-self: flex-end;
  border-bottom-right-radius: 0.3rem;
  color: #1d1128;
  background: linear-gradient(180deg, #f8e2ab 0%, #e8b654 100%);
  font-weight: 640;
}

.rd-in {
  align-self: flex-start;
  border-bottom-left-radius: 0.3rem;
  color: #e7dff0;
  background: rgba(122, 100, 160, 0.32);
}

.rd-caption {
  margin-top: auto;
  align-self: center;
  color: rgba(242, 206, 131, 0.75);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* One shared clock: call at 2%, text out at 20%, reply at 52%, all fade at 94%. */
@keyframes rd-pop {
  0%, 100% { opacity: 0; transform: translateY(10px) scale(0.96); }
}

.rd-missed,
.rd-out,
.rd-in {
  opacity: 0;
  animation: rd-cycle 14s ease-in-out infinite;
}

@keyframes rd-cycle {
  0%   { opacity: 0; transform: translateY(10px) scale(0.96); }
  4%   { opacity: 1; transform: none; }
  92%  { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-4px); }
}

.rd-out { animation-delay: 2.5s; }
.rd-in  { animation-delay: 7s; }

/* Delayed items must stay hidden before their clock starts. */
.rd-out,
.rd-in {
  animation-fill-mode: both;
}

@media (max-width: 78rem) {
  .card-flash {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rd-missed,
  .rd-out,
  .rd-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   OWNER NOTE, verbatim: "I cannot see through the premade five dollar box and
   the custom from four hundred dollar box... I would like to see the wizard
   working on the table in the background... The premade box doesn't need to
   be as see through as the custom built for you box."

   Diagnosis: alpha was never the blocker — blur(30px) was. A backdrop blur
   that heavy liquefies the storm into plain color, so no amount of tint-
   thinning ever let the wizard READ. Shapes survive blur at ~6-10px, so:
   custom drops to 6px (clearest — the wizard stands on this side), premade to
   10px (frostier on purpose: it carries dark ink, which needs a milk layer).
   Same layer stacks, same order, same sizes — atelier-living's 8 background
   positions still line up.
   --------------------------------------------------------------------------- */

.path-card:not(.path-card-product) {
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%),
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.14), transparent 24rem),
    linear-gradient(165deg, rgba(250, 240, 217, 0.18) 0%, rgba(243, 221, 171, 0.14) 100%);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

/* Thinner milk under dark ink means the halo does the legibility work now. */
.path-card:not(.path-card-product) h2,
.path-card:not(.path-card-product) h3,
.path-card:not(.path-card-product) p:not(.card-kicker) {
  text-shadow:
    0 1px 4px rgba(255, 248, 235, 0.85),
    0 0 18px rgba(255, 244, 220, 0.6);
}

.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.07), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.15) 0%, rgba(20, 12, 32, 0.19) 100%),
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
}

.path-card-product h2,
.path-card-product h3,
.path-card-product p:not(.card-kicker) {
  text-shadow:
    0 1px 5px rgba(8, 7, 12, 0.9),
    0 2px 18px rgba(8, 7, 12, 0.7);
}

/* The demo phone was stretching to the card's full height, leaving a huge
   empty screen. Center it; the screen keeps its natural 21rem. */
.responder-demo {
  align-items: center;
}

/* The atelier wheel was painted at full alpha and buried under thick tint;
   with the veil thinned it blasted gold over the wizard. Alpha it down so it
   tints the storm instead of replacing it. */
.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.07), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.15) 0%, rgba(20, 12, 32, 0.19) 100%),
    conic-gradient(from var(--atelier-angle),
      rgba(255, 233, 189, 0.20) 0deg, rgba(122, 79, 192, 0.16) 80deg,
      rgba(232, 201, 135, 0.18) 160deg, rgba(138, 95, 208, 0.16) 240deg,
      rgba(255, 233, 189, 0.20) 360deg);
}

/* The flash card's light-ink rule outranks the bubbles; restate with the card
   in the selector so the SMS keeps its own ink. */
.card-flash .rd-bubble.rd-out {
  color: #221430;
  text-shadow: none;
}

.card-flash .rd-bubble.rd-in {
  color: #e7dff0;
  text-shadow: none;
}

.card-flash .rd-missed,
.card-flash .rd-caption {
  text-shadow: none;
}

/* The assessment card is shorter than the Responder card and was stretching
   into a long empty bottom. Center its content in the shared row height. */
.choice-grid:has(.card-flash) > .card:not(.card-flash) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: "hard to see the words... the buttons need to be redone...
   both of those cards need spruced up, and enhanced, more customized. But I
   like now that I can see through them at least."

   The words get frost POOLS — the hero's trick, scoped to the fork cards:
   each text block carries a feathered veil on its own pseudo, so legibility
   returns without re-fogging the glass between the lines. The wizard stays.
   --------------------------------------------------------------------------- */

.path-card {
  position: relative;
}

.path-card h2,
.path-card > p:not(.card-kicker) {
  position: relative;
  z-index: 0;
}

.path-card h2::before,
.path-card > p:not(.card-kicker)::before {
  content: "";
  position: absolute;
  inset: -0.55rem -1.3rem;
  z-index: -1;
  border-radius: 1.4rem;
  background: rgba(250, 240, 217, 0.30);
  backdrop-filter: blur(12px) saturate(1.1) brightness(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.1) brightness(1.12);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 52%, transparent 98%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 52%, transparent 98%);
}

.path-card-product h2::before,
.path-card-product > p:not(.card-kicker)::before {
  background: rgba(14, 9, 22, 0.46);
  backdrop-filter: blur(9px) brightness(0.9);
  -webkit-backdrop-filter: blur(9px) brightness(0.9);
}

.path-card:not(.path-card-product) h2 {
  color: #120d1a;
}

.path-card:not(.path-card-product) p:not(.card-kicker) {
  color: #1c1526;
  font-weight: 650;
}

/* The buttons, redone: gold coins and gold-ringed glass, sized to be pressed. */
.path-card .button,
.card-assess .button {
  border-radius: 999px;
  padding: 0.95rem 1.75rem;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
}

.path-card .button-primary,
.card-assess .button-primary {
  border: 1px solid rgba(255, 246, 220, 0.85);
  background: linear-gradient(180deg, #fbe7b6 0%, #eec267 55%, #d99f36 100%);
  color: #221430;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(140, 96, 26, 0.5),
    0 0.6rem 1.7rem rgba(212, 156, 56, 0.4),
    0 0 2.4rem rgba(255, 214, 130, 0.28);
}

.path-card .button-primary:hover,
.path-card .button-primary:focus-visible,
.card-assess .button-primary:hover,
.card-assess .button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px rgba(140, 96, 26, 0.6),
    0 0.8rem 2rem rgba(212, 156, 56, 0.52),
    0 0 3rem rgba(255, 214, 130, 0.42);
}

.path-card .button:not(.button-primary),
.card-assess .button:not(.button-primary) {
  border: 1px solid rgba(242, 206, 131, 0.7);
  color: #f6dfae;
  background: rgba(16, 10, 26, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(242, 206, 131, 0.14),
    0 0 1.6rem rgba(122, 79, 192, 0.28);
}

.path-card .button:not(.button-primary):hover,
.path-card .button:not(.button-primary):focus-visible,
.card-assess .button:not(.button-primary):hover,
.card-assess .button:not(.button-primary):focus-visible {
  background: linear-gradient(180deg, #fbe7b6 0%, #eec267 100%);
  color: #221430;
  text-shadow: none;
}

/* The $5 wax seal on the premade shop window. */
.pc-seal {
  position: absolute;
  top: -1.1rem;
  right: 1.6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 248, 228, 0.9);
  border-radius: 50%;
  transform: rotate(8deg);
  background: radial-gradient(circle at 32% 28%, #ffefc4 0%, #edc267 48%, #c98f2b 100%);
  color: #2a1a0a;
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 900;
  box-shadow:
    0 0 0 4px rgba(201, 143, 43, 0.45),
    0 0 0 5px rgba(255, 236, 190, 0.5),
    0 0.5rem 1.4rem rgba(20, 10, 34, 0.5),
    0 0 1.8rem rgba(255, 214, 130, 0.4);
}

/* Drafting brackets pinned to the custom card's dashed outline corners. */
.pc-corners {
  position: absolute;
  inset: 0.9rem;
  z-index: 2;
  pointer-events: none;
}

.pc-corners::before,
.pc-corners::after {
  content: "";
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid rgba(242, 206, 131, 0.75);
}

.pc-corners::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.pc-corners::after {
  right: 0;
  bottom: 0;
  border-top: 0;
  border-left: 0;
}

/* "THE RESPONDER" — all caps, gold, per the owner. */
.card-flash .rd-name {
  color: #f2ce83;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(242, 206, 131, 0.45),
    0 2px 10px rgba(8, 7, 12, 0.8);
}

/* The assessment card, redone in the Responder card's shape: copy on the
   left, a sample report on the right where the phone would stand. The empty
   space becomes the product. Selector matches the centering rule's
   specificity so the grid wins. */
.choice-grid:has(.card-flash) > .card.card-assess {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.6rem;
  align-items: center;
  text-align: center;
}

.card-assess-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.assess-demo {
  display: grid;
  align-items: center;
  justify-items: center;
}

.ad-sheet {
  width: min(16.5rem, 100%);
  padding: 1.1rem 1.15rem 1rem;
  transform: rotate(-1.6deg);
  border: 1px solid rgba(242, 206, 131, 0.5);
  border-radius: 0.9rem;
  background: linear-gradient(170deg, #17121f 0%, #0d0a14 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 2rem rgba(174, 112, 255, 0.24),
    0 1rem 2.2rem rgba(8, 7, 12, 0.55);
  text-align: left;
}

.ad-head {
  margin: 0 0 0.7rem;
  color: rgba(242, 206, 131, 0.9);
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ad-rows {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ad-rows li {
  position: relative;
  margin: 0;
  padding: 0.5rem 0.6rem 0.5rem 1.9rem;
  border-radius: 0.55rem;
  background: rgba(122, 100, 160, 0.14);
  color: #e7dff0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ad-rows li::before {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  transform: translateY(-50%);
  font-weight: 900;
}

.ad-bad::before { content: "✕"; color: #ff9d9d; }
.ad-warn::before { content: "!"; color: #ffd27d; }
.ad-good::before { content: "✓"; color: #9fe6a0; }

.ad-good {
  background: rgba(242, 206, 131, 0.14);
}

.ad-foot {
  margin: 0.8rem 0 0;
  color: rgba(231, 223, 240, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 78rem) {
  .choice-grid:has(.card-flash) > .card.card-assess {
    grid-template-columns: 1fr;
  }
}

/* The pools read as chips — hard corners showing. Widen and feather sooner
   so they dissolve into the glass like the hero's do. */
.path-card h2::before,
.path-card > p:not(.card-kicker)::before {
  inset: -1rem -2.2rem;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 30%, transparent 82%);
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: the frost pools were overlapping between headline and body on
   both cards, and the custom card still read as the premade's twin.

   One pool per card now — it lives on the .pc-text wrapper, so headline and
   body share a single sheet of frost with no seam. Then the custom card gets
   its own voice: metal-poured headline, a commission plaque, blueprint ruler
   ticks, dashed drafting tags, and a button wrapped in the card's own
   rotating ring — champagne letters in every state, never dark.
   --------------------------------------------------------------------------- */

.path-card h2::before,
.path-card > p:not(.card-kicker)::before {
  content: none;
}

.pc-text {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pc-text::before {
  content: "";
  position: absolute;
  inset: -1.2rem -2rem;
  z-index: -1;
  border-radius: 1.6rem;
  background: rgba(250, 240, 217, 0.30);
  backdrop-filter: blur(12px) saturate(1.1) brightness(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.1) brightness(1.12);
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 40%, transparent 88%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 40%, transparent 88%);
}

.path-card-product .pc-text::before {
  background: rgba(14, 9, 22, 0.44);
  backdrop-filter: blur(9px) brightness(0.9);
  -webkit-backdrop-filter: blur(9px) brightness(0.9);
}

/* The custom headline is poured in the hero's metal, not written in ink. */
.path-card-product .pc-text h2 {
  background-image: linear-gradient(100deg, #fffdf6 0%, #f2e2ba 40%, #d8b56a 60%, #fff5df 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 6px rgba(8, 7, 12, 0.85))
    drop-shadow(0 0 22px rgba(174, 112, 255, 0.35));
  text-shadow: none;
}

/* The kicker becomes a commission plaque. */
.path-card-product .card-kicker {
  align-self: center;
  display: inline-block;
  padding: 0.42rem 1.1rem;
  border: 1px solid rgba(242, 206, 131, 0.6);
  border-radius: 999px;
  background: rgba(16, 10, 26, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(242, 206, 131, 0.14),
    0 0 1.4rem rgba(122, 79, 192, 0.3);
}

/* Drafting tags instead of shop chips. */
.path-card-product .pill-list li {
  border: 1px dashed rgba(242, 206, 131, 0.6);
  background: rgba(16, 10, 26, 0.4);
  color: #f0e4c8;
}

/* Ruler ticks along the top and bottom edges, faded at the ends. */
.pc-ticks {
  position: absolute;
  inset: 0.9rem 2.4rem;
  z-index: 2;
  pointer-events: none;
}

.pc-ticks::before,
.pc-ticks::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 0.45rem;
  background: repeating-linear-gradient(90deg,
    rgba(242, 206, 131, 0.6) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.pc-ticks::before { top: 0; }
.pc-ticks::after { bottom: 0; }

/* The custom button: dark glass inside the card's own rotating gold-violet
   ring (the card animates --atelier-angle; the border just listens). The
   letters are champagne in every state — never dark. */
.path-card-product .button:not(.button-primary) {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(14, 9, 22, 0.7), rgba(14, 9, 22, 0.7)) padding-box,
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg) border-box;
  color: #f6dfae;
  text-shadow: 0 1px 8px rgba(8, 7, 12, 0.8);
  box-shadow:
    0 0 1.8rem rgba(122, 79, 192, 0.4),
    inset 0 0 1.1rem rgba(122, 79, 192, 0.2);
}

.path-card-product .button:not(.button-primary):hover,
.path-card-product .button:not(.button-primary):focus-visible {
  background:
    linear-gradient(rgba(24, 15, 38, 0.78), rgba(24, 15, 38, 0.78)) padding-box,
    conic-gradient(from var(--atelier-angle),
      #fff3d6 0deg, #9b6fe0 80deg, #ffe2a4 160deg, #a97fee 240deg, #fff3d6 360deg) border-box;
  color: #fff2d8;
  text-shadow: 0 1px 8px rgba(8, 7, 12, 0.85), 0 0 16px rgba(255, 226, 160, 0.5);
  box-shadow:
    0 0 2.6rem rgba(146, 99, 224, 0.55),
    inset 0 0 1.3rem rgba(146, 99, 224, 0.3);
  transform: translateY(-2px);
}

/* The ring button's glass was inheriting the secondary button's backdrop
   blur, so the bright storm bled through and drowned the letters. Solid dark
   interior, no backdrop, brighter champagne. */
.path-card-product .button:not(.button-primary) {
  background:
    linear-gradient(rgba(12, 8, 20, 0.88), rgba(12, 8, 20, 0.88)) padding-box,
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg) border-box;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #ffe9bd;
}

/* Two earlier rounds nailed dark ink onto this button with !important (the
   eras when it was gold-filled). Owner's rule outranks archaeology: the
   custom button never wears dark letters. Match force, end the war. */
.path-card.path-card-product .button:not(.button-primary) {
  color: #ffe9bd !important;
}

.path-card.path-card-product .button:not(.button-primary):hover,
.path-card.path-card-product .button:not(.button-primary):focus-visible {
  color: #fff2d8 !important;
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: "instead of custom, shouldn't it say sorcery... it still
   doesn't look cool enough... other things that will make it really shine
   and pop."

   The custom card becomes the third card that demos itself: a blueprint
   draws a website in gold strokes on loop, beside the copy — the same move
   as the Responder's phone and the assessment's report sheet. And the card's
   own border becomes the rotating ring: the conic that was washing the
   interior now paints only the rim, bright, alive, clipped to the border.
   --------------------------------------------------------------------------- */

.path-card-product {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.4rem;
  align-items: center;
  border: 2px solid transparent;
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.07), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.15) 0%, rgba(20, 12, 32, 0.19) 100%),
    conic-gradient(from var(--atelier-angle),
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  background-origin: padding-box, padding-box, padding-box, padding-box,
    padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box,
    padding-box, padding-box, padding-box, border-box;
  box-shadow:
    0 0 2.4rem rgba(122, 79, 192, 0.35),
    0 1.2rem 2.8rem rgba(8, 7, 12, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.path-card-product:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 3.4rem rgba(146, 99, 224, 0.5),
    0 1.6rem 3.4rem rgba(8, 7, 12, 0.55);
}

.pcp-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pcp-demo {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

/* The blueprint: gold strokes that draw themselves, hold, and fade. Each
   shape carries its own delay, so the sketch assembles in drafting order and
   un-draws the same way at the loop's end. */
.bp {
  width: min(14.5rem, 100%);
  overflow: visible;
}

.bp-s {
  fill: none;
  stroke: rgba(246, 223, 174, 0.9);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(242, 206, 131, 0.4));
  animation: bp-draw 12s ease-in-out infinite both;
}

.bp-bar  { animation-delay: 0.9s; }
.bp-hero { animation-delay: 1.7s; }
.bp-side { animation-delay: 2.3s; }
.bp-l1   { animation-delay: 2.9s; }
.bp-l2   { animation-delay: 3.3s; }
.bp-btn  { animation-delay: 3.8s; }

@keyframes bp-draw {
  0%        { stroke-dashoffset: 100; opacity: 0; }
  3%        { opacity: 1; }
  26%, 82%  { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.bp-dot {
  fill: #f2ce83;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(242, 206, 131, 0.6));
  animation: bp-dots 12s ease-in-out infinite;
}

@keyframes bp-dots {
  0%, 8%    { opacity: 0; }
  14%, 82%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.bp-cap {
  color: rgba(242, 206, 131, 0.8);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (max-width: 78rem) {
  .path-card-product {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-card-product {
    transition: none;
  }

  .path-card-product:hover {
    transform: none;
  }

  .bp-s,
  .bp-dot {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* CORRECTION: background-clip border-box paints the WHOLE box, not a ring —
   the full-strength conic beamed through the transparent interior again.
   The interior goes back to the tamed tinted wheel, and the bright rotating
   rim moves to its own element with a proper ring mask, which respects the
   card's rounded corners and touches nothing else. */
.path-card-product {
  background-image:
    repeating-linear-gradient(0deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    repeating-linear-gradient(90deg, rgba(242, 206, 131, 0.055) 0 1px, transparent 1px 3.4rem),
    radial-gradient(2px 2px at 50px 60px, rgba(255, 236, 190, 0.95), transparent 3px),
    radial-gradient(1.6px 1.6px at 120px 140px, rgba(214, 170, 255, 0.95), transparent 3px),
    radial-gradient(circle at 80% -10%, rgba(174, 112, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 12% 110%, rgba(242, 206, 131, 0.07), transparent 20rem),
    linear-gradient(165deg, rgba(30, 18, 46, 0.15) 0%, rgba(20, 12, 32, 0.19) 100%),
    conic-gradient(from var(--atelier-angle),
      rgba(255, 233, 189, 0.20) 0deg, rgba(122, 79, 192, 0.16) 80deg,
      rgba(232, 201, 135, 0.18) 160deg, rgba(138, 95, 208, 0.16) 240deg,
      rgba(255, 233, 189, 0.20) 360deg);
  background-origin: padding-box;
  background-clip: border-box;
}

.pc-rim {
  position: absolute;
  inset: -2px;
  z-index: 1;
  padding: 2.5px;
  border-radius: var(--radius);
  background: conic-gradient(from var(--atelier-angle),
    #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 8px rgba(174, 112, 255, 0.45));
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: "the frost... too thick, too wide... the font looks very
   lame... the entire design needs redone in a way that explains the
   abracadabra and the alacazam — like the boxes below it."

   The premade card is rebuilt on the lower boxes' formula: question kicker,
   plain-speech headline, price line, and a demo — three answers fill
   themselves, the magic word flashes, a finished page pops into existence.
   The milk pools are gone with the dark ink that needed them; the text now
   sits light on warm gold-smoke glass, same treatment as the cards he
   praised, and the wizard keeps showing through.
   --------------------------------------------------------------------------- */

.path-card:not(.path-card-product) {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.4rem;
  align-items: center;
  background-image:
    linear-gradient(115deg, transparent 42%, rgba(255, 236, 190, 0.22) 50%, transparent 58%),
    radial-gradient(circle at 50% -20%, rgba(255, 214, 130, 0.16), transparent 24rem),
    linear-gradient(165deg, rgba(58, 40, 16, 0.30) 0%, rgba(40, 26, 10, 0.36) 100%);
}

.pcm-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* The pools and the dark ink go together. Light type, dark halo — the same
   voice as the assessment and Responder cards. */
.path-card:not(.path-card-product) .pc-text::before {
  content: none;
}

.path-card:not(.path-card-product) h2 {
  color: #fdf3dd;
  text-shadow: 0 2px 6px rgba(8, 7, 12, 0.85), 0 2px 20px rgba(8, 7, 12, 0.6);
}

.path-card:not(.path-card-product) p:not(.card-kicker) {
  color: #f0e5cd;
  font-weight: 570;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.8), 0 2px 16px rgba(8, 7, 12, 0.55);
}

.path-card:not(.path-card-product) .card-flash-price {
  color: #ffd98a;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.85);
}

/* The demo: answers fill in, the word lands, the page appears. One 14s
   clock, same rhythm as the Responder's phone. */
.abra-demo {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  width: min(15rem, 100%);
}

.abd-form {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(242, 206, 131, 0.5);
  border-radius: 0.8rem;
  background: linear-gradient(170deg, rgba(26, 17, 7, 0.72) 0%, rgba(16, 10, 4, 0.78) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0.5rem 1.4rem rgba(8, 7, 12, 0.45);
}

.abd-label {
  color: rgba(242, 220, 176, 0.85);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.abd-fill {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2ce83 0%, #e8b654 100%);
  box-shadow: 0 0 8px rgba(242, 206, 131, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
  animation: abd-fill 14s ease-in-out infinite;
}

.abd-f2 { width: 78%; animation-name: abd-fill-2; }
.abd-f3 { width: 56%; animation-name: abd-fill-3; }

@keyframes abd-fill {
  0%, 4%    { transform: scaleX(0); opacity: 1; }
  11%, 90%  { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes abd-fill-2 {
  0%, 11%   { transform: scaleX(0); opacity: 1; }
  18%, 90%  { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes abd-fill-3 {
  0%, 18%   { transform: scaleX(0); opacity: 1; }
  25%, 90%  { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

.abd-zap {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: #ffe9bd;
  text-shadow: 0 0 14px rgba(255, 226, 160, 0.8);
  opacity: 0;
  animation: abd-zap 14s ease-in-out infinite;
}

@keyframes abd-zap {
  0%, 26%   { opacity: 0; transform: scale(0.92); }
  31%, 38%  { opacity: 1; transform: scale(1.04); }
  46%, 100% { opacity: 0; transform: scale(0.98); }
}

.abd-page {
  display: grid;
  gap: 0.38rem;
  justify-items: start;
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(255, 244, 214, 0.85);
  border-radius: 0.8rem;
  background: linear-gradient(170deg, #fdf6e4 0%, #f3ddae 100%);
  color: #221430;
  box-shadow:
    0 0 0 1px rgba(140, 96, 26, 0.4),
    0 0.6rem 1.6rem rgba(8, 7, 12, 0.5),
    0 0 2rem rgba(255, 214, 130, 0.35);
  transform-origin: 50% 30%;
  opacity: 0;
  animation: abd-page 14s ease-in-out infinite;
}

.abd-page b {
  font-size: 0.82rem;
  font-weight: 830;
}

@keyframes abd-page {
  0%, 36%   { opacity: 0; transform: scale(0.9) translateY(6px); }
  42%, 90%  { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(0.97); }
}

.abd-bar {
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(34, 20, 48, 0.25);
}

.abd-line {
  width: 86%;
  height: 0.34rem;
  border-radius: 999px;
  background: rgba(34, 20, 48, 0.3);
}

.abd-short { width: 58%; }

.abd-cta {
  width: 42%;
  height: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #eec267 0%, #d99f36 100%);
  box-shadow: 0 1px 4px rgba(140, 96, 26, 0.5);
}

@media (max-width: 78rem) {
  .path-card:not(.path-card-product) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abd-fill,
  .abd-zap,
  .abd-page {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* The question kicker hits like LOSING CALLS? does — same scale, same gold. */
.path-card:not(.path-card-product) .card-kicker {
  color: #f2ce83;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: 0.12em;
  text-shadow:
    0 1px 6px rgba(8, 7, 12, 0.9),
    0 0 20px rgba(242, 206, 131, 0.35);
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: the Sorcery box loses its dark frost too, its plaque becomes
   a big gold kicker like the Abracadabra box's, the price moves to a golden
   corner chip twinning the $5 seal, and the metal headline gets re-poured so
   every word carries gold.
   --------------------------------------------------------------------------- */

.path-card-product .pc-text::before {
  content: none;
}

.path-card-product .card-kicker {
  align-self: auto;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: #f2ce83;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: 0.12em;
  text-shadow:
    0 1px 6px rgba(8, 7, 12, 0.9),
    0 0 20px rgba(242, 206, 131, 0.35);
}

.pc-seal-from {
  display: grid;
  place-content: center;
  line-height: 1.05;
  text-align: center;
  font-size: 0.92rem;
}

.pc-seal-from small {
  display: block;
  font-size: 0.46rem;
  font-weight: 830;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Without the pool, the headline and body hold the glass on their own:
   denser gold through the whole pour, heavier halos beneath. */
.path-card-product .pc-text h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  background-image: linear-gradient(100deg,
    #fffdf6 0%, #f6e8c6 30%, #d8b56a 55%, #fff5df 80%, #e8c987 100%);
  filter:
    drop-shadow(0 2px 5px rgba(8, 7, 12, 0.95))
    drop-shadow(0 4px 18px rgba(8, 7, 12, 0.6))
    drop-shadow(0 0 24px rgba(174, 112, 255, 0.3));
}

.path-card-product .pc-text p:not(.card-kicker) {
  color: #f3ecdf;
  text-shadow:
    0 1px 5px rgba(8, 7, 12, 0.95),
    0 2px 18px rgba(8, 7, 12, 0.8);
}

/* OWNER: "it has two little graphics... it could just have the one." It is
   one now: the form and the page share the same cell and the form BECOMES
   the page — fills, flash, transform. The trick, performed by the graphic. */
.abd-stage {
  position: relative;
  display: grid;
  width: 100%;
}

.abd-stage > .abd-form,
.abd-stage > .abd-page {
  grid-area: 1 / 1;
}

.abd-page {
  align-content: center;
}

.abd-form {
  animation: abd-form 14s ease-in-out infinite;
}

@keyframes abd-form {
  0%, 30%   { opacity: 1; transform: none; }
  36%, 88%  { opacity: 0; transform: scale(0.96); }
  94%, 100% { opacity: 1; transform: none; }
}

.abd-zap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

@keyframes abd-zap {
  0%, 26%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  31%, 38%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  46%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  .abd-form {
    animation: none;
    opacity: 0;
  }

  .abd-zap {
    animation: none;
    opacity: 0;
  }

  .abd-page {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Kicker parity is exact: no ornament the twin lacks. And no widowed word
   in the metal headline. */
.path-card-product .card-kicker::before {
  content: none;
}

.path-card-product .pc-text h2 {
  text-wrap: balance;
}

/* OWNER: the masthead breathes — SITE SOURCERY spaced out wider. */
.site-brand {
  letter-spacing: 0.2em;
}

/* OWNER: SITE SOURCERY spaced out more. The tight -0.035em editorial
   tracking from the big-masthead round loses; the wordmark breathes. */
.site-brand {
  letter-spacing: 0.12em !important;
}

/* OWNER: "a little tiny box... Just want a domain — and make domain a
   clickable button." The smallest door on the page, under the card rows,
   above the footer. The dedicated page it opens already works. */
.domain-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
  width: fit-content;
  margin: 2.4rem auto 0;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(242, 206, 131, 0.45);
  border-radius: 999px;
  background: rgba(16, 10, 26, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(242, 206, 131, 0.1),
    0 0 1.8rem rgba(122, 79, 192, 0.22);
}

.domain-mini p {
  margin: 0;
  color: #f2ce83;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.85);
}

/* ---------------------------------------------------------------------------
   REVIEW FIX (confirmed critical): the late !important masthead clamps kept
   the wordmark desktop-sized on phones, shoving the menu button off the
   right edge of every page and forcing sideways scroll. Phone widths get
   their own final word, and the header may wrap instead of overflowing.
   --------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .site-brand {
    font-size: clamp(1.1rem, 5vw, 1.6rem) !important;
    letter-spacing: 0.08em !important;
  }

  .header-inner {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
}

/* The DAARX proof shot shows whole, not cropped — the scone stage's cover
   framing was cutting its left edge. */
#daarx .proof-stage-main img {
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
}

/* Notes that ride under checkout buttons: quiet, honest, unmissable. */
.checkout-note,
.spark-fine {
  margin: 0.6rem auto 0;
  max-width: 36rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(231, 223, 240, 0.78);
}

/* Contact promised "your topic is highlighted when you arrive from a
   service page" and no code performed it. :target performs it. */
li[id^="about-"]:target {
  border-radius: 0.5rem;
  outline: 2px solid rgba(242, 206, 131, 0.8);
  outline-offset: 3px;
  background: rgba(242, 206, 131, 0.12);
}

/* The flat price line on the domains page. */
.domain-price-line {
  color: #e9dcc2;
}

.domain-price-line strong {
  color: #ffd98a;
}

/* ---------------------------------------------------------------------------
   OWNER ROUND, /abracadabra/ walk: "can you see everything how we treated
   the first page... centered... your rendition."

   The storm rides the page (body.vnext-page), the hero speaks the homepage
   formula — champagne eyebrow, metal headline, centered column — and the
   plans section borrows the fork cards wholesale. Section heads center.
   --------------------------------------------------------------------------- */


.abracadabra-page .maker-proof-featured {
  width: min(52rem, 100%);
}

.abracadabra-page .section-head {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.abracadabra-page .abracadabra-step-grid li {
  text-align: left; /* numbered cards read as a list; the heads center above */
}

.abracadabra-page .proof-strip {
  justify-content: center;
}

.plans-footnote {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  color: rgba(231, 223, 240, 0.72);
  font-size: 0.9rem;
  text-align: center;
}

.card-closer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.closer-quiet {
  margin: 0;
  color: rgba(231, 223, 240, 0.78);
  font-size: 0.92rem;
}

/* The magic-word nav is ~120px wider than the old labels; the viewport-scaled
   wordmark was already winning the race to the middle. Tame its curve and
   move the drawer point up so inline nav only exists where both fit. */
.site-brand {
  font-size: clamp(1.6rem, 3.1vw, 2.9rem) !important;
}

@media (max-width: 88rem) {
  .site-nav:not([data-menu-open]) {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}


/* Center the heads all the way down — the inner wrapper was holding its
   left alignment — and give the hero eyebrow ink that survives lightning. */
.abracadabra-page .section-head,
.abracadabra-page .section-head > div {
  align-items: center;
  text-align: center;
}

.abracadabra-page .section-head h2 {
  text-wrap: balance;
}


/* .section-head is a two-column grid in its home stylesheet; on this page it
   becomes a centered column, and the subline gets ink that survives storms. */
.abracadabra-page .section-head {
  display: flex;
  flex-direction: column;
}

.abracadabra-page .section-head > p {
  max-width: 40rem;
  color: #f0e5cd;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.85), 0 2px 14px rgba(8, 7, 12, 0.6);
}

/* The quiet fact line under the abracadabra hero button. */
.hero-fact {
  margin: 0.4rem 0 0;
  color: rgba(242, 220, 176, 0.85);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.85);
}

/* With the featured frame gone, the three looks are the show — give them
   room and let the middle one lead. */
.abracadabra-page .abracadabra-looks {
  padding-top: 1.5rem;
}

/* The Alacazam twin's quiet truth line, and breathing room for the ramp. */
.twin-quiet {
  margin: 0.4rem 0 0;
  color: rgba(242, 220, 176, 0.8);
  font-size: 0.85rem;
  font-style: italic;
  text-shadow: 0 1px 5px rgba(8, 7, 12, 0.8);
}

/* A one-word headline never breaks mid-word. Sized to hold one line from
   320px up. */

/* The compound Abracadabra · Alacazam label needs its row back: tighter nav
   type, tighter gaps, gentler brand curve. */
.site-nav {
  gap: 1.1rem;
}

.site-nav a {
  font-size: 0.66rem;
  letter-spacing: 0.035em;
}

.site-brand {
  font-size: clamp(1.6rem, 2.9vw, 2.75rem) !important;
}


/* ---------------------------------------------------------------------------
   OWNER REDLINE, /abracadabra/:
   - Both incantation words BIG - Alakazam no longer the little sibling.
   - White section heads get the homepage's dark halos against the storm.
   - The deal pair stops mimicking the homepage fork: one joined diptych,
     two halves of a single spell, same glass, a gold flow-mark between.
   --------------------------------------------------------------------------- */


.abracadabra-page .section-head h2,
.abracadabra-page .section-head .overline,
.abracadabra-page .section-head .eyebrow {
  text-shadow:
    0 2px 6px rgba(8, 7, 12, 0.9),
    0 4px 24px rgba(8, 7, 12, 0.65);
}

/* The diptych: one gold-rimmed vessel, two chambers. */
.lane-diptych {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  border: 1.5px solid rgba(242, 206, 131, 0.55);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% -20%, rgba(174, 112, 255, 0.14), transparent 26rem),
    linear-gradient(165deg, rgba(24, 15, 36, 0.34) 0%, rgba(14, 9, 22, 0.4) 100%);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(242, 206, 131, 0.1),
    0 0 2.6rem rgba(122, 79, 192, 0.3),
    0 1.2rem 2.8rem rgba(8, 7, 12, 0.5);
}

.lane-diptych .lane-half {
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  animation: none;
}

.lane-diptych .lane-half + .lane-half {
  border-left: 1px dashed rgba(242, 206, 131, 0.4);
}

/* The flow-mark: the spell passes from one chamber to the other. */
.lane-diptych::after {
  content: "\2726";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(242, 206, 131, 0.6);
  border-radius: 50%;
  background: #140e20;
  color: #f2ce83;
  font-size: 1.1rem;
  box-shadow: 0 0 1.4rem rgba(242, 206, 131, 0.35);
}

.lane-half .card-kicker {
  color: #f2ce83;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  letter-spacing: 0.14em;
}

@media (max-width: 78rem) {
  .lane-diptych {
    grid-template-columns: 1fr;
  }

  .lane-diptych .lane-half + .lane-half {
    border-left: 0;
    border-top: 1px dashed rgba(242, 206, 131, 0.4);
  }
}

/* The vessel stops beheading its own coins (overflow was only guarding
   corners that no longer paint), and it shrinks to its contents instead of
   stretching chambers of empty glass around three lines. */
.lane-diptych {
  overflow: visible;
  max-width: 62rem;
  margin-inline: auto;
}

.lane-diptych .lane-half {
  padding: 1.6rem 2rem 1.8rem;
}

.lane-diptych .pcm-copy {
  gap: 0.55rem;
}

.lane-diptych .pc-text p {
  max-width: 34rem;
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: frost pools for the incantation, a sitewide footer pool, the
   spell-door, and the vessel's spruce.
   --------------------------------------------------------------------------- */


/* The footer's copy sits on the same feathered frost, on every page. */
.footer-stack {
  position: relative;
  z-index: 0;
}

.footer-stack::after {
  content: "";
  position: absolute;
  inset: -1.5rem -3rem;
  z-index: -1;
  border-radius: 2rem;
  background: rgba(8, 7, 12, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: radial-gradient(ellipse closest-side, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 45%, transparent 100%);
}

/* The spell-door: the word itself is the way in. */
.spell-door {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  animation: door-breathe 3.4s ease-in-out infinite;
}

.spell-door::after {
  content: "";
  position: absolute;
  right: 0.1em;
  bottom: -0.18em;
  left: 0.1em;
  height: 2px;
  transform: scaleX(0.35);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #f2ce83, transparent);
  transition: transform 0.3s ease;
}

.spell-door:hover,
.spell-door:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 14px rgba(242, 206, 131, 0.65));
}

.spell-door:hover::after,
.spell-door:focus-visible::after {
  transform: scaleX(1);
}

@keyframes door-breathe {
  0%, 100% { text-shadow: 0 0 10px rgba(242, 206, 131, 0.25); }
  50%      { text-shadow: 0 0 22px rgba(242, 206, 131, 0.6); }
}

.spell-whisper {
  margin: -0.2rem 0 0;
  color: rgba(242, 220, 176, 0.7);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Vessel spruce: coins gleam, the rim breathes, chambers answer the hand. */
.pc-seal {
  overflow: hidden;
}

.pc-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: coin-gleam 5.5s linear infinite;
}

@keyframes coin-gleam {
  0%, 70% { background-position: 120% 0; }
  100%    { background-position: -140% 0; }
}

.lane-diptych {
  animation: rim-breathe 6s ease-in-out infinite;
}

@keyframes rim-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(242, 206, 131, 0.1), 0 0 2.2rem rgba(122, 79, 192, 0.26), 0 1.2rem 2.8rem rgba(8, 7, 12, 0.5); }
  50%      { box-shadow: inset 0 0 0 1px rgba(242, 206, 131, 0.16), 0 0 3.2rem rgba(146, 99, 224, 0.42), 0 1.2rem 2.8rem rgba(8, 7, 12, 0.5); }
}

.lane-diptych .lane-half {
  transition: transform 0.3s ease;
}

.lane-diptych .lane-half:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .spell-door,
  .pc-seal::after,
  .lane-diptych {
    animation: none;
  }

  .lane-diptych .lane-half:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   OWNER ROUND: frost pools for the incantation, a sitewide footer pool, the
   spell-door, and the vessel's spruce.
   --------------------------------------------------------------------------- */


/* The footer's copy sits on the same feathered frost, on every page. */
.footer-stack {
  position: relative;
  z-index: 0;
}

.footer-stack::after {
  content: "";
  position: absolute;
  inset: -1.5rem -3rem;
  z-index: -1;
  border-radius: 2rem;
  background: rgba(8, 7, 12, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: radial-gradient(ellipse closest-side, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 45%, transparent 100%);
}

/* The spell-door: the word itself is the way in. */
.spell-door {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  animation: door-breathe 3.4s ease-in-out infinite;
}

.spell-door::after {
  content: "";
  position: absolute;
  right: 0.1em;
  bottom: -0.18em;
  left: 0.1em;
  height: 2px;
  transform: scaleX(0.35);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, #f2ce83, transparent);
  transition: transform 0.3s ease;
}

.spell-door:hover,
.spell-door:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 14px rgba(242, 206, 131, 0.65));
}

.spell-door:hover::after,
.spell-door:focus-visible::after {
  transform: scaleX(1);
}

@keyframes door-breathe {
  0%, 100% { text-shadow: 0 0 10px rgba(242, 206, 131, 0.25); }
  50%      { text-shadow: 0 0 22px rgba(242, 206, 131, 0.6); }
}

.spell-whisper {
  margin: -0.2rem 0 0;
  color: rgba(242, 220, 176, 0.7);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Vessel spruce: coins gleam, the rim breathes, chambers answer the hand. */
.pc-seal {
  overflow: hidden;
}

.pc-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: coin-gleam 5.5s linear infinite;
}

@keyframes coin-gleam {
  0%, 70% { background-position: 120% 0; }
  100%    { background-position: -140% 0; }
}

.lane-diptych {
  animation: rim-breathe 6s ease-in-out infinite;
}

@keyframes rim-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(242, 206, 131, 0.1), 0 0 2.2rem rgba(122, 79, 192, 0.26), 0 1.2rem 2.8rem rgba(8, 7, 12, 0.5); }
  50%      { box-shadow: inset 0 0 0 1px rgba(242, 206, 131, 0.16), 0 0 3.2rem rgba(146, 99, 224, 0.42), 0 1.2rem 2.8rem rgba(8, 7, 12, 0.5); }
}

.lane-diptych .lane-half {
  transition: transform 0.3s ease;
}

.lane-diptych .lane-half:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .spell-door,
  .pc-seal::after,
  .lane-diptych {
    animation: none;
  }

  .lane-diptych .lane-half:hover {
    transform: none;
  }
}


/* ---------------------------------------------------------------------------
   OWNER: "the abracadabra alakazam box doesn't look cool enough."
   The vessel wakes up: a rotating gold-violet rim (the ring-mask trick at
   vessel scale), an energy seam flowing between the chambers, and each
   chamber breathing its own aura - gold where the page is made, violet
   where it is kept.
   --------------------------------------------------------------------------- */

.lane-diptych {
  animation:
    atelier-ring 9s linear infinite,
    rim-breathe 6s ease-in-out infinite;
}

.lane-diptych::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  padding: 2px;
  border-radius: var(--radius);
  background: conic-gradient(from var(--atelier-angle),
    #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 10px rgba(174, 112, 255, 0.4));
  pointer-events: none;
}

/* The chambers carry their own weather. */
.lane-diptych .lane-half {
  background: radial-gradient(circle at 28% 12%, rgba(242, 206, 131, 0.09), transparent 20rem);
}

.lane-diptych .lane-half-live {
  background: radial-gradient(circle at 72% 12%, rgba(174, 112, 255, 0.12), transparent 20rem);
}

/* The seam becomes a current passing from Makes to Keeps. */
.lane-diptych .lane-half + .lane-half {
  border-left: 0;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(242, 206, 131, 0.75) 45%, rgba(174, 112, 255, 0.75) 55%, transparent 100%),
    radial-gradient(circle at 72% 12%, rgba(174, 112, 255, 0.12), transparent 20rem);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, 0 0;
  background-size: 1.5px 320%, auto;
  animation: seam-flow 4.2s linear infinite;
}

@keyframes seam-flow {
  0%   { background-position: left -220%, 0 0; }
  100% { background-position: left 120%, 0 0; }
}

@media (max-width: 78rem) {
  .lane-diptych .lane-half + .lane-half {
    background-size: 100% 1.5px, auto;
    animation: none;
    background-position: left top, 0 0;
    border-top: 0;
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(242, 206, 131, 0.75) 45%, rgba(174, 112, 255, 0.75) 55%, transparent 100%),
      radial-gradient(circle at 72% 12%, rgba(174, 112, 255, 0.12), transparent 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lane-diptych::before {
    background: conic-gradient(from 40deg,
      #ffe9bd 0deg, #7a4fc0 80deg, #e8c987 160deg, #8a5fd0 240deg, #ffe9bd 360deg);
  }

  .lane-diptych .lane-half + .lane-half {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   OWNER: "make that hero like the home page's main one." Same scale, same
   pours, same furniture: the incantation grows to homepage size, the lede
   dips in the same metal, and the eyebrow gets its dash back.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   OWNER: the vessel "not enchanted enough, so much empty space." The
   chambers now perform their own verbs: the left one builds the little page
   (the homepage's spell, compact), the right one keeps it - live at its own
   address, pulse and all.
   --------------------------------------------------------------------------- */

.vessel-demo {
  width: 13rem;
  margin-top: 0.4rem;
}

.vessel-demo .abd-form {
  padding: 0.65rem 0.75rem;
  gap: 0.32rem;
}

.vessel-demo .abd-page {
  padding: 0.65rem 0.75rem;
  gap: 0.3rem;
}

.keep-demo {
  position: relative;
  width: 13rem;
  margin-top: 0.4rem;
}

.kd-page {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 244, 214, 0.85);
  border-radius: 0.8rem;
  background: linear-gradient(170deg, #fdf6e4 0%, #f3ddae 100%);
  color: #221430;
  box-shadow:
    0 0 0 1px rgba(140, 96, 26, 0.4),
    0 0.6rem 1.6rem rgba(8, 7, 12, 0.5),
    0 0 2rem rgba(174, 112, 255, 0.3);
}

.kd-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 20, 48, 0.14);
  color: #221430;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.kd-lock {
  font-size: 0.55rem;
}

.kd-page b {
  font-size: 0.8rem;
  font-weight: 830;
}

.kd-line {
  width: 84%;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(34, 20, 48, 0.3);
}

.kd-short { width: 56%; }

.kd-cta {
  width: 40%;
  height: 0.7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #eec267 0%, #d99f36 100%);
}

.kd-live {
  position: absolute;
  top: -0.7rem;
  right: -0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(140, 220, 160, 0.7);
  border-radius: 999px;
  background: #10241a;
  color: #a7ecb8;
  font-size: 0.62rem;
  font-weight: 830;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 0 1.2rem rgba(120, 220, 150, 0.35);
}

.kd-live i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #6fe08a;
  animation: live-pulse 2.2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 224, 138, 0.7); }
  60%      { box-shadow: 0 0 0 7px rgba(111, 224, 138, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kd-live i {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   OWNER: the vessel stacks - ABRACADABRA above, ALAKAZAM below - each
   chamber a copy-and-demo row, the current now flowing across the seam
   between them. Whisper sits snug; the door's underline appears to the hand.
   --------------------------------------------------------------------------- */

.lane-diptych {
  grid-template-columns: 1fr;
  max-width: 56rem;
}

.lane-diptych .lane-half {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.4rem;
  align-items: center;
}

.lane-diptych .lane-half .pcm-copy {
  align-items: center;
  text-align: center;
}

.lane-diptych .vessel-demo,
.lane-diptych .keep-demo {
  justify-self: center;
  margin-top: 0;
}

.lane-diptych .lane-half + .lane-half {
  border-top: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(242, 206, 131, 0.75) 45%, rgba(174, 112, 255, 0.75) 55%, transparent 100%),
    radial-gradient(circle at 72% 12%, rgba(174, 112, 255, 0.12), transparent 20rem);
  background-repeat: no-repeat, no-repeat;
  background-position: -220% top, 0 0;
  background-size: 320% 1.5px, auto;
  animation: seam-flow-x 4.2s linear infinite;
}

@keyframes seam-flow-x {
  0%   { background-position: -220% top, 0 0; }
  100% { background-position: 120% top, 0 0; }
}

.spell-whisper {
  margin-top: 0.1rem;
}

.spell-door::after {
  transform: scaleX(0);
}

@media (max-width: 64rem) {
  .lane-diptych .lane-half {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lane-diptych .lane-half + .lane-half {
    animation: none;
    background-position: left top, 0 0;
  }
}

/* ---------------------------------------------------------------------------
   OWNER REDESIGN of the vessel:
   - The nameplates go big and wide-tracked; the serif verbs die with the
     empty space they floated in.
   - The word is no longer the button. The medallion on the seam is:
     CLICK / TO / CONJURE - and the ENTIRE vessel is clickable around it.
   --------------------------------------------------------------------------- */

.lane-diptych {
  cursor: pointer;
}

.lane-diptych::after {
  content: none; /* the old ✦ mark - replaced by the medallion element */
}

.lane-name {
  font-size: clamp(1.7rem, 3.1vw, 2.7rem);
  letter-spacing: 0.24em;
}

.lane-diptych .lane-half .pcm-copy {
  gap: 0.75rem;
}

/* The invisible hand: one link stretched across the whole vessel. */
.vessel-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.vessel-link:focus-visible {
  outline: 3px solid #f2ce83;
  outline-offset: 4px;
}

/* The medallion: the vessel's face, riding the seam. */
.conjure-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 8rem;
  height: 8rem;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(242, 206, 131, 0.75);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, rgba(122, 79, 192, 0.28), transparent 60%),
    #120c1e;
  pointer-events: none;
  box-shadow:
    0 0 0 5px rgba(18, 12, 30, 0.7),
    0 0 2rem rgba(242, 206, 131, 0.35),
    0 0.6rem 1.8rem rgba(8, 7, 12, 0.6);
  animation: core-breathe 3.2s ease-in-out infinite;
  transition: transform 0.25s ease;
}

.conjure-core span {
  color: #f2ce83;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.34em;
  line-height: 1.35;
  text-indent: 0.34em; /* recenters tracked caps */
  text-transform: uppercase;
}

.conjure-core span:nth-child(2) {
  font-size: 0.66rem;
  color: rgba(242, 220, 176, 0.75);
}

@keyframes core-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(18, 12, 30, 0.7), 0 0 1.6rem rgba(242, 206, 131, 0.3), 0 0.6rem 1.8rem rgba(8, 7, 12, 0.6); }
  50%      { box-shadow: 0 0 0 5px rgba(18, 12, 30, 0.7), 0 0 3rem rgba(242, 206, 131, 0.6), 0 0.6rem 1.8rem rgba(8, 7, 12, 0.6); }
}

/* The whole box answers the hand: rim flares, medallion swells. */
.vessel-link:hover ~ .conjure-core,
.vessel-link:focus-visible ~ .conjure-core {
  transform: translate(-50%, -50%) scale(1.08);
}

.lane-diptych:hover::before {
  filter: drop-shadow(0 0 10px rgba(174, 112, 255, 0.4)) brightness(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .conjure-core {
    animation: none;
    transition: none;
  }
}

/* The quiet Sorcery escape centers under the vessel. */
.abracadabra-page .closer-quiet {
  max-width: none;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   OWNER: the vessel needs a MAJOR spruce, still. So: the altar treatment.
   Nameplates pour in the hero's metal. The medallion becomes an astrolabe -
   a slow dashed orbit and a counter-turning tick ring. Each demo rests on a
   casting circle. Stardust drifts through the chambers. The rim doubles
   into coin-banding, and the wax seals tilt like they were pressed by hand.
   --------------------------------------------------------------------------- */

.lane-name {
  background-image: linear-gradient(100deg, #fffdf6 0%, #f6e8c6 26%, #d3ae62 48%, #fff7e2 66%, #e2c48b 88%, #fffdf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 5px rgba(8, 7, 12, 0.9))
    drop-shadow(0 0 18px rgba(174, 112, 255, 0.3));
}

/* Astrolabe rings around the medallion. */
.conjure-core::before {
  content: "";
  position: absolute;
  inset: -1.15rem;
  border: 1px dashed rgba(242, 206, 131, 0.5);
  border-radius: 50%;
  animation: orbit-slow 26s linear infinite;
}

.conjure-core::after {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 50%;
  padding: 3px;
  background: repeating-conic-gradient(from 0deg,
    rgba(242, 206, 131, 0.55) 0deg 2deg, transparent 2deg 14deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: orbit-slow 38s linear infinite reverse;
}

@keyframes orbit-slow {
  to { transform: rotate(360deg); }
}

/* Casting circles: the demos rest on the altar, not in the void. */
.vessel-demo {
  position: relative;
}

.vessel-demo::after,
.keep-demo::after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 50%;
  width: 116%;
  height: 1.6rem;
  transform: translateX(-50%);
  border: 1px solid rgba(242, 206, 131, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 1.2rem rgba(242, 206, 131, 0.18);
  -webkit-mask-image: linear-gradient(180deg, transparent 46%, #000 54%);
  mask-image: linear-gradient(180deg, transparent 46%, #000 54%);
}

/* Stardust drifts through the vessel. */
.lane-diptych {
  background:
    radial-gradient(1.6px 1.6px at 18% 30%, rgba(255, 236, 190, 0.9), transparent 3px),
    radial-gradient(1.3px 1.3px at 78% 22%, rgba(214, 170, 255, 0.85), transparent 3px),
    radial-gradient(1.8px 1.8px at 55% 75%, rgba(255, 226, 160, 0.7), transparent 3px),
    radial-gradient(circle at 50% -20%, rgba(174, 112, 255, 0.14), transparent 26rem),
    linear-gradient(165deg, rgba(24, 15, 36, 0.34) 0%, rgba(14, 9, 22, 0.4) 100%);
  animation:
    atelier-ring 9s linear infinite,
    rim-breathe 6s ease-in-out infinite,
    vessel-motes 30s ease-in-out infinite alternate;
}

@keyframes vessel-motes {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 4rem -2.5rem, -3rem 2rem, 2.5rem 3rem, 0 0, 0 0; }
}

/* The rim doubles into coin banding; the breath keeps the banding. */
@keyframes rim-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(18, 12, 30, 0.65),
      0 0 0 7.5px rgba(242, 206, 131, 0.26),
      inset 0 0 0 1px rgba(242, 206, 131, 0.12),
      0 0 2.2rem rgba(122, 79, 192, 0.28),
      0 1.2rem 2.8rem rgba(8, 7, 12, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(18, 12, 30, 0.65),
      0 0 0 7.5px rgba(242, 206, 131, 0.4),
      inset 0 0 0 1px rgba(242, 206, 131, 0.18),
      0 0 3.4rem rgba(146, 99, 224, 0.45),
      0 1.2rem 2.8rem rgba(8, 7, 12, 0.5);
  }
}

/* Wax seals pressed by hand. */
.lane-diptych .lane-half .pc-seal {
  transform: rotate(-7deg);
}

.lane-diptych .lane-half-live .pc-seal {
  transform: rotate(6deg);
}

@media (prefers-reduced-motion: reduce) {
  .conjure-core::before,
  .conjure-core::after {
    animation: none;
  }

  .lane-diptych {
    animation: none;
  }
}

/* Final phone header containment. Later masthead rules deliberately enlarge
   the wordmark, so the drawer row needs an equally late, specific bound: the
   brand, call target, and menu bars must all stay inside the viewport. */
@media (max-width: 48rem) {
  .menu-ready .site-header:has(.menu-button) .header-inner {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .menu-ready .site-header:has(.menu-button) .site-brand {
    min-width: 0;
    font-size: clamp(1.05rem, 4.7vw, 1.3rem) !important;
    letter-spacing: 0.07em !important;
  }

  .menu-ready .site-header:has(.menu-button) .menu-button {
    width: 2.75rem;
    min-width: 2.75rem;
    justify-content: center;
    gap: 0;
    margin-left: 0.2rem;
  }
}