/* aidomains.ai — dark, editorial, a little theatrical.
   System fonts only: no webfont downloads, no third-party requests. */

:root {
  --bg: #0b0b0d;
  --bg-2: #111114;
  --bg-3: #18181c;
  --ink: #f3eee6;
  --ink-2: #c9c4bb;
  --muted: #8c877f;
  --rule: rgba(243, 238, 230, .12);
  --accent: #ff6a2b;
  --on-accent: #160a04;

  --serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, Palatino, Georgia, serif;
  --sans: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --wrap: 80rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Film grain over everything */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 1rem; }

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  margin: 0;
  font: 500 .95rem/1.2 var(--sans);
  color: var(--ink-2);
}

.dot {
  position: relative; flex: none;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent);
}
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { 70%, 100% { transform: scale(3); opacity: 0; } }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  transition: transform .25s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--ink); }
.btn-line { border-color: rgba(243, 238, 230, .32); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Header ---------- */

.top {
  position: fixed; inset: 0 0 auto; z-index: 60;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.top.is-scrolled {
  background: rgba(11, 11, 13, .72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem;
  text-decoration: none;
  font: 400 1.2rem/1 var(--serif);
}
.brand em { color: var(--accent); }
.brand-mark { width: 1.9rem; height: 1.9rem; flex: none; }

.top-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.top-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .95rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.top-link:hover { color: var(--ink); }
.top-cta {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  border: 1px solid rgba(243, 238, 230, .3); border-radius: 999px;
  font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.top-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

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

.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 7.5rem 0 6rem;
  overflow-x: clip; /* not y: the search results can hang below the hero */
  z-index: 3;
}
/* fade the edges into the page */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 60% 45%, transparent 30%, var(--bg) 95%),
    linear-gradient(to bottom, transparent 75%, var(--bg));
}

/* Field of names: rows of names drift behind the hero (app.js writes them) */
.field-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.field {
  position: absolute; inset: -35% -25%;
  display: flex; flex-direction: column; justify-content: center;
  transform: rotate(-9deg);
  font: 400 13px/2.35 var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
  color: rgba(243, 238, 230, .06);
}
.field em { font-style: normal; }
.field-row { display: flex; width: max-content; animation: drift var(--d, 140s) linear infinite var(--dir, normal); }
.field-row span { padding-right: 2.6em; }
@keyframes drift { to { transform: translateX(-50%); } }

/* the same field, bright, only visible in a circle around the cursor */
.field-lit .field { color: rgba(243, 238, 230, .6); }
.field-lit .field em { color: var(--glow, var(--accent)); }
.field-lit {
  -webkit-mask-image: radial-gradient(circle 250px at var(--mx, 72%) var(--my, 45%), #000 0%, rgba(0, 0, 0, .4) 42%, transparent 72%);
  mask-image: radial-gradient(circle 250px at var(--mx, 72%) var(--my, 45%), #000 0%, rgba(0, 0, 0, .4) 42%, transparent 72%);
}

.hero-glow {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #ff6a2b) 16%, transparent), transparent);
  transform: translate3d(var(--mx, 70vw), var(--my, 45vh), 0);
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero-copy { position: relative; z-index: 2; will-change: transform; } /* above the deck, so the search results can cover it on phones */

.hero-title {
  margin: 1.5rem 0 0;
  font: 400 clamp(3.1rem, 1.1rem + 5.4vw, 7rem)/.94 var(--serif);
  letter-spacing: -.03em;
}
.hero-title .ln { display: block; }
.hero-title em { color: var(--accent); }

.lede {
  margin: 1.9rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: .5rem; }
.trust li::before {
  content: ""; width: .95rem; height: .95rem; flex: none; border-radius: 50%;
  background: rgba(255, 106, 43, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ff6a2b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.2l2 2 4-4.4'/%3E%3C/svg%3E") center / 72% no-repeat;
}

.hero-own {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding: .6rem .6rem .6rem 1.2rem;
  border: 1px solid rgba(255, 106, 43, .45); border-radius: 999px;
  background: rgba(255, 106, 43, .08);
  text-decoration: none; color: var(--ink);
  transition: background-color .3s, border-color .3s;
}
.hero-own[hidden] { display: none; }
.hero-own:hover { background: rgba(255, 106, 43, .16); border-color: var(--accent); }
.hero-own b { font-weight: 600; }
.hero-own-cta { padding: .65rem 1.1rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; white-space: nowrap; }
.hero-own-cta::after { content: "\2197"; margin-left: .4rem; font-weight: 400; }

.hero-stage { position: relative; perspective: 1800px; width: 100%; max-width: 42rem; justify-self: end; }
.hero-stage::before { /* warm light behind the browser */
  content: ""; position: absolute; inset: 6% 2% 12%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #ff6a2b) 30%, transparent), transparent);
  filter: blur(30px);
}
.tilt { transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg)); }

/* Under the deck: the front name (a link to its page) and the only control that changes the deck */
.hero-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: 1.4rem 0 0 .2rem; }
.hero-name {
  display: inline-flex; align-items: center; gap: .6rem; min-width: 0; min-height: 2.75rem;
  color: var(--ink-2); font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.hero-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero-name b { color: var(--ink); font-weight: 600; }
.hero-name::after { content: "\2192"; flex: none; color: var(--muted); transition: transform .25s var(--ease), color .25s; }
.hero-name:hover b, .hero-name:hover::after { color: var(--accent); }
.hero-name:hover::after { transform: translateX(3px); }
.hero-next {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1.05rem;
  border: 1px solid rgba(243, 238, 230, .24); border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--ink-2); font: 600 .9rem/1 var(--sans);
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), color .2s, border-color .2s;
}
.hero-next::after { content: "\2192"; font-weight: 400; }
.hero-next:hover { color: var(--ink); border-color: rgba(243, 238, 230, .5); }

/* ---------- Hero search: the main way in ---------- */
.hero-search {
  position: relative; z-index: 5;
  display: flex; gap: .4rem; max-width: 34rem; margin-top: 2.2rem; padding: .35rem;
  border-radius: 999px;
  background: rgba(243, 238, 230, .07); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .16);
  transition: box-shadow .2s, background-color .2s;
}
.hero-search:focus-within { background: rgba(243, 238, 230, .1); box-shadow: inset 0 0 0 1.5px var(--accent); }
.hs-field { flex: 1; min-width: 0; display: flex; }
.hs-field input {
  width: 100%; min-height: 3rem; padding: 0 .8rem 0 2.8rem;
  border: 0; border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a29d94' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6L14 14'/%3E%3C/svg%3E") 1.1rem center / 1.1rem no-repeat;
  color: var(--ink); font: 400 1.1rem/1 var(--sans);
  -webkit-appearance: none; appearance: none;
}
.hs-field input::placeholder { color: var(--muted); }
.hs-field input:focus { outline: none; } /* the whole field lights up instead (:focus-within) */
.hs-field input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.hero-search .btn { flex: none; min-height: 3rem; padding: 0 1.4rem; }

/* The results: a frosted panel anchored to the field, so it reads as coming from it */
.hs-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem);
  padding: .4rem; border-radius: 20px;
  background: rgba(24, 24, 28, .97);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .12), inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(0, 0, 0, .95);
  transform-origin: 50% 0;
  animation: hsIn .14s ease-out;
}
@keyframes hsIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.hs-results[hidden] { display: none; }
.hs-results ul { margin: 0; padding: 0; list-style: none; }
.hs-results li a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: .35rem .9rem; border-radius: 14px;
  color: var(--ink); text-decoration: none;
}
.hs-results li a:hover, .hs-results li a:focus-visible { background: rgba(243, 238, 230, .09); outline: none; }
.hs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.25rem/1.2 var(--serif); letter-spacing: -.01em; }
.hs-name em { font-style: normal; color: var(--muted); }
.hs-results li a:hover .hs-name em, .hs-results li a:focus-visible .hs-name em { color: var(--accent); }
.hs-results .ct { flex: none; }
.hs-all {
  display: flex; align-items: center; width: 100%; min-height: 3rem; margin-top: .3rem; padding: 0 .9rem;
  border: 0; border-top: 1px solid var(--rule); border-radius: 0 0 14px 14px; background: none; cursor: pointer;
  color: var(--accent); font: 600 .95rem/1 var(--sans); text-align: left;
}
.hs-all::after { content: "\2192"; margin-left: .45rem; font-weight: 400; }
.hs-all:hover { color: var(--ink); }
.hs-none { margin: 0; padding: .8rem .9rem; color: var(--ink-2); }
.hs-none a { color: var(--accent); text-underline-offset: .2em; }

.link-quiet {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink-2); font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(243, 238, 230, .3); text-underline-offset: .25em;
  transition: color .2s, text-decoration-color .2s;
}
.link-quiet:hover { color: var(--ink); text-decoration-color: currentColor; }
.actions .link-quiet { padding: 0 .4rem; }
.hero-copy .trust { margin-top: 1.2rem; }

/* ---------- Browser frame ---------- */

/* Hero: sites cross-fade */

/* Showcase: sites stack like cards, moved by app.js in step with scrolling */

/* Pause everything that isn't on screen */

/* ---------- The concept websites (drawn by app.js) ---------- */

/* product card */

/* itinerary */

/* agent toggles */

/* chat */

/* charts */

/* shop */

/* alerts */

/* lesson */

/* art */

/* trends */

/* identity */

/* screener */

/* voice */

/* map */

/* ---------- Collection ---------- */

.collection { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }

.section-head { max-width: 54rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head h2 {
  margin: 0;
  font: 400 clamp(2.4rem, 1.3rem + 3.8vw, 5.2rem)/1.02 var(--serif);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.section-head h2 em, .contact h2 em { color: var(--accent); }

/* One name per screen: each row is tall, so only the current one is in view */
.names { container-type: inline-size; list-style: none; margin: 0; padding: 0 0 14vh; }

/* ---------- How to buy ---------- */

.buy { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--rule); background: linear-gradient(var(--bg), var(--bg-2)); }
.buy .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.buy .section-head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule); border-radius: 20px;
  overflow: hidden;
}
.steps li {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 19rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--bg);
  transition: background-color .4s;
}
.steps li::before { /* light that follows the cursor inside each card */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--x, -999px) var(--y, -999px), rgba(255, 106, 43, .14), transparent 60%);
}
.steps li:hover { background: var(--bg-3); }
.step-num {
  margin-bottom: auto;
  font: italic 400 clamp(4rem, 3rem + 3vw, 6.5rem)/.9 var(--serif);
  color: transparent; -webkit-text-stroke: 1px var(--accent);
}
.steps h3 { margin: 2.2rem 0 .6rem; font: 400 1.9rem/1.1 var(--serif); letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--ink-2); }
.steps a { padding-block: .75rem; color: var(--accent); text-underline-offset: .2em; } /* taller tap area, same look */

/* ---------- Contact ---------- */

.contact {
  position: relative; overflow: clip;
  padding: clamp(6rem, 12vw, 11rem) 0;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(255, 106, 43, .28), transparent 70%),
    var(--bg-2);
}
.contact h2 {
  margin: 0;
  font: 400 clamp(3rem, 1.4rem + 6.4vw, 8.5rem)/.95 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.contact-sub { max-width: 32rem; margin: 1.6rem auto 0; color: var(--ink-2); font-size: 1.12rem; text-wrap: balance; }
.big-mail {
  display: inline-block; margin-top: 1.9rem; padding: .34em 0 .2em;
  font: italic 400 clamp(1.7rem, 1rem + 2.8vw, 3.4rem)/1.1 var(--serif);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 2px no-repeat;
  transition: background-size .6s var(--ease), color .3s;
}
.big-mail:hover { background-size: 100% 2px; color: var(--accent); }
.contact .actions { justify-content: center; margin-top: 2.6rem; }

/* ---------- Footer ---------- */

.foot { padding: 2.5rem 0; border-top: 1px solid var(--rule); overflow: hidden; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; color: var(--muted); font-size: .95rem; }
.foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-underline-offset: .22em; }
.foot a:hover { color: var(--accent); }
/* ---------- Why it matters ---------- */

.why { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--rule); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.why-grid article { padding-top: 1.6rem; border-top: 1px solid var(--accent); }
.why-grid h3 { margin: 0; font: 400 clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.02em; }

.buy-alt { margin: 2rem 0 0; color: var(--muted); }
.buy-alt a { color: var(--ink); text-underline-offset: .22em; padding-block: .75rem; }
.buy-alt a:hover { color: var(--accent); }
.steps b { color: var(--ink); font-weight: 600; }

/* ---------- Smaller screens ---------- */

@media (max-width: 60em) {
  .hero { min-height: 0; padding: 7rem 0 5rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .hero-stage { justify-self: center; max-width: 36rem; }
  .tilt { --ry: 0deg; --rx: 0deg; }

  
  
  .names { padding: 0; }
  
  
  
  
  
  
  

  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li { min-height: 0; }
  .steps h3 { margin-top: 1.6rem; }
}

@media (max-width: 40em) {
  .top-link:not(.top-names) { display: none; } /* phones keep the way to every name */
  .top-nav { gap: .9rem; }
  .top-cta { padding: 0 .95rem; }
  .contact .actions .btn, .collection-more .btn { flex: 1 1 100%; }
  .actions .link-quiet { flex: 1 1 100%; justify-content: center; }
  .hide-sm { display: none; }
  
}

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

/* ======================================================================
   The names as brand cards: a shuffling deck in the hero and an organized
   grid below. No concept websites.
   ====================================================================== */

/* The hero's light takes on the color of the card in front */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #ff6a2b; }
.hero { --glow: #ff6a2b; transition: --glow 1.2s var(--ease); }

.deck {
  position: relative;
  aspect-ratio: 1.4;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dcard {
  container-type: inline-size; text-decoration: none;
  position: absolute; left: 0; bottom: 4%;
  width: 80%; aspect-ratio: 1.6;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4.4% 4.6%;
  overflow: hidden; border-radius: 22px;
  background: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--tac) 26%, transparent), transparent 60%), var(--tbg);
  color: var(--tfg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(0, 0, 0, .85);
  transform:
    translate3d(calc(var(--x, 0%) * var(--spread, 1)), calc(var(--y, 0%) * var(--spread, 1)), var(--z, 0px))
    rotate(calc(var(--r, 0deg) * var(--spread, 1)));
  transform-origin: 30% 100%;
  transition: transform .95s var(--ease), opacity .6s ease;
  will-change: transform;
}
.dcard::after { /* cards further back sit in shadow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #0b0b0d; opacity: var(--dim, 0);
  transition: opacity .95s var(--ease);
}
.deck.is-open { --spread: 1.45; } /* hovering fans the deck out */
.dcard.is-leaving { transition: transform .9s var(--ease), opacity .4s ease; }
.hero-caption[hidden] { display: none; }
.dc-top { display: flex; justify-content: space-between; gap: 1rem; font: 500 max(.78rem, 2.9cqw)/1.2 var(--sans); opacity: .7; }
.dc-logo {
  display: flex; align-items: center; gap: .3em;
  font-size: min(12.5cqw, calc(118cqw / var(--len))); font-weight: 600; line-height: 1; letter-spacing: -.03em;
  white-space: nowrap;
}
.dc-tag { max-width: 24ch; font-size: max(.95rem, 4.6cqw); line-height: 1.2; letter-spacing: -.01em; }
.dc-mail { align-self: flex-start; padding: max(.4rem, 1.6cqw) max(.7rem, 2.8cqw); border-radius: 999px; background: color-mix(in srgb, var(--tfg) 9%, transparent); font: 500 max(.7rem, 2.7cqw)/1 var(--mono); }
.dc-logo svg, .bc-logo svg { width: .9em; height: .9em; flex: none; fill: none; stroke: var(--tac); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dc-logo em, .bc-logo em { font-style: normal; color: var(--tac); }
.dc-mail [data-who] { color: var(--tac); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bc { border-radius: 20px; transition: transform .3s var(--ease), box-shadow .3s; }
.bc a {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  height: 100%; min-height: 12.5rem; padding: 1.4rem 1.4rem 1.35rem;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--tac) 24%, transparent), transparent 60%), var(--tbg);
  color: var(--tfg); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-tap-highlight-color: transparent;
}
.bc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bc-logo {
  display: flex; align-items: center; gap: .3em; margin: 0;
  font-size: min(2.2rem, calc(125cqw / var(--len))); font-weight: 600; line-height: 1; letter-spacing: -.025em;
  white-space: nowrap;
}
.bc-tag { margin: 0; max-width: 22ch; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .bc:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
}
.bc:active { transform: scale(.98); transition-duration: .1s; }
.collection-more { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

@media (min-width: 40em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones: the highlights become a swipeable shelf (the next card peeks in) */
@media (max-width: 39.99em) {
  .cards {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cards::-webkit-scrollbar { display: none; }
  .cards > .bc { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ======================================================================
   Every name: the full list (homepage and /domains/), plus the pages
   made for each name and each category by scripts/build_pages.py.
   ====================================================================== */

/* ---------- The full list: every name visible, most valuable first ----------
   Nothing is folded away. On bigger screens a bar floats over the list (search, a category menu and a
   switch that jumps between the tiers and follows the scroll) and turns to frosted glass once pinned.
   On phones the tier titles stay pinned instead, like section headers in an iPhone list.
   Each name carries its category's colour as a dot; "Browse by category" at the end is the key. */
:root { --bar-top: calc(4.75rem + 1px); } /* the height of the site header */

.dir { padding: clamp(5rem, 10vw, 9rem) 0; border-top: 1px solid var(--rule); }

.dir-bar {
  position: sticky; top: var(--bar-top); z-index: 40; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem); padding: .75rem 0;
}
.dir-bar::before { /* the material: full width, shown once the bar is pinned */
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: rgba(13, 13, 16, .74);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 rgba(243, 238, 230, .07), 0 22px 32px -26px rgba(0, 0, 0, .95); /* a soft edge, not a hard rule */
  opacity: 0; transition: opacity .25s ease;
}
.dir-bar.is-stuck::before { opacity: 1; }

.dir-find { flex: 1 1 26rem; display: flex; gap: .6rem; min-width: 0; }
.dir-find[hidden] { display: none; }
.dir-search { position: relative; flex: 1 1 auto; min-width: 0; }
.dir-search input {
  width: 100%; min-height: 2.75rem; padding: 0 2.75rem 0 2.6rem;
  border: 0; border-radius: 999px;
  background: rgba(243, 238, 230, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a29d94' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6L14 14'/%3E%3C/svg%3E") 1rem center / 1rem no-repeat;
  box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09);
  color: var(--ink); font: 400 1rem/1 var(--sans);
  -webkit-appearance: none; appearance: none;
  transition: box-shadow .2s, background-color .2s;
}
.dir-search input::placeholder { color: var(--muted); }
.dir-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.dir-search input:focus { outline: none; background-color: rgba(243, 238, 230, .1); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dir-clear {
  position: absolute; top: 50%; right: .4rem; width: 2rem; height: 2rem; margin-top: -1rem;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(243, 238, 230, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23f3eee6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 2l6 6M8 2L2 8'/%3E%3C/svg%3E") center / .62rem no-repeat;
  transition: transform .1s ease-out, background-color .2s;
}
.dir-clear::before { content: ""; position: absolute; inset: -.4rem; } /* a finger-sized target */
.dir-clear[hidden] { display: none; }
.dir-clear:hover { background-color: rgba(243, 238, 230, .26); }
.dir-clear:active { transform: scale(.88); }

.dir-cat { flex: 0 1 14rem; min-width: 0; }
.dir-cat select {
  width: 100%; min-height: 2.75rem; padding: 0 2.4rem 0 1.1rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(243, 238, 230, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a29d94' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5'/%3E%3C/svg%3E") right 1rem center / .72rem no-repeat;
  box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09);
  color: var(--ink); font: 500 .95rem/1 var(--sans); color-scheme: dark;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
  transition: box-shadow .2s, background-color .2s;
}
.dir-cat select:hover { background-color: rgba(243, 238, 230, .1); }
.dir-cat select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }

.seg {
  position: relative; isolation: isolate;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 999px;
  background: rgba(243, 238, 230, .07); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .09);
}
.seg-item {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.75rem; padding: 0 1.05rem; border-radius: 999px;
  color: var(--ink-2); font: 600 .9rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, opacity .2s, transform .1s ease-out;
}
.seg-item span { font: 500 .8rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .2s; }
.seg-item:hover { color: var(--ink); }
.seg-item[aria-current="true"] { color: var(--ink); }
.seg-item[aria-current="true"] span { color: var(--accent); }
.seg-item[aria-disabled="true"] { opacity: .35; cursor: default; }
.seg-item:active { transform: scale(.95); }
.seg-thumb {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px;
  background: rgba(243, 238, 230, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .35);
  will-change: transform;
}
.dir-count { margin: 0 0 0 auto; font: 500 .9rem/1 var(--sans); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tiers: always open */
.tier { scroll-margin-top: calc(var(--bar-top) + 5.5rem); }
.tier + .tier { margin-top: clamp(3rem, 6vw, 4.5rem); }
.tier[hidden] { display: none; }
.tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: 0 0 1.25rem; }
.tier-name { margin: 0; font: 400 clamp(2rem, 1.4rem + 1.8vw, 2.9rem)/1 var(--serif); letter-spacing: -.025em; }
.tier-flagship .tier-name { color: var(--accent); font-style: italic; }
.tier-meta { margin: 0; color: var(--ink-2); font-size: .98rem; }
.tier-meta span { margin-right: .7rem; font: 600 .9rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }

.names { display: grid; margin: 0; padding: 0; list-style: none; }
.names li[hidden] { display: none; }
.names a {
  container-type: inline-size;
  display: grid; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out, box-shadow .25s, background-color .25s;
}
.names a:active { transform: scale(.97); } /* respond on the press itself */
.rk { font: 500 .78rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.nm { /* one line, always: long names get slightly smaller instead of breaking */
  min-width: 0; white-space: nowrap;
  font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
  font-size: min(var(--size, 1.12rem), calc(var(--fit, 150cqw) / var(--len, 12)));
  overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.nm em { font-style: normal; color: var(--muted); transition: color .2s; }
.ct { display: flex; align-items: center; gap: .45rem; min-width: 0; font: 500 .8rem/1.2 var(--sans); color: var(--muted); }
.ct i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.ct span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.names a:hover .nm, .names a:hover .nm em { color: var(--accent); }

/* Flagship: cards, tinted by their category */
.names-flagship { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.names-flagship a {
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rk ct" "nm nm";
  align-items: center; gap: 1.15rem .8rem;
  min-height: 7.4rem; padding: 1.1rem 1.25rem 1.3rem; border-radius: 18px;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .1), inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 40px -30px rgba(0, 0, 0, .95);
}
.names-flagship .rk { grid-area: rk; color: var(--accent); }
.names-flagship .ct { grid-area: ct; justify-self: end; }
.names-flagship .nm { grid-area: nm; --size: 1.9rem; --fit: 150cqw; }
.names-flagship a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 65%, transparent), 0 26px 44px -30px rgba(0, 0, 0, .95); }

/* Prime: tiles */
.names-prime { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .55rem; }
.names-prime a {
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rk ct" "nm nm";
  align-items: center; gap: .6rem .7rem;
  padding: .85rem 1rem .95rem; border-radius: 14px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .08);
}
.names-prime .rk { grid-area: rk; }
.names-prime .ct { grid-area: ct; justify-self: end; }
.names-prime .nm { grid-area: nm; --size: 1.3rem; --fit: 148cqw; }
.names-prime a:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }

/* Select: a clean ranked list; the colour dot shows the category */
.names-select { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: clamp(1rem, 2.4vw, 2rem); }
.names-select a {
  grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; column-gap: .55rem;
  min-height: 2.95rem; border-bottom: 1px solid rgba(243, 238, 230, .07);
}
.names-select .nm { --size: 1.08rem; --fit: 126cqw; }
.names-select .ct span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still read out */

.dir-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: 1.5rem 0; color: var(--ink-2); }
.dir-empty[hidden] { display: none; }
.dir-empty p { margin: 0; }
.dir-empty a { color: var(--accent); text-underline-offset: .2em; }

/* Browse by category: the key to the colour dots, and a way into each category page */
.browse { margin-top: clamp(3.5rem, 7vw, 5rem); }
.browse-title { margin: 0 0 1.2rem; font: 400 clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--serif); letter-spacing: -.02em; }
.browse-title em { color: var(--accent); }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.browse-grid a {
  display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .5rem 1.1rem;
  border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .08);
  color: var(--ink-2); font-size: .95rem; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease-out, box-shadow .25s, color .25s, background-color .25s;
}
.browse-grid i { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.browse-grid span { flex: 1; min-width: 0; line-height: 1.25; } /* long names wrap rather than get cut off */
.browse-grid b { font: 500 .74rem/1 var(--mono); color: var(--muted); }
.browse-grid a::after { content: "\2192"; color: var(--muted); transition: transform .25s var(--ease), color .25s; }
.browse-grid a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.browse-grid a:hover::after { color: var(--c); transform: translateX(2px); }
.browse-grid a:active { transform: scale(.97); }
.browse-grid a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--c); }

@media (max-width: 40em) {
  .dir-bar { position: static; padding: 0; } /* phones pin the tier titles instead */
  .dir-bar::before { display: none; }
  .dir-find { flex-basis: 100%; flex-direction: column; }
  .dir-cat { flex: none; }
  .seg { width: 100%; }
  .seg-item { padding: 0 .5rem; }
  .dir-count { margin: 0; }

  .tier { scroll-margin-top: var(--bar-top); }
  .tier-head {
    position: sticky; top: var(--bar-top); z-index: 30; isolation: isolate;
    margin: 0 0 .75rem; padding: .75rem 0 .65rem;
  }
  .tier-head::before {
    content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
    background: rgba(13, 13, 16, .8);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 1px 0 rgba(243, 238, 230, .07), 0 18px 26px -22px rgba(0, 0, 0, .95);
  }
  .tier-name { font-size: 1.75rem; }
  .tier-meta { font-size: .88rem; }

  .names-flagship { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .names-flagship a { min-height: 6.2rem; padding: .85rem .9rem 1rem; gap: .9rem .5rem; border-radius: 16px; }
  .names-flagship .nm { --size: 1.5rem; }
  .names-prime { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .names-prime .nm { --size: 1.15rem; }
  .names-flagship .ct span, .names-prime .ct span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .names-select { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; }
  .names-select a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rk ct" "nm nm"; row-gap: .35rem; min-height: 0; padding: .6rem 0 .65rem; }
  .names-select .rk { grid-area: rk; }
  .names-select .ct { grid-area: ct; }
  .names-select .nm { grid-area: nm; --size: 1.06rem; --fit: 178cqw; }

  .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .browse-grid a { gap: .55rem; padding: .55rem .8rem; font-size: .9rem; }
  .browse-grid a::after { display: none; }
}

/* ---------- Pages for each name and each category ---------- */
.page-main { padding: clamp(6.5rem, 11vw, 8.5rem) 0 0; }
.page-main > .wrap:last-child { padding-bottom: clamp(4rem, 8vw, 6rem); }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .65rem;
  margin: 0 0 clamp(1.4rem, 4vw, 2.4rem); padding: 0; list-style: none;
  font: 500 .88rem/1.2 var(--sans); color: var(--muted);
}
.crumbs li { display: inline-flex; align-items: center; gap: .65rem; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

.dp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.dp-copy { container-type: inline-size; }
.dp-title {
  margin: 1.3rem 0 0;
  font: 400 clamp(1.8rem, min(1.2rem + 5.2vw, 190cqw / var(--len, 10)), 6.4rem)/.95 var(--serif);
  letter-spacing: -.035em; overflow-wrap: anywhere;
}
.dp-title em, .cp-title em, .dp-h2 em, .dp-cta h2 em { color: var(--accent); }
.dp-lede { margin: 1.6rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.22rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.dp-lede b { color: var(--ink); font-weight: 600; }
.dp-idea { margin: 1.5rem 0 0; max-width: 34rem; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid var(--accent); color: var(--ink-2); line-height: 1.55; }
.dp-idea b { display: block; margin-bottom: .45rem; font: 600 .9rem/1.2 var(--sans); color: var(--accent); }
.dp-copy .actions { margin-top: 2.2rem; }
.btn-arrow::after { content: "\2197"; margin-left: .45rem; font-weight: 400; }

.dp-stage { perspective: 1600px; }
.dp-card {
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; max-width: 36rem; margin-left: auto; aspect-ratio: 1.6;
  padding: 5.5% 6%;
  border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--tac) 26%, transparent), transparent 60%), var(--tbg);
  color: var(--tfg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 100px -40px rgba(0, 0, 0, .9), 0 40px 140px -60px var(--tac);
  transform: rotateY(-8deg) rotateX(4deg);
}

.dp-section { padding: clamp(4rem, 8vw, 6.5rem) 0 0; }
.dp-h2 { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); font: 400 clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem)/1.05 var(--serif); letter-spacing: -.022em; text-wrap: balance; overflow-wrap: anywhere; }
.steps-sm li { min-height: 0; padding: clamp(1.4rem, 2.6vw, 2rem); }
.steps-sm .step-num { margin-bottom: 1.4rem; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); }
.steps-sm h3 { margin: 0 0 .5rem; font-size: 1.55rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.tile {
  container-type: inline-size;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.6rem; padding: .75rem 1.1rem;
  border: 1px solid var(--rule); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
  text-decoration: none;
  transition: border-color .3s, transform .3s var(--ease);
}
.tile-name { /* one line, always: long names get slightly smaller instead of breaking */
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 min(var(--tile-size, 1.2rem), calc(150cqw / var(--len, 12)))/1.25 var(--serif); letter-spacing: -.01em;
}
.tile-name em { font-style: normal; color: var(--muted); transition: color .3s; }
.tile-go { flex: none; color: var(--muted); transition: transform .3s var(--ease), color .3s; }
.tile:hover { border-color: color-mix(in srgb, var(--tac, var(--accent)) 65%, transparent); transform: translateY(-2px); }
.tile:hover .tile-name em, .tile:hover .tile-go { color: var(--tac, var(--accent)); }
.tile:hover .tile-go { transform: translateX(3px); }
.tiles-lg .tile { min-height: 4.6rem; }
.tiles-lg .tile-name { --tile-size: 1.4rem; }
.dp-links { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin: 1.6rem 0 0; }
.dp-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-underline-offset: .22em; }
.dp-links a:hover { color: var(--accent); }

.dp-cta {
  margin-top: clamp(4.5rem, 9vw, 7rem); padding: clamp(4rem, 8vw, 6.5rem) 0;
  text-align: center; border-top: 1px solid var(--rule);
  background: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(255, 106, 43, .24), transparent 70%), var(--bg-2);
}
.dp-cta h2 { margin: 0; font: 400 clamp(1.9rem, 1.2rem + 4vw, 4.6rem)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; overflow-wrap: anywhere; }
.dp-cta p { max-width: 32rem; margin: 1.2rem auto 0; color: var(--ink-2); }
.dp-cta p a { color: var(--ink); text-underline-offset: .22em; }
.dp-cta .actions { justify-content: center; margin-top: 2rem; }

.cp-head { max-width: 52rem; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.cp-title { margin: 1.3rem 0 0; font: 400 clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem)/1 var(--serif); letter-spacing: -.032em; text-wrap: balance; }
.cp-lede { margin: 1.4rem 0 0; max-width: 38rem; font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); color: var(--ink-2); text-wrap: pretty; }
.cp-other { padding: clamp(4rem, 8vw, 6rem) 0 0; }
.nf { padding: clamp(2rem, 6vw, 5rem) 0 clamp(2rem, 6vw, 4rem); }
.nf .actions { margin-top: 2rem; }

@media (max-width: 60em) {
  .dp-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .dp-card { margin: 0 auto; max-width: 32rem; transform: none; }
}
@media (max-width: 40em) {
  .dp-copy .actions .btn, .dp-cta .actions .btn, .nf .actions .btn { flex: 1 1 100%; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Feel: respond on the press, keep the way to buy within reach on phones,
   and honour the reduced-motion, reduced-transparency and contrast settings.
   ====================================================================== */

/* Respond the instant something is pressed, not when it's released */
.btn:active, .top-cta:active, .hero-next:active, .tile:active, .dp-links a:active, .crumbs a:active { transform: scale(.97); transition-duration: .1s; }

/* Name pages on phones: a frosted bar with the main button rises from the bottom (site/page.js) */
.dock { display: none; }
@media (max-width: 60em) {
  .dock {
    display: block; position: fixed; inset: auto 0 0; z-index: 65;
    padding: .7rem max(var(--gutter), env(safe-area-inset-right, 0px)) calc(.7rem + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: rgba(17, 17, 20, .76);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(243, 238, 230, .1), 0 -18px 30px -24px rgba(0, 0, 0, .95);
    transform: translate3d(0, 110%, 0); visibility: hidden;
    transition: transform .42s cubic-bezier(.2, .9, .25, 1), visibility 0s linear .42s; /* leaves the way it came */
  }
  .dock.is-on { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.2, .9, .25, 1), visibility 0s; }
  .dock-inner { display: flex; align-items: center; gap: 1rem; max-width: 36rem; margin: 0 auto; }
  .dock-name { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.3rem/1.2 var(--serif); letter-spacing: -.015em; }
  .dock-name em { font-style: normal; color: var(--accent); }
  .dock .btn { flex: none; min-height: 2.9rem; padding: 0 1.2rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dock, .dock.is-on { transform: none; transition: opacity .2s ease, visibility 0s; }
  .dock { opacity: 0; }
  .dock.is-on { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .top.is-scrolled, .dir-bar::before, .tier-head::before, .dock { background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .names-flagship a, .names-prime a, .browse-grid a, .seg, .dir-search input, .dir-cat select { box-shadow: inset 0 0 0 1px rgba(243, 238, 230, .55); }
  .rk, .nm em, .ct, .tier-meta span, .dir-count, .seg-item span { color: var(--ink-2); }
}