:root{
  --bg:#f8f9fb;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#555;
  --accent:#0083FF;
  --border:rgba(0,0,0,.1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background: var(--bg); line-height:1.6;
}
.wrap{max-width:920px; margin:0 auto; padding:48px 20px 64px}
header{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-size:clamp(18px, 2.5vw, 22px); font-weight:400}
.brand .dot{width:15px; height:15px; border-radius:50%; background:var(--accent); position:relative; top: 0.1em;} /* gentle, text-relative nudge downward */
h1{font-size:clamp(28px, 3.5vw, 44px); margin:0}

.hero{margin-top:36px; background:linear-gradient(180deg, rgba(0,0,0,.02), transparent); border:1px solid var(--border); border-radius:20px; padding:28px}
.domain{font-size:clamp(34px, 6vw, 72px); font-weight:800; letter-spacing:-.02em; margin:2px 0 8px}
.subtitle{font-size:clamp(16px, 2.2vw, 20px); color:var(--muted); margin:0 0 18px}
.price{margin:0; font-size:clamp(32px, 5vw, 48px); font-weight:800; color:var(--accent)}
.price .other{font-size:clamp(20px, 3vw, 24px); font-weight:600; color:var(--muted)}

.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:28px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px}
.card h3{margin:0; font-size:18px}
.card p{margin:0}

/* Conservative link style */
/* Keep links inline inside card paragraphs */
.card p a{
  display:inline;          /* was: block */
  margin:0;                /* was: 6px 0 */
  font-size:17px;
  color:var(--accent);
  text-decoration:underline;
  white-space:nowrap;      /* keep 'Transpact.com' from breaking */
}


/* .card p a{
  display:block;
  margin:6px 0;
  font-size:17px;
  color:var(--accent);
  text-decoration:underline;
} */ 

.card p a:hover {
  color: green;               /* or var(--accent) / #0066cc etc. */
  text-decoration: underline; /* keep underline on hover */
}


.divider{height:1px; background:var(--border); margin:26px 0}

footer{margin-top:48px; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.muted{color:var(--muted)}

a:focus, button:focus { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* Non-clickable contact address */
.contact-address {
  color: var(--accent);      /* house blue */
  font-weight: 500;
  text-decoration: none;
  cursor: text;
}

/* =========================================================
   Suggested Domains Section
   ---------------------------------------------------------
   Styles for the optional "You may like:" domain showcase.
   Each card shows two domains with short taglines.
   Safe to keep active even if the HTML section is commented out.
   ========================================================= */

.suggested {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

/* Bring the first row of boxes closer to the line */
.suggested .card {
  margin-top: -1.25rem; /* match the upward tuck of the line */
}



/* Heading (full row) */
.suggested .section-title {
  grid-column: 1 / -1;   /* force a full-width row */
  display: block;
  width: 100%;
  margin: 0;             /* keep it tight */
  padding: 0;
  line-height: 1.1;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
}

/* Thin blue rule directly under the heading (full row) */
.suggested .section-rule {
  grid-column: 1 / -1;
  justify-self: start;
  width: 100%;
  height: 1px;
  background: var(--accent);
  border-radius: 1px;
  margin-top: -0.6rem;  /* hugs the heading */
  margin-bottom: -0.6rem; /* pulls boxes closer up */
}


/* Card content */
.suggested .card p {
  margin: .5rem 0;
}

.suggested .domain {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);  /* matches normal text like 'Escrow' */
}


.suggested .domain:hover {
  text-decoration: underline;
}

.suggested .card p > span {
  display: block;
  font-size: .95rem;
  color: #444;
  margin-top: .1rem;
}

/* =========================================================
   End Suggested Domains Section */