/* ============================================================
   LOSTVIEWS — components (Candy Chrome)
   ============================================================ */

/* ---------- stat strip ---------- */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.stat {
  background: linear-gradient(165deg, var(--white), var(--shell));
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 28px 26px;
  display: grid;
  gap: 6px;
  box-shadow: inset 0 1px 0 #fff, var(--lift);
}

.stat-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.stat-num em {
  font-style: normal;
  background: var(--holo-text);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holoshift 7s linear infinite;
}

.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the two doors ---------- */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.door {
  position: relative;
  display: grid;
  align-content: end;
  gap: 14px;
  min-height: 264px;
  padding: 30px;
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.door-agency { background: linear-gradient(160deg, #FFFFFF, #FFE7F3 60%, #FFD5EA); --door-tint: var(--pink-deep); }
.door-market { background: linear-gradient(160deg, #FFFFFF, #E4F1FF 60%, #D3E7FF); --door-tint: var(--blue-deep); }

.door:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -30px color-mix(in srgb, var(--door-tint) 55%, transparent);
}

.door > * { position: relative; z-index: 1; }

.door-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--door-tint);
  text-transform: uppercase;
}

.door h3 { font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); }
.door p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 40ch; }

.door-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--door-tint);
  margin-top: 6px;
}

.door-go .arw { transition: transform 0.3s var(--ease); }
.door:hover .door-go .arw { transform: translateX(5px); }

/* decorative signal bars */
/* Anchored to the top of the card and tall enough to fill the space above
   the copy, so the box has no dead area. */
.door-bars {
  position: absolute;
  inset: 0 0 auto;
  height: 104px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 30px;
  z-index: 0;
}

.door-bars i {
  flex: 1;
  background: linear-gradient(180deg, transparent, var(--door-tint));
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
  animation: bar 2.6s ease-in-out infinite;
  opacity: 0.34;
}

@keyframes bar {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

/* ============================================================
   APPLY
   ============================================================ */

.apply-panel {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 420px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 30px;
  background: linear-gradient(150deg, #FFFFFF, var(--sky) 48%, var(--blush));
  padding: clamp(30px, 4vw, 52px);
  box-shadow: inset 0 1px 0 #fff, var(--lift-2);
}

.apply-title {
  font-size: clamp(30px, 4.2vw, 52px);
  color: var(--ink);
  margin-block: 14px 0;
}

.apply-copy .lede { margin-top: 16px; }

.apply-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.apply-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.apply-points li::before {
  content: "✓";
  color: var(--pink-deep);
  font-size: 13px;
  flex: none;
}

.apply-form {
  display: grid;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: 26px;
  box-shadow: var(--lift);
}

.apply-fine {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted-dim);
  text-align: center;
}

.apply-modal .apply-title,
.lease-modal .apply-title { font-size: 30px; margin-block: 10px 0; }

/* the domain being enquired about, shown above the field */
.lease-name {
  font-family: var(--mono);
  font-size: clamp(21px, 5vw, 26px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  word-break: break-all;
  margin: 14px 0 4px;
  padding: 12px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sky), var(--blush));
  border: 1px solid var(--line-soft);
}

.lease-name .tld { color: var(--blue-deep); }

.lease-modal .apply-form {
  box-shadow: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 18px;
}

.apply-modal .apply-form {
  box-shadow: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 20px;
}

/* success state swapped in after a successful submit */
.apply-done {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 22px 10px;
  animation: viewIn 0.45s var(--ease) both;
}

.apply-done-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--holo);
  background-size: 220% 100%;
  animation: holoshift 6s linear infinite;
  font-size: 24px;
  color: #fff;
}

.apply-done h3 { font-size: 23px; color: var(--ink); }
.apply-done p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 34ch; }

/* ============================================================
   AGENCY — one screen, four cards
   ============================================================ */

/* Sized so the screen plus the site footer together come to one viewport —
   the whole agency story is meant to land without scrolling. */
.agency-screen {
  min-height: calc(100svh - 146px);
  display: flex;
  align-items: center;
  padding-block: 96px 28px;
  position: relative;
  z-index: 1;
}

.agency-screen > .wrap {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  width: 100%;
}

.ag-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ag-title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  font-size: clamp(28px, 3.6vw, 46px);
  color: var(--ink);
  margin-top: 12px;
}

.ag-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ag-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  background: linear-gradient(170deg, #FFFFFF, var(--shell));
  padding: 20px;
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.ag-card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 1px 0 #fff, 0 30px 56px -32px rgba(201, 46, 114, 0.5);
}

.ag-visual {
  height: 132px;
  border-radius: 16px;
  background: linear-gradient(165deg, var(--sky), var(--blush));
  border: 1px solid var(--line-soft);
  overflow: hidden;
  position: relative;
  flex: none;
}

.ag-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin: 4px 0 0;
}

.ag-card h3 {
  font-size: 19px;
  line-height: 1.15;
  color: var(--ink);
}

.ag-card > p:not(.ag-num):not(.ag-metric) {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--ink-2);
}

.ag-metric {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ag-metric b { color: var(--pink-deep); font-weight: 500; }

.ag-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.ag-foot-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ag-foot-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- visual 1: mini chat --- */

.mini-chat {
  position: absolute;
  inset: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.mini-chat b {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  animation: bubbleIn 0.45s var(--ease) forwards;
}

@keyframes bubbleIn { to { opacity: 1; transform: none; } }

.mini-chat .in {
  background: #fff;
  color: var(--ink-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.mini-chat .out {
  background: linear-gradient(135deg, #FF9ECB, #FF6FA8);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.mini-chat .dots {
  align-self: flex-end;
  display: inline-flex;
  gap: 3px;
  padding: 9px 11px;
  background: #fff;
  border-radius: 13px 13px 4px 13px;
}

.mini-chat .dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pink);
  animation: typing 1.3s infinite;
}

.mini-chat .dots i:nth-child(2) { animation-delay: 0.18s; }
.mini-chat .dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

/* --- visual 2: somewhere warm --- */

.mini-beach { position: absolute; inset: 0; }
.mini-beach svg { width: 100%; height: 100%; display: block; }

.mini-beach .sea { fill: color-mix(in srgb, var(--blue) 45%, white); }
.mini-beach .sand { fill: color-mix(in srgb, var(--butter) 55%, white); }

.mini-beach .wave {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0.9;
  animation: drift 5s linear infinite;
}

.mini-beach .wave-2 { animation-duration: 7s; animation-direction: reverse; opacity: 0.6; }

@keyframes drift {
  to { stroke-dashoffset: -32; }
}

.mini-beach .sun {
  fill: var(--butter);
}

.mini-beach .sun-halo {
  fill: none;
  stroke: var(--butter);
  stroke-width: 2;
  transform-box: view-box;
  transform-origin: 198px 34px;
  animation: sunPulse 3.4s ease-out infinite;
}

@keyframes sunPulse {
  0%   { transform: scale(0.75); opacity: 0.85; }
  100% { transform: scale(1.9); opacity: 0; }
}

.mini-beach .trunk {
  fill: none;
  stroke: color-mix(in srgb, var(--pink-deep) 70%, #8a5a3a);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.mini-beach .fronds {
  transform-box: view-box;
  transform-origin: 30px 74px;
  animation: sway 4.2s ease-in-out infinite;
}

.mini-beach .frond {
  fill: none;
  stroke: var(--mint-deep);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.9;
}

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

.mini-beach .coconut { fill: color-mix(in srgb, var(--pink-deep) 60%, #8a5a3a); }

.mini-beach .plane path { fill: var(--pink-deep); }

.mini-beach .bird {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.55;
  animation: flap 3s ease-in-out infinite;
  transform-box: view-box;
}

@keyframes flap {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- visual 3: likes landing on a phone --- */

.mini-likes {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mini-likes .phone {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 100px;
  border-radius: 13px;
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--pink) 42%, transparent);
  box-shadow: 0 10px 20px -12px rgba(201, 46, 114, 0.75);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  padding: 7px 6px 7px;
}

.mini-likes .notch {
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pink) 38%, transparent);
  justify-self: center;
}

.mini-likes .post {
  border-radius: 8px;
  background: linear-gradient(150deg, var(--blush), var(--sky));
  border: 1px solid var(--line-soft);
}

.mini-likes .likebar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 1px;
}

.mini-likes .likebar i {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--pink-deep);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: beat 1.6s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.22); }
}

.mini-likes .likebar b {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* hearts drifting up past the phone */
.mini-likes .fly {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: linear-gradient(140deg, #FF9ECB, #FF3D8F);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  opacity: 0;
  animation: floatUp 3.6s ease-out infinite;
  pointer-events: none;
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translate(var(--x), 12px) scale(0.4) rotate(-8deg); }
  18%  { opacity: 1; }
  75%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(calc(var(--x) * 2.1), -66px) scale(1.05) rotate(10deg); }
}

/* --- visual 4: platform tiles --- */

.mini-social {
  position: absolute;
  inset: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-content: center;
}

.mini-social i {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  animation: tilePop 4s ease-in-out infinite;
}

@keyframes tilePop {
  0%, 100% { transform: none; box-shadow: none; }
  50%      { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(201, 46, 114, 0.7); }
}

/* ---------- process timeline (used by the marketplace) ---------- */

.timeline { display: grid; gap: 0; margin-top: 12px; }

.tl-step {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}

.tl-step:last-child { border-bottom: 1px solid var(--line-soft); }

.tl-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-deep);
  letter-spacing: 0.1em;
  padding-top: 4px;
}

.tl-body h4 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tl-body p { margin: 0; color: var(--ink-2); font-size: 15.5px; max-width: 62ch; }

/* ============================================================
   MARKETPLACE
   ============================================================ */

.market-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 28px;
  position: sticky;
  top: 70px;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  z-index: 20;
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; }

.filter {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.filter:hover { color: var(--blue-deep); border-color: color-mix(in srgb, var(--blue) 60%, transparent); }

.filter[aria-pressed="true"] {
  background: linear-gradient(135deg, #9AD3FF, #5FA9FF);
  border-color: transparent;
  color: #06305C;
  box-shadow: 0 6px 16px -8px rgba(95, 169, 255, 0.9);
}

.market-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.search { position: relative; display: flex; align-items: center; }

.search input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px 9px 36px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  width: 200px;
  transition: border-color 0.25s, width 0.35s var(--ease), box-shadow 0.25s;
}

.search input::placeholder { color: var(--muted-dim); }
.search input:focus {
  outline: none;
  border-color: var(--blue);
  width: 240px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent);
}

.search svg {
  position: absolute;
  left: 13px;
  width: 13px;
  height: 13px;
  stroke: var(--muted-dim);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
}

.search-clear:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); }

.sort-select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.sort-select:focus { outline: none; border-color: var(--blue); }

.count-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}

/* --- domain grid --- */

.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.domain-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: linear-gradient(170deg, #FFFFFF, var(--sky));
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: default;
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease), opacity 0.35s var(--ease);
}

.domain-card .dc-lease { margin-top: auto; }

.domain-card:hover,
.domain-card:focus-within {
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 20px 40px -28px rgba(32, 121, 214, 0.5);
}

.domain-card.is-leased {
  background: linear-gradient(170deg, #FFFFFF, #F4F1F7);
  opacity: 0.78;
}

.domain-card.is-leased:hover { opacity: 1; }

.dc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tier {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}

.tier-standard { color: var(--muted); border-color: var(--line); background: #fff; }
.tier-premium  { color: var(--blue-deep); border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: var(--sky); }
.tier-flagship { color: var(--lilac-deep); border-color: color-mix(in srgb, var(--lilac) 60%, transparent); background: var(--lilac-pale); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-dim);
  flex: none;
}

.status-available { color: var(--mint-deep); }
.status-available i { background: var(--mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 28%, transparent); }

.dc-name {
  font-family: var(--mono);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.2;
}

.dc-name .tld { color: var(--blue-deep); }

.dc-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.dc-price {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

.dc-price small {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-left: 3px;
}

.dc-live { text-align: right; display: grid; gap: 3px; }

.dc-live-num {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--mint-deep);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}

.dc-live-num.is-bump { color: var(--pink-deep); }

.dc-live-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

/* the hover chart */
.dc-chart {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease), margin-top 0.45s var(--ease);
  opacity: 0;
  margin-top: -14px;
}

.domain-card:hover .dc-chart,
.domain-card:focus-within .dc-chart,
.domain-card.is-open .dc-chart {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
}

.dc-chart-inner { overflow: hidden; min-height: 0; }

.dc-chart-frame {
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: #fff;
  padding: 12px 12px 8px;
  box-shadow: inset 0 1px 0 #fff;
}

.dc-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.dc-chart-head b { color: var(--ink); font-weight: 500; letter-spacing: 0.05em; }

.spark { width: 100%; height: 76px; display: block; overflow: visible; }
.spark-grid { stroke: var(--line-soft); stroke-width: 1; }

/* The line strokes itself in left to right, the fill rises underneath it,
   and the marker on today lands last and keeps pulsing. */
.spark-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.spark-area {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  opacity: 0;
}

.spark-tip, .spark-tip-ring { opacity: 0; }

.is-drawn .spark-line {
  transition: stroke-dashoffset 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  stroke-dashoffset: 0;
}

.is-drawn .spark-area {
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              opacity 0.5s ease 0.1s;
  transform: scaleY(1);
  opacity: 1;
}

.is-drawn .spark-tip {
  transition: opacity 0.4s ease 0.95s;
  opacity: 1;
}

.is-drawn .spark-tip-ring {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: tipPing 2.6s cubic-bezier(0, 0, 0.2, 1) 0.95s infinite;
}

@keyframes tipPing {
  0%   { transform: scale(0.55); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.is-drawn .spark-axis {
  animation: axisIn 0.5s ease 0.8s both;
}

@keyframes axisIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.spark-axis { opacity: 0; }

.spark-axis {
  font-family: var(--mono);
  font-size: 8px;
  fill: var(--muted-dim);
  letter-spacing: 0.1em;
}

.dc-lease {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}

.dc-lease:hover {
  background: linear-gradient(135deg, #9AD3FF, #5FA9FF);
  border-color: transparent;
  color: #06305C;
  box-shadow: 0 8px 20px -10px rgba(95, 169, 255, 0.95);
}

.dc-lease[disabled] { opacity: 0.45; cursor: not-allowed; }
.dc-lease[disabled]:hover { background: #fff; color: var(--ink-2); border-color: var(--line); box-shadow: none; }

/* empty + loading states */

.empty {
  border: 1.5px dashed color-mix(in srgb, var(--pink) 45%, transparent);
  border-radius: 22px;
  padding: 60px 30px;
  text-align: center;
  color: var(--ink-2);
  display: grid;
  gap: 10px;
  justify-items: center;
  background: linear-gradient(170deg, #fff, var(--blush));
}

.empty h3 { font-size: 24px; color: var(--ink); }
.empty p { margin: 0; max-width: 46ch; font-size: 15px; }

.skeleton {
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  height: 240px;
  background: linear-gradient(100deg, var(--white) 30%, var(--sky) 50%, var(--white) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  to { background-position: -220% 0; }
}

/* ---------- responsive ---------- */

/* Four across only holds on a wide screen. Below that the agency view is
   allowed to scroll rather than crushing the cards. */
@media (max-width: 1180px) {
  .ag-grid { grid-template-columns: repeat(2, 1fr); }
  .agency-screen { min-height: 0; padding-block: 120px 70px; }
}

@media (max-width: 980px) {
  .apply-panel { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .doors { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE
   Most traffic is on a phone, so the marketplace is built for
   touch first below this width: no hover anywhere, one column,
   and the traffic chart shown permanently instead of on hover.
   ============================================================ */

@media (max-width: 760px) {

  /* --- the search + filter bar --- */

  /* Full-bleed: the bar sits inside .wrap, so at its natural width the
     gutters stay uncovered and cards scroll visibly past either side of
     the search. Bleeding it to the viewport edges closes that gap. */
  .market-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 12px var(--gutter);
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--cream) 97%, transparent);
    box-shadow: 0 10px 20px -18px rgba(30, 42, 71, 0.55);
  }

  /* search first — it is what people reach for */
  .market-tools {
    order: -1;
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .search { flex: 1 1 auto; min-width: 0; }

  .search input,
  .search input:focus {
    width: 100%;
    height: 48px;
    padding-left: 44px;
    border-radius: 16px;
    font-size: 16px;      /* under 16px and iOS zooms the page on focus */
    letter-spacing: 0;
  }

  .search svg { left: 17px; width: 15px; height: 15px; }

  .sort-select {
    flex: 0 0 auto;
    max-width: 40%;
    height: 48px;
    border-radius: 16px;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 0 12px;
  }

  /* filter chips scroll sideways rather than wrapping to three rows */
  .filters {
    display: flex;
    flex-wrap: nowrap;
    /* Flex items default to min-width:auto, which refuses to shrink below
       the content width — without this the strip stretches the page
       sideways instead of scrolling. */
    min-width: 0;
    max-width: 100vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 8px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .filters::-webkit-scrollbar { display: none; }

  .filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    height: 40px;
    padding-inline: 18px;
    font-size: 11.5px;
  }

  .count-note { font-size: 10.5px; }

  /* --- cards --- */

  .domain-grid { grid-template-columns: 1fr; gap: 14px; }

  .domain-card {
    padding: 20px;
    border-radius: 24px;
  }

  /* The chart is the point of the card, and there is no hover to reveal it. */
  .dc-chart {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0;
  }

  .dc-chart-frame { padding: 12px 12px 6px; }
  .spark { height: 64px; }

  .dc-name { font-size: 25px; }
  .dc-price { font-size: 30px; }

  .dc-lease {
    height: 48px;
    font-size: 11.5px;
    border-radius: 16px;
  }

  /* the leased cards stay legible rather than washing out */
  .domain-card.is-leased { opacity: 1; }
  .domain-card.is-leased .dc-name,
  .domain-card.is-leased .dc-price { opacity: 0.6; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .masthead-inner { height: 62px; }
  .wordmark { font-size: 16px; }
  .wordmark span { display: none; }
  .switch-btn { padding: 9px 14px; font-size: 10px; letter-spacing: 0.1em; }
  .hero { padding-block: 104px 56px; }
  .market-bar { top: 62px; }
  .tl-step { grid-template-columns: 1fr; gap: 8px; }
  .stat { padding: 20px 18px; }
  .ag-grid { grid-template-columns: 1fr; }
  .ag-foot { flex-direction: column; align-items: stretch; }
  .ag-foot-cta { width: 100%; }
  .ag-foot-cta .btn { flex: 1; justify-content: center; height: 50px; }
  .apply-panel { padding: 26px 20px; border-radius: 26px; }
  .apply-form { padding: 20px; }
  .doors { gap: 14px; }
  .door { min-height: 218px; padding: 24px; }
  .door-bars { height: 82px; padding-inline: 24px; }

  /* comfortable thumb targets */
  .btn { padding: 15px 22px; }
  .solid-btn { padding: 16px 24px; }
  .dc-lease { height: 50px; }

  /* Apply gets the full width; the two secondary routes share a row, so
     the live readout still lands above the fold. */
  .hero-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero-cta .btn { justify-content: center; padding-inline: 12px; font-size: 11px; }
  .hero-cta .btn-solid { grid-column: 1 / -1; font-size: 12px; }
  .hero-cta .arw { display: none; }
  .hero-cta .btn-solid .arw { display: inline; }
}