/* CamCore Domains (/domains) and the Overview teaser — built on the v3 design system
   (tokens, .page-panel, .button, .eyebrow, .section-head, .policy-list, .state-card) so
   the page reads as part of the same shell. documentShell loads this sheet only on the
   domains and overview routes. Every colour is a v3 token: no literals are added here.
   The header's .nav-new badge lives in v3.css because the header is on every route. */

/* Overview teaser ---------------------------------------------------------- */
.home-domains{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:40px;margin-top:40px;padding:34px 36px}
.home-domains h2{margin:0;font-size:clamp(2rem,3.6vw,3rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.home-domains h2 span{color:transparent;background:linear-gradient(110deg,var(--cloud) 0,var(--brand-warm) 38%,var(--brand-bright) 86%);background-clip:text;-webkit-background-clip:text}
.home-domains>div>p:not(.eyebrow){max-width:560px;margin:14px 0 0;color:var(--muted);font-size:.88rem;line-height:1.65}
.home-domains .domain-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px}
.home-domains .domain-cta .arrow{margin-left:0}

/* Search form (shared by the Overview teaser and the /domains hero) --------- */
.domain-search label{display:block;margin:0 0 8px;color:var(--quiet);font-size:.72rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.domain-search-row{display:flex;gap:9px}
.domain-search input{flex:1 1 auto;min-width:0;height:50px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.92rem;outline:0}
.domain-search input::placeholder{color:var(--quiet);opacity:1}
.domain-search input:focus-visible{border-color:var(--brand-bright);outline:3px solid var(--brand-bright);outline-offset:2px}
.domain-search .button{flex:0 0 auto;height:50px;min-height:50px;padding:0 20px}
.domain-search-note{margin:10px 0 0;color:var(--quiet);font-size:.74rem;line-height:1.55}
.domain-search-note a{color:var(--cyan);font-weight:820}

/* Store-pending states: the search form and every store call to action are delivered
   disabled while CAMCORE_DOMAIN_STORE_URL is unset. No opacity, so text stays legible,
   and the control border stays --line-strong (scripts/test-control-border-contrast.mjs). */
.domain-search input:disabled{background:var(--elev-04);color:var(--quiet);cursor:not-allowed}
.domain-search .button:disabled,.button[aria-disabled="true"]{background:var(--elev-04);color:var(--muted);cursor:not-allowed}
.domain-search .button:disabled:hover,.button[aria-disabled="true"]:hover,.button[aria-disabled="true"]:focus-visible{transform:none;border-color:var(--line-strong);background:var(--elev-04)}

/* /domains hero card --------------------------------------------------------- */
.domain-search-card{display:flex;flex-direction:column;gap:14px}
.domain-search-card .state-card-top{margin-bottom:2px}
.domain-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.domain-chips li{display:inline-flex;align-items:center;min-height:31px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--elev-04);color:var(--muted);font-size:.72rem;font-weight:850}
.domain-search-card .microcopy{margin:0}

/* Sections ------------------------------------------------------------------ */
.domain-section{margin:0 0 62px;scroll-margin-top:105px}
.domain-section .section-head{align-items:flex-end}
.domain-section .section-head h2{max-width:720px}

/* Popular extensions */
.domain-ext-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.domain-ext-card{position:relative;display:flex;flex-direction:column;min-height:210px;padding:20px;border:1px solid var(--line);border-radius:17px;background:var(--elev-04);transition:transform .16s ease,border-color .16s ease}
.domain-ext-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.domain-ext-card.popular{border-color:var(--line-strong);background:radial-gradient(circle at 100% 0,var(--tint-coral-07),transparent 46%),linear-gradient(145deg,var(--elev-06),var(--elev-03))}
.domain-ext-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.domain-ext-index{color:var(--quiet);font-size:.72rem;font-weight:900}
.domain-ext-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border:1px solid var(--line-strong);border-radius:999px;background:var(--tint-coral-12);color:var(--brand-warm);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.domain-ext-card h3{margin:22px 0 8px;font-size:1.35rem;letter-spacing:-.035em}
.domain-ext-card p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.58}
.domain-ext-card .domain-ext-price{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:16px;color:var(--text)}
.domain-ext-price strong{font-size:1.15rem;letter-spacing:-.03em}
.domain-ext-price span{color:var(--quiet);font-size:.74rem;font-weight:820}

/* How it works */
.domain-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.domain-step{display:flex;gap:14px;align-items:flex-start;padding:22px}
.domain-step>span{display:grid;flex:none;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:11px;background:var(--tint-coral-14);color:var(--cyan);font-size:.82rem;font-weight:950}
.domain-step h3{margin:6px 0 6px;font-size:1.05rem}
.domain-step p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6}

/* Better together */
.domain-together{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 28px}
.domain-together h2{margin:0 0 7px;font-size:1.45rem;letter-spacing:-.03em}
.domain-together p:not(.eyebrow){max-width:760px;margin:0;color:var(--muted);font-size:.8rem;line-height:1.7}
.domain-together .button-row{flex:0 0 auto;margin-top:0}

/* FAQ, in the .policy-list layout */
.domain-faq-list h3{margin:0 0 5px;font-size:1rem}
.domain-faq-list p a{color:var(--cyan);font-weight:820}

/* Breakpoints match v3.css ---------------------------------------------------- */
@media(max-width:1180px){
  .home-domains{grid-template-columns:1fr;gap:24px}
  .domain-ext-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .domain-steps{grid-template-columns:1fr}
  .domain-together{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  .home-domains{margin-top:28px;padding:24px 20px}
  .domain-section{margin-bottom:44px}
  .domain-search-row{flex-direction:column}
  .domain-search .button{width:100%}
  .domain-ext-grid{grid-template-columns:1fr}
  .domain-together{padding:22px 20px}
}