/* Splash AI card: the strip at the top of the home page search and of every product page.
   The whole card opens Splash AI (the [data-splash-ai] button, handled in shared-chrome.js).
   Same glow as the Splash AI rows in Explore, Help and the account menu: orange top left,
   white in the middle, red-orange bottom left, lime bottom right. */
.sn-ai-card{
  --sn-ai-glow:radial-gradient(60% 150% at 0% 0%,rgba(255,168,60,.34),transparent 62%),
    radial-gradient(55% 130% at 50% 0%,rgba(255,255,255,.10),transparent 70%),
    radial-gradient(50% 130% at 100% 115%,rgba(198,255,61,.22),transparent 68%);
  --sn-ai-glow-on:radial-gradient(60% 150% at 0% 0%,rgba(255,168,60,.42),transparent 62%),
    radial-gradient(55% 130% at 50% 0%,rgba(255,255,255,.14),transparent 70%),
    radial-gradient(50% 130% at 100% 115%,rgba(198,255,61,.28),transparent 68%);
  position:relative;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:min(880px,100%);
  margin:0 auto 44px;
  padding:12px 18px 12px 12px;
  border:1px solid #000;
  border-radius:12px;
  background:var(--sn-ai-glow),#232427;
  color:#f9f9f9;
  text-align:left;
  font-family:inherit;
  transition:background .15s;
}
.sn-ai-card:hover,.sn-ai-card:focus-within{background:var(--sn-ai-glow-on),#2f3033}
.sn-ai-tile{display:grid;place-items:center;box-sizing:border-box;width:46px;height:46px;border:1px solid #000;border-radius:6px;background:#474749}
.sn-ai-tile img{width:28px;height:28px;display:block}
.sn-ai-text{min-width:0}
.sn-ai-card .sn-ai-title{font-family:inherit;margin:0;font-size:clamp(15px,4.4vw,18px);line-height:1.3;font-weight:700;color:#f9f9f9;letter-spacing:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-ai-card .sn-ai-title--brand{font-size:clamp(14px,4.2vw,17px);letter-spacing:.04em}
.sn-ai-card .sn-ai-sub{font-family:inherit;margin:2px 0 0;font-size:14px;line-height:1.4;color:#c9c9cb}
/* The short one-line H2 under "Splash AI" */
.sn-ai-card .sn-ai-line{margin:6px 0 0;font-family:inherit;font-size:clamp(12px,3.4vw,14px);font-weight:400;line-height:1.35;color:#d4d4d9;letter-spacing:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-ai-card .sn-ai-go{
  display:inline-flex;align-items:center;gap:8px;
  min-height:34px;padding:4px 0;border:0;background:none;
  color:#f9f9f9;font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;
}
.sn-ai-go svg{width:18px;height:18px;flex:none}
/* The button covers the whole card, so anywhere on it opens Splash AI */
.sn-ai-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sn-ai-go:focus-visible{outline:none}
.sn-ai-card:has(.sn-ai-go:focus-visible){outline:2px solid #c6ff3d;outline-offset:3px}
/* Compact version in the home page search, where the Register/Transfer switch used to be */
.sn-ai-card--compact{width:min(560px,100%);margin:0 auto 38px;padding:10px 16px 10px 10px;gap:12px}
.sn-ai-card--compact .sn-ai-tile{width:42px;height:42px}
.sn-ai-card--compact .sn-ai-tile img{width:26px;height:26px}
@media (max-width:560px){
  .sn-ai-card{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .sn-ai-card .sn-ai-go{grid-column:2;justify-self:start;min-height:28px;padding:0}
}
@media (prefers-reduced-motion:reduce){.sn-ai-card{transition:none}}
/* Inside a product page hero (.pp-stage, a centred full-height column): the card sits just
   under the nav with the hero's background behind it, and the hero content stays centred
   in the space below (the two auto margins share the free space). */
.pp-stage>.sn-ai-card{margin:-40px auto auto;width:min(880px,100%)}
.pp-stage>.sn-ai-card+*{margin-top:auto;padding-top:36px}
@media (max-width:560px){.pp-stage>.sn-ai-card{margin-top:-24px}}
/* Domain registration and transfer: their search hero fills the screen, which turned the
   free space into a big gap under the card. There it sizes to its content instead, so the
   gap matches the other product pages. */
.pp-stage.pp-stage-search:has(>.sn-ai-card){min-height:0}
.pp-stage-search>.sn-ai-card{margin-bottom:0}
.pp-stage-search>.sn-ai-card+*{margin-top:0}