/* ==========================================================================
   FORM & FRAME — Domains page
   hero + search · extensions · brand · stack · email · transfer · ownership ·
   renewals · management dashboard · bundles · pricing table
   ========================================================================== */

/* ---------- Hero + search ---------- */
.dhero { position: relative; overflow: clip; padding-top: calc(var(--nav-h) + clamp(1.6rem, 4vh, 3.2rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.dhero::before { content: ""; position: absolute; left: 50%; top: -20vw; width: 80vw; height: 80vw; margin-left: -40vw; background: radial-gradient(closest-side, rgba(255,75,31,0.16), transparent); pointer-events: none; }
.dhero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }
.dhero__title { margin-top: clamp(0.8rem, 2vh, 1.4rem); font-size: clamp(2rem, 10.6vw, 5rem); line-height: 0.92; letter-spacing: -0.04em; text-align: center; }
.dhero__title .ln > span { transition: transform 1.4s var(--ease); }
.is-loaded .dhero__title .ln > span { transform: none; }
.dhero__title .ln:nth-child(1) > span { transition-delay: 0.08s; } .dhero__title .ln:nth-child(2) > span { transition-delay: 0.18s; } .dhero__title .ln:nth-child(3) > span { transition-delay: 0.28s; }
html:not(.js) .dhero__title .ln > span { transform: none; }
.dhero__copy { display: grid; justify-items: center; text-align: center; }
.dhero__copy .hero__kicker { justify-content: center; }
.dhero__lede { margin-top: clamp(1rem, 3vh, 1.8rem); max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(243,239,231,0.8); }
.dhero [data-in] { transition-delay: 0.35s; }

.dsearch { position: relative; max-width: 640px; margin-inline: auto; width: 100%; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid rgba(243,239,231,0.2); background: #151514; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease) 0.5s, transform 1.2s var(--ease) 0.5s; }
.is-loaded .dsearch { opacity: 1; transform: none; }
html:not(.js) .dsearch { opacity: 1; transform: none; }
.dsearch::before { content: ""; position: absolute; left: -1px; top: -1px; width: 40px; height: 40px; border-left: 3px solid var(--accent); border-top: 3px solid var(--accent); }
.dsearch__cap { text-align: center; color: var(--mut); margin-bottom: 1rem; }
.dsearch__form { display: grid; gap: 0.7rem; }
.dsearch__field { display: flex; align-items: stretch; border: 1.5px solid rgba(243,239,231,0.28); background: #0e0e0d; transition: border-color 0.3s; }
.dsearch__field:focus-within { border-color: var(--accent); }
.dsearch__field input { flex: 1; min-width: 0; padding: 0 0.9rem; background: transparent; border: 0; color: var(--bone); font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 3vw, 1.4rem); letter-spacing: -0.01em; }
.dsearch__field input::placeholder { color: rgba(243,239,231,0.35); }
.dsearch__field input:focus { outline: 0; }
.dsearch__field select { flex: none; width: 6.5rem; padding: 0 0.6rem; background: rgba(243,239,231,0.05); border: 0; border-left: 1.5px solid rgba(243,239,231,0.2); color: var(--bone); font-family: var(--sans); font-weight: 600; font-size: 0.95rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f3efe7' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 16px; }
.dsearch__field input, .dsearch__field select { min-height: 58px; }
.dsearch__field select option { color: var(--ink); background: var(--bone); }
.dsearch__go { position: relative; min-height: 58px; overflow: hidden; }
.dsearch__go .dgo-icon { width: 20px; height: 20px; }
.dsearch__go .dgo-spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(14,14,13,0.25); border-top-color: #0e0e0d; border-radius: 50%; }
.dsearch__go.is-loading .dgo-icon { display: none; }
.dsearch__go.is-loading .dgo-spin { display: block; animation: dspin 0.7s linear infinite; }
@keyframes dspin { to { transform: rotate(360deg); } }
.dsearch__go.is-loading { pointer-events: none; opacity: 0.85; }
.dsearch__note { margin-top: 0.9rem; text-align: center; font-size: 0.82rem; color: var(--mut); }
.dsearch .err { display: block; text-align: center; min-height: 1.2em; margin-top: 0.4rem; }

.dresults { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(243,239,231,0.14); }
.dresults[hidden] { display: none; }
.dresults__flag { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; padding: 0.5rem 0.8rem; border: 1px solid rgba(255,75,31,0.4); background: rgba(255,75,31,0.08); font-size: 0.78rem; color: rgba(243,239,231,0.85); }
.dresults__flag span { padding: 0.12rem 0.5rem; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
#dresults-list, #dalt-list { display: grid; gap: 0.5rem; }
.dres { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border: 1px solid rgba(243,239,231,0.16); background: rgba(243,239,231,0.03); opacity: 0; transform: translateY(8px); animation: dresin 0.5s var(--ease) forwards; }
.dres:nth-child(2) { animation-delay: 0.06s; } .dres:nth-child(3) { animation-delay: 0.12s; } .dres:nth-child(4) { animation-delay: 0.18s; } .dres:nth-child(5) { animation-delay: 0.24s; }
@keyframes dresin { to { opacity: 1; transform: none; } }
.dres__name { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; font-size: clamp(0.98rem, 3vw, 1.2rem); letter-spacing: -0.01em; color: var(--bone); overflow-wrap: anywhere; }
.dres__status { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dres__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.dres.is-avail .dres__status { background: rgba(46,204,113,0.15); color: #5be495; }
.dres.is-avail .dres__status::before { background: #5be495; }
.dres.is-taken .dres__status { background: rgba(255,92,87,0.14); color: #ff8f88; }
.dres.is-taken .dres__status::before { background: #ff6b57; }
.dres__price { flex: none; font-family: var(--sans); font-weight: 700; font-size: 0.92rem; color: var(--accent); }
.dres__cta { flex: none; margin-left: auto; }
@media (max-width: 480px) { .dres { flex-wrap: wrap; row-gap: 0.6rem; } .dres__name { flex: 1 1 100%; } }
.dres__cta .abtn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem; border: 1px solid rgba(243,239,231,0.3); font-size: 0.78rem; font-weight: 700; color: var(--bone); transition: background-color 0.3s, border-color 0.3s; }
.dres__cta .abtn:hover { background: rgba(243,239,231,0.08); border-color: rgba(243,239,231,0.5); }
.dalt { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(243,239,231,0.18); }
.dalt[hidden] { display: none; }
.dalt .lbl { color: var(--mut); margin-bottom: 0.6rem; }
@media (min-width: 560px) { .dsearch__field { flex-wrap: nowrap; } }

/* ---------- Choose your domain (extension cards) ---------- */
.choose .lbl { color: var(--mut); }
.extgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.extcard { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.3rem, 2.6vw, 1.8rem); background: var(--bg); }
.extcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.extcard__ext { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -0.02em; }
.extcard__desc { color: var(--mut); font-size: 0.92rem; }
.extcard__prices { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.extcard__prices div { display: grid; gap: 0.1rem; }
.extcard__prices span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.extcard__prices b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.extcard .abtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; margin-top: 0.4rem; border: 1.5px solid var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color 0.3s, color 0.3s; }
.extcard .abtn:hover { background: var(--ink); color: var(--bone); }
@media (min-width: 720px) { .extgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .extgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Brand section ---------- */
.brand .lbl { color: var(--mut); }
.brand__title { margin: 1.4rem 0 1.2rem; font-size: clamp(1.9rem, 10.4vw, 6.4rem); line-height: 0.9; }
@media (min-width: 900px) { .brand__title { font-size: clamp(3rem, 6.6vw, 7.6rem); } }
.brand__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: start; }
.brand__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.brand__list li { padding: 0.4rem 0.85rem; border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; }
.brand__card { padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid var(--line); background: var(--ink-2, #191918); }
.brand__card .lbl { color: var(--accent); margin-bottom: 1rem; }
.brand__ex { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-family: var(--sans); font-size: 0.98rem; overflow-wrap: anywhere; }
.brand__ex:last-child { border-bottom: 0; }
.brand__ex svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
@media (min-width: 900px) { .brand__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2rem, 6vw, 6rem); } }

/* ---------- Flow diagram (one team / renewals) ---------- */
.flow { display: grid; justify-items: center; gap: 0.6rem; margin: clamp(2rem, 5vw, 3rem) 0; }
.flow li { display: flex; }
.flow li[aria-hidden] { color: var(--mut); font-size: 1.1rem; }
.flow span { padding: 0.8rem 1.6rem; border: 1.5px solid currentColor; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.4rem); letter-spacing: -0.01em; }
.dstack .flow span { border-color: var(--ink); }
.renew .flow span { border-color: var(--accent); color: var(--accent); }
.flow--wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.flow--wrap li[aria-hidden] { align-self: center; }
@media (min-width: 720px) { .flow:not(.flow--wrap) { grid-auto-flow: column; grid-auto-columns: max-content; } .flow:not(.flow--wrap) li[aria-hidden] { transform: rotate(-90deg); } }

/* ---------- Domain + email ---------- */
.mailcompare { display: grid; gap: 0.6rem; }
.mailcompare__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); font-size: 0.9rem; overflow-wrap: anywhere; }
.mailcompare__row.is-before { color: var(--mut); text-decoration: line-through; text-decoration-color: rgba(243,239,231,0.3); }
.mailcompare__row.is-after { border-color: var(--accent); color: var(--bone); font-weight: 700; }
.mailcompare__row i { flex: none; font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut); }
.mailcompare__row.is-after i { color: var(--accent); }
.mailcompare__arrow { text-align: center; color: var(--mut); }

/* ---------- Transfer options ---------- */
.transfer .lbl { color: var(--mut); }
.transfer__title { margin: 1.4rem 0 1.2rem; font-size: clamp(1.9rem, 10.4vw, 6.4rem); line-height: 0.9; }
@media (min-width: 900px) { .transfer__title { font-size: clamp(3rem, 6.6vw, 7.6rem); } }
.topts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: clamp(2rem, 5vw, 3rem); }
.topt { display: grid; gap: 0.8rem; align-content: start; padding: clamp(1.3rem, 2.6vw, 2rem); border: 1.5px solid var(--ink); }
.topt__no { color: var(--acc-t); }
.topt h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); }
.topt p { color: var(--mut); }
.topt .btn { margin-top: 0.6rem; }
@media (min-width: 760px) { .topts { grid-template-columns: 1fr 1fr; } }
.transfer__note { margin-top: clamp(1.6rem, 4vw, 2.6rem); max-width: 48rem; }

/* ---------- Ownership ---------- */
.own__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: start; }
.own__title { margin: 1.4rem 0 0; font-size: clamp(1.9rem, 10.4vw, 6.4rem); line-height: 0.9; }
@media (min-width: 900px) { .own__title { font-size: clamp(3rem, 6.6vw, 7.6rem); } }
.own__list { display: grid; border-top: 1.5px solid var(--ink); }
.own__list li { position: relative; padding: 0.9rem 0 0.9rem 2rem; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: -0.01em; }
.own__list li::before { content: "\2713"; position: absolute; left: 0; top: 0.85rem; font-weight: 800; color: var(--accent-ink); }
@media (min-width: 900px) { .own__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); } }

/* ---------- Renewals ---------- */
.renew .lbl { color: var(--mut); }
.renew__title { margin: 1.4rem 0 0.6rem; font-size: clamp(1.9rem, 10.4vw, 6.4rem); line-height: 0.9; }
@media (min-width: 900px) { .renew__title { font-size: clamp(3rem, 6.6vw, 7.6rem); } }
.renew__lede { max-width: 40rem; }
.renewnote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: rgba(243,239,231,0.14); border: 1px solid rgba(243,239,231,0.14); }
.renewnote div { padding: 1rem 1.2rem; background: var(--bg); }
.renewnote b { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; }
.renewnote span { display: block; margin-top: 0.2rem; color: var(--mut); font-size: 0.88rem; }
.renew__auto { max-width: 46rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .renewnote { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Domain management dashboard ---------- */
.dmgmt .lbl { color: var(--mut); }
.dm { border: 1px solid var(--line-2); background: var(--ink); color: var(--bone); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.45); }
.dm__bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(243,239,231,0.14); background: #1a1a18; }
.dm__bar .dots { display: inline-flex; gap: 6px; }
.dm__bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a37; }
.dm__tag { margin-left: auto; padding: 0.2rem 0.6rem; background: rgba(243,239,231,0.1); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; color: rgba(243,239,231,0.75); }
.dm__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.4rem) 0.8rem; }
.dm__top .lbl { color: rgba(243,239,231,0.55); }
.dm__domain { margin-top: 0.2rem; font-size: clamp(1.3rem, 3.6vw, 1.8rem); letter-spacing: -0.01em; }
.dm__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; padding: 0 clamp(1rem, 2.4vw, 1.4rem) 1.2rem; }
.dm__meta .lbl { display: block; color: rgba(243,239,231,0.5); margin-bottom: 0.2rem; }
.dm__meta b { font-family: var(--display); font-weight: 700; font-size: clamp(0.85rem, 2.4vw, 1rem); }
.dm__tabs { display: flex; gap: 0.3rem; padding: 0 clamp(0.6rem, 2vw, 1rem); overflow-x: auto; border-top: 1px solid rgba(243,239,231,0.12); scrollbar-width: none; }
.dm__tabs::-webkit-scrollbar { display: none; }
.dm__tabs button { flex: none; min-height: 48px; padding: 0 0.9rem; font-size: 0.82rem; font-weight: 600; color: rgba(243,239,231,0.55); border-bottom: 2px solid transparent; white-space: nowrap; }
.dm__tabs button.is-on { color: var(--bone); border-bottom-color: var(--accent); }
.dm__panels { padding: clamp(1.1rem, 2.6vw, 1.6rem); border-top: 1px solid rgba(243,239,231,0.08); min-height: 190px; }
.dm__panel { display: none; animation: panelin2 0.5s var(--ease); }
.dm__panel.is-on { display: grid; gap: 0.6rem; }
@keyframes panelin2 { from { opacity: 0; transform: translateY(8px); } }
.dm__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(243,239,231,0.1); font-size: 0.92rem; }
.dm__row:last-child { border-bottom: 0; }
.dm__row span { color: rgba(243,239,231,0.55); }
.dm__row b { font-weight: 600; overflow-wrap: anywhere; text-align: right; }
@media (min-width: 640px) { .dm__meta { grid-template-columns: repeat(3, minmax(140px, auto)); justify-content: start; } }

/* ---------- Bundles (reuse .plans3/.plan2, page-scoped tweaks) ---------- */
.bundles .hprice__title { color: var(--bone); }
.bundles .lede { color: rgba(243,239,231,0.78); }
.bundles .lede { max-width: 44rem; }

/* ---------- Pricing table ---------- */
.dprice .lbl { color: var(--mut); }
.ptable { border-top: 2px solid var(--ink); overflow-x: auto; }
.ptable table { width: 100%; min-width: 560px; border-collapse: collapse; }
.ptable thead th { padding: 0.9rem 1rem 0.9rem 0; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptable tbody td { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ptable tbody td:first-child { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.ptable tbody td:not(:first-child) { font-variant-numeric: tabular-nums; }
.dprice__note { margin-top: 1.6rem; max-width: 48rem; }
@media (max-width: 640px) { .ptable { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); } }

@media (max-width: 420px) { .page-domains .btn { white-space: normal; letter-spacing: 0.08em; padding-inline: 1rem; } .page-domains .btn--lg { min-height: 56px; } }