/* The for-sale page. Phone first: one column. From 960 pixels up, the offer form sits beside the text.
   Dark by default (the original look); a light version for visitors whose device prefers light. */
:root{
--bg-1:#0e1220;
--bg-2:#161c33;
--glow-1:rgba(122,162,255,.18);
--glow-2:rgba(167,139,250,.16);
--card:rgba(255,255,255,.055);
--border:rgba(255,255,255,.12);
--text:#f4f6fb;
--muted:#a7b0c8;
--accent:#7aa2ff;
--accent-2:#a78bfa;
--on-accent:#0d1024;
--link:#9db9ff;
--field-bg:#1e1e24;
--field-border:#8a93ad;
--hover:rgba(255,255,255,.1);
--list-border:#4a4f66;
--error:#ffb4a8;
--ok:#9be8b4;
--shadow:rgba(0,0,0,.45);
--cta-shadow:rgba(122,162,255,.32);
--cta-shadow-hover:rgba(122,162,255,.45);
color-scheme:dark;
}
@media (prefers-color-scheme:light){
:root{
--bg-1:#f3f5fb;
--bg-2:#e5eaf7;
--glow-1:rgba(47,84,212,.14);
--glow-2:rgba(109,63,216,.12);
--card:rgba(255,255,255,.82);
--border:rgba(20,30,70,.16);
--text:#141a33;
--muted:#464e70;
--accent:#2f54d4;
--accent-2:#6d3fd8;
--on-accent:#ffffff;
--link:#2447c4;
--field-bg:#ffffff;
--field-border:#58628a;
--hover:rgba(20,30,70,.07);
--list-border:#aab1cc;
--error:#b42318;
--ok:#0b6b3a;
--shadow:rgba(20,30,70,.16);
--cta-shadow:rgba(47,84,212,.3);
--cta-shadow-hover:rgba(47,84,212,.42);
color-scheme:light;
}
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{
margin:0;
}
body{
font-family:"Segoe UI",system-ui,-apple-system,Inter,Arial,sans-serif;
background-color:var(--bg-1);
background-image:
radial-gradient(900px 600px at 80% -10%, var(--glow-1), transparent 60%),
radial-gradient(700px 500px at 10% 110%, var(--glow-2), transparent 60%),
linear-gradient(160deg,var(--bg-1),var(--bg-2));
color:var(--text);
min-height:100dvh;
display:flex;
flex-direction: column;
align-items:center;justify-content:center;
padding:24px;
-webkit-font-smoothing:antialiased;
}

/* ---------- the card ---------- */
.card{
flex:1;
width:100%;max-width:680px;
background:var(--card);
border:1px solid var(--border);
border-radius:26px;
padding:clamp(28px,6vw,56px);
text-align:center;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 30px 80px var(--shadow);
animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.badge{
display:inline-block;
font-size:.82rem;letter-spacing:.16em;
color:var(--muted);
border:1px solid var(--border);
border-radius:999px;
padding:7px 18px;
margin-bottom:26px;
}
h1,h2.tagline{
font-size:clamp(1.5rem,5.2vw,2.5rem);
font-weight:600;
line-height:1.45;
margin-bottom:14px;
}
h2.tagline{display:block}
.domain{
display:block;
margin:10px 0 6px;
font-size:clamp(1.9rem,7vw,3.2rem);
font-weight:800;
letter-spacing:-.5px;
word-break:break-word;
background:linear-gradient(95deg,var(--accent),var(--accent-2));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:var(--accent);
}
.sub{
color:var(--muted);
font-size:1.02rem;
line-height:1.8;
margin-top:10px;
}
h3.sub{font-weight:400}
.sub.small{font-size:.92rem;margin-top:22px}
.sub a{color:var(--link)}
.trust{
color:var(--muted);
font-size:.95rem;
line-height:1.7;
margin-top:14px;
}

/* ---------- the offer form ---------- */
.offer{
max-width:420px;
margin:30px auto 0;
text-align:left;
}
.offer .formtitle{
text-align:center;
margin-top:0;
margin-bottom:8px;
color:var(--text);
font-size:1.25rem;
font-weight:600;
}
.field{margin-top:18px}
.field label{
display:block;
margin-bottom:7px;
color:var(--muted);
font-size:.95rem;
}
.field input,.field select{
display:block;
width:100%;
min-height:50px;
padding:12px 14px;
background-color:var(--field-bg);
color:var(--text);
border:1px solid var(--field-border);
border-radius:10px;
font:inherit;
}
.hint{
display:block;
margin-top:7px;
color:var(--muted);
font-size:.88rem;
line-height:1.5;
}
.hint.centered{text-align:center;margin-top:12px}
.message{
margin-top:14px;
min-height:0;
text-align:center;
line-height:1.5;
}
.message-error{color:var(--error)}
.message-ok{color:var(--ok)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{
border-color:var(--error);
border-width:2px;
}
.cta{
display:inline-flex;align-items:center;gap:10px;
margin-top:34px;
padding:16px 40px;
border-radius:999px;
font-size:1.08rem;font-weight:700;
text-decoration:none;color:var(--on-accent);
background:linear-gradient(95deg,var(--accent),var(--accent-2));
box-shadow:0 14px 34px var(--cta-shadow);
white-space:nowrap;
transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 42px var(--cta-shadow-hover)}
.cta:active{transform:translateY(0)}
.offer .cta{
display:flex;
justify-content:center;
width:100%;
border:0;
cursor:pointer;
font-family:inherit;
margin-top:26px;
}
.offer .cta[aria-disabled="true"]{opacity:.7;cursor:default}
@media (max-width:420px){ .cta{padding:15px 26px;font-size:1rem} }

/* ---------- how the sale works ---------- */
.faq{
margin-top:34px;
text-align:left;
}
.faq h3{text-align:center;margin-bottom:8px;color:var(--text);font-size:1.25rem;font-weight:600}
.faq details{
border-top:1px solid var(--border);
}
.faq details:last-of-type{border-bottom:1px solid var(--border)}
.faq summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:50px;
padding:12px 4px;
cursor:pointer;
font-weight:600;
list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:'';
flex:none;
width:.6rem;height:.6rem;
border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);
transform:rotate(45deg);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{
padding:0 4px 16px;
color:var(--muted);
line-height:1.7;
}

/* ---------- more domain names ---------- */
section.more{
margin-top:34px;
}
ul{
display:block;
list-style-type:none;
}
li a{
color:var(--text);
}
.domainlist{
max-height:250px;
overflow-y:auto;
padding:10px;
border:1px solid var(--list-border);
border-radius:8px;
text-align:left;
list-style-type:none;
}
.domainlist::-webkit-scrollbar{width:8px}
.domainlist::-webkit-scrollbar-track{background:transparent}
.domainlist::-webkit-scrollbar-thumb{background:var(--list-border);border-radius:4px}
.domainlist li a{
color:var(--text);
text-decoration:none;
display:block;
padding:8px 10px;
border-radius:6px;
transition:background-color .2s ease;
}
.domainlist li a:hover{background-color:var(--hover)}
.searchWrapper{
position:relative;
display:inline-block;
margin:12px 0 15px;
width:270px;
max-width:100%;
}
.searchInput{
padding:10px;
padding-right:38px;
width:100%;
min-height:46px;
box-sizing:border-box;
background-color:var(--field-bg);
color:var(--text);
border:1px solid var(--field-border);
border-radius:8px;
font:inherit;
}
.searchInput::placeholder{color:var(--muted);opacity:1}
.clearButton{
position:absolute;
right:6px;
top:50%;
transform:translateY(-50%);
background:transparent;
border:none;
color:var(--muted);
font-size:22px;
cursor:pointer;
padding:6px 8px;
}
hr{
margin-top:34px;
border:0;
border-top:1px solid var(--border);
}
footer{
margin-top:50px;
width:100%;
background:var(--card);
border:1px solid var(--border);
border-radius:26px;
padding:clamp(28px,6vw,56px);
text-align:center;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
box-shadow:0 30px 80px var(--shadow);
animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
footer.card{max-width:680px}

/* ---------- keyboard focus ---------- */
.cta:focus-visible,
.field input:focus-visible,.field select:focus-visible,
.searchInput:focus-visible,.clearButton:focus-visible,
.domainlist a:focus-visible,.sub a:focus-visible,
.faq summary:focus-visible,
.formtitle:focus-visible{
outline:3px solid var(--accent);
outline-offset:2px;
}
.formtitle:focus{outline:none}

@media (prefers-reduced-motion:reduce){.card,footer{animation:none}.cta{transition:none}}

/* ---------- wide screens: the text on the left, the offer form on the right ----------
   Only the way it is drawn changes. The page order stays the same, so the reading order and the
   Tab order are the same as on a phone. */
@media (min-width:960px){
main.card,footer.card{max-width:1040px}
main.card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:auto auto auto auto 1fr;
column-gap:56px;
align-items:start;
text-align:left;
}
main.card > .badge{grid-column:1;grid-row:1;justify-self:start}
main.card > header{grid-column:1;grid-row:2}
main.card > .sub:not(.small){grid-column:1;grid-row:3}
main.card > .trust{grid-column:1;grid-row:4}
main.card > .offer{grid-column:2;grid-row:1 / span 5;margin:0;max-width:none;width:100%}
main.card > .faq,
main.card > section.more,
main.card > hr{grid-column:1 / -1}
.card h1,.card h2.tagline{margin-bottom:10px}
.offer .formtitle{text-align:left}
.hint.centered,.offer .message{text-align:left}
.faq details{max-width:none}
.faq,section.more{text-align:left}
.faq h3,section.more h3{text-align:left}
.faq details:last-of-type{border-bottom:1px solid var(--border)}
}