/*
 * HeyHi homepage: the hero (the name said out loud, the voice ribbon and the product showcase), the product grid,
 * how we build, the about teaser and the closing invitation. Nothing here names a product: everything is laid out
 * for however many config/products.yml lists.
 */

/* ---------- Hero ---------- */
.hero {
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(72px, 7vw, 120px);
  background:
    radial-gradient(70% 60% at 86% -12%, color-mix(in srgb, var(--night-600) 88%, transparent), transparent 70%),
    radial-gradient(42% 46% at -6% -4%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 70%),
    radial-gradient(58% 46% at 62% 112%, color-mix(in srgb, var(--night-700) 92%, transparent), transparent 70%),
    var(--night-900);
}
/* A faint dot grid that fades out toward the edges */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(rgba(150, 192, 240, 0.075) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 62% at 50% 26%, #000 30%, transparent 80%);
  mask-image: radial-gradient(80% 62% at 50% 26%, #000 30%, transparent 80%);
}

/* The voice ribbon: the hero-ribbon controller places and sizes it from the word "AI.", so it has no box until then */
.hero__ribbon { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none; }
@media (max-width: 859px) { .hero__ribbon { display: none; } }

.hero__inner { display: grid; gap: clamp(36px, 3.6vw, 52px); }
.hero__head { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; }
/* The name keeps its own capitals here: "Hey" and "Hi" are the point */
.hero__eyebrow { text-transform: none; letter-spacing: 0.06em; font-size: 12px; }
.hero__ipa { color: var(--muted); }
.hero__line { display: block; }
.hero__ai { color: var(--signal); text-shadow: 0 0 48px color-mix(in srgb, var(--signal) 30%, transparent); }

.hero__body { display: grid; gap: 56px; align-items: center; }
.hero__text { display: grid; gap: clamp(26px, 2.8vw, 36px); justify-items: start; align-content: center; }
.hero__lead { max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__down { transform: rotate(90deg); }

@media (min-width: 960px) {
  .hero__body { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(40px, 5.2vw, 84px); }
}
@media (max-width: 480px) {
  .hero__actions { display: grid; width: 100%; }
}

/* ---------- The name, said out loud: Hey over A, Hi over I ---------- */
.say { position: relative; display: flex; gap: 1.15em; font-size: clamp(2rem, 1.3rem + 1.8vw, 3.1rem); }
.say__defs { position: absolute; width: 0; height: 0; }
.say__stop--voice { stop-color: var(--voice); }
.say__stop--signal { stop-color: var(--signal); }
.say__pair { display: grid; justify-items: center; gap: 0.22em; }
.say__word, .say__letter { font-stretch: 112%; letter-spacing: -0.035em; line-height: 0.9; }
.say__word { font-weight: 520; color: var(--fg); }
.say__letter { font-weight: 800; color: var(--signal); }
.say__marks { display: block; width: 0.86em; height: 0.68em; overflow: visible; }
.say__mark { fill: url(#say-sound); }
.say__mark:nth-child(even) { opacity: 0.6; }

/* ---------- Product showcase ---------- */
.showcase {
  position: relative; min-width: 0; padding: 8px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(140, 180, 230, 0.07), rgba(140, 180, 230, 0.02) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--line), 0 60px 120px -50px rgba(0, 3, 10, 0.9);
}
.showcase__bar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }

.showcase__tabs {
  position: relative; display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
}
.showcase__tabs::-webkit-scrollbar { display: none; }
/* Fades at whichever edge has more tabs past it */
.showcase__tabs[data-more~="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.showcase__tabs[data-more~="start"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.showcase__tabs[data-more~="start"][data-more~="end"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.showcase__tab {
  position: relative; flex: 1 0 auto; display: grid; justify-items: start; align-content: start; gap: 8px;
  padding: 12px 14px 16px; border: 0; border-radius: 18px; background: transparent; cursor: pointer; text-align: left;
  color: var(--muted); scroll-snap-align: start; transition: background-color 0.25s, color 0.25s;
}
.showcase__tab:hover { color: var(--fg); background: rgba(140, 180, 230, 0.045); }
.showcase__tab[aria-selected="true"] { --progress: 1; color: var(--fg); background: rgba(140, 180, 230, 0.085); }
.showcase__tab:focus-visible { outline-offset: -2px; }
.showcase__name { font-size: 14.5px; font-weight: 620; font-stretch: 104%; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.showcase__tab .chip { height: 21px; padding: 0 8px; font-size: 10.5px; }
/* How long until the next product: the chosen tab's track fills while the showcase turns, and stays full otherwise */
.showcase__progress { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.showcase__progress::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--signal);
  transform-origin: left center; transform: scaleX(var(--progress, 0));
}

.showcase__toggle {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin-right: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.showcase__toggle:hover { color: var(--fg); background: var(--surface-2); }
.showcase__icon { width: 12px; height: 12px; fill: currentColor; }
.showcase__toggle[data-state="playing"] .showcase__icon--play,
.showcase__toggle:not([data-state="playing"]) .showcase__icon--pause { display: none; }

/* Every panel shares one cell once the controller connects, so the showcase keeps the tallest one's height */
.showcase__stage { display: grid; }
.showcase__panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.showcase[data-enhanced] .showcase__panel {
  grid-area: 1 / 1;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.5s;
}
.showcase[data-enhanced] .showcase__panel:not(.is-active) { visibility: hidden; opacity: 0; transform: translateY(8px); }
.showcase[data-enhanced] .showcase__panel.is-active { transition-delay: 0s; }

/* The preview fills the panel, its content centred below its title bar */
.showcase .preview { display: flex; flex-direction: column; height: 100%; border-radius: 21px; padding: 20px 22px 24px; }
.showcase .preview > :last-child { margin-block: auto; }

.showcase__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 14px 10px; }
.showcase__tagline { flex: 1 1 240px; max-width: 34em; font-size: 15.5px; line-height: 1.45; color: var(--fg); }
.showcase__more { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 620; color: var(--fg); text-decoration: none; white-space: nowrap; }
.showcase__more .icon { color: var(--signal); transition: transform 0.25s var(--ease); }
.showcase__more:hover .icon { transform: translateX(3px); }

/* Tablets, where the showcase runs full width under the text: the words sit beside the preview instead of below it */
@media (min-width: 600px) and (max-width: 959px) {
  .showcase__panel { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .showcase__foot { flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 16px 20px 16px 28px; }
  .showcase__tagline { flex: none; font-size: 17px; }
}
@media (max-width: 520px) {
  .showcase { padding: 6px; border-radius: 24px; }
  .showcase .preview { padding: 16px 16px 18px; border-radius: 18px; }
  .showcase__foot { padding: 16px 10px 8px; }
}

/* ---------- Everything HeyHi makes ---------- */
/* Category filters, only once there are enough products to need them */
.product-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.product-filter__button {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer;
  font-size: 14px; font-weight: 580; font-stretch: 104%; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.product-filter__button:hover { border-color: var(--fg); }
.product-filter__button[aria-pressed="true"] { background: var(--night-900); border-color: var(--night-900); color: var(--night-text); }
.product-filter__count { font-family: var(--font-mono); font-stretch: var(--mono-w); font-size: 11px; color: var(--muted); }
.product-filter__button[aria-pressed="true"] .product-filter__count { color: var(--night-muted); }
/* A filterable card's wrapper leaves the card itself as the grid item, featured span and all */
.product-grid__item { display: contents; }

/* ---------- How we build ---------- */
.build { background: linear-gradient(180deg, var(--night-900), var(--night-850)); }
.principles { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.principle { display: grid; align-content: start; gap: 14px; padding: 28px 0 34px; border-top: 1px solid var(--line); }
.principle__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.principle__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--line); color: var(--accent-text);
}
.principle__icon .icon { width: 21px; height: 21px; }
.principle__index { font-size: 11.5px; letter-spacing: 0.08em; color: var(--faint); }
.principle__text { font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 30em; }
/* The first promise is the one people hear: it carries the brand's amber */
.principle:first-child .principle__icon { color: var(--signal); }

@media (min-width: 640px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); }
}
@media (min-width: 1100px) {
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; border-top: 1px solid var(--line); }
  .principle { padding: 40px 30px 8px; border-top: 0; border-left: 1px solid var(--line); }
  .principle:first-child { padding-left: 0; border-left: 0; }
  .principle:last-child { padding-right: 0; }
}

/* ---------- About: one company, every product branching from it ---------- */
.about-teaser__grid { display: grid; gap: 56px; align-items: center; }
.about-teaser__text { display: grid; gap: 22px; justify-items: start; }
.about-teaser__text .lead { max-width: 31em; }
.about-teaser__link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding-bottom: 4px;
  font-size: 16px; font-weight: 640; font-stretch: 104%; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.2s;
}
.about-teaser__link:hover { border-color: var(--fg); }
.about-teaser__link .icon { transition: transform 0.25s var(--ease); }
.about-teaser__link:hover .icon { transform: translateX(3px); }
@media (min-width: 960px) {
  .about-teaser__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); }
}

/* The name said out loud, large, on dark glass */
.about-teaser__say {
  display: grid; justify-items: center; gap: 22px; padding: clamp(40px, 6vw, 72px) 24px clamp(30px, 4vw, 44px);
  border-radius: var(--r-lg); background: radial-gradient(80% 70% at 50% 0%, var(--night-600), transparent 70%), var(--night-850);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px -40px rgba(0, 19, 42, 0.6);
}
.about-teaser__say .say { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); }
.about-teaser__ipa { font-size: 13px; letter-spacing: 0.06em; color: var(--voice); }
@media (max-width: 420px) {
  .family__branch { padding-left: 26px; }
  .family__branch::after, .family__branch:last-child::before { width: 18px; }
  .family__row { flex-wrap: wrap; gap: 8px 12px; }
}

/* ---------- Contact: say hi ---------- */
.contact {
  isolation: isolate; overflow: hidden;
  background:
    radial-gradient(46% 70% at 80% 50%, color-mix(in srgb, var(--night-600) 70%, transparent), transparent 72%),
    radial-gradient(40% 50% at 6% 100%, color-mix(in srgb, var(--signal) 6%, transparent), transparent 70%),
    var(--night-900);
}
.contact__grid { display: grid; gap: clamp(48px, 6vw, 80px); align-items: center; }
.contact__text { display: grid; gap: 26px; justify-items: start; }
.contact__title { margin-bottom: 0.08em; font-size: clamp(4.4rem, 1.2rem + 12vw, 11rem); font-stretch: 116%; line-height: 0.84; letter-spacing: -0.06em; }
.contact__hi { color: var(--signal); }
.contact__lead { max-width: 28em; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.contact__call .tnum { font-weight: 560; }

.contact__mark { position: relative; justify-self: center; width: min(62vw, 380px); color: var(--night-text); }
/* At rest, before it speaks or for visitors who prefer less motion, the mark holds the first moment of the sweep in
   10_base.css (each piece where its delay puts it at the start), so speaking picks up without a jump */
.contact__mark .mark-bit { opacity: 0.5; }
.contact__mark .mark-bit--10 { fill: var(--signal); opacity: 1; }
.contact__mark .mark-bit--9 { fill: color-mix(in srgb, var(--signal) 59%, var(--night-text)); opacity: 1; }
.contact__mark .mark-bit--6, .contact__mark .mark-bit--7 { opacity: 1; }
.contact__mark .mark-bit--4 { opacity: 0.7; }
.contact__mark .mark-bit--1, .contact__mark .mark-bit--2 { opacity: 0.56; }
/* A soft light behind the mark, warmest where it speaks */
.contact__mark::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--voice) 10%, transparent), color-mix(in srgb, var(--signal) 5%, transparent) 55%, transparent);
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .contact__mark { justify-self: end; width: min(100%, 380px); }
}
@media (max-width: 480px) {
  .contact__actions { display: grid; width: 100%; }
}