s, then the
eighteen bolded sections (each a heading + one or more paragraphs, some with
inline lead-ins and a ), exactly as hosting-main-page.css and the multiyear page do. */
.content_area .content{max-width:820px;margin:0 auto;
/* no bottom padding (edit req_20260828_095530_be2c76): it was the CARD's inner floor
and the card is gone. Three gaps were stacking under the document — this --ho-s-8,
main's --ho-s-5 and the footer's own margin-top:--ho-s-section (common.css). main +
footer own the separation now, as on contact-page. */
padding:0;
/* section numbering (edit req_20260828_092607_f95f3b) — see the h3 rule below */
counter-reset:tc-section}
/* title — sits on a soft cyan hero band (full-bleed inside the card) with a
brand accent rule beneath it */
/* the band spans BOTH the h1 and the intro below it and full-bleeds to the
viewport edges via margin-inline:calc(50% - 50vw) (not width:100vw, which overflows
past the scrollbar). The inner padding re-insets the copy to the 820px reading
column (half = 410) so the title lines up with the body text under it. The h1 also
pulls up by main's own top pad so the band HUGS the header with no white gap. */
.content_area .content > h1,
.content_area .content > h1 + p{background:var(--ho-hero-grad);
margin-inline:calc(50% - 50vw);
padding-inline:max(var(--ho-s-5),calc(50vw - 410px))}
.content_area .content > h1{margin-top:0;margin-bottom:0;
padding-top:var(--ho-s-section);padding-bottom:var(--ho-s-5);
font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight);
letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink);
font-weight:var(--ho-fw-black);text-align:center;position:relative}
.content_area .content > h1::after{content:"";display:block;width:64px;height:3px;
margin:var(--ho-s-4) auto 0;border-radius:var(--ho-r-pill);
background:var(--ho-brand)}
/* section headings — each terms section opens with a cyan-accented h2; a short
brand rule to its left sets it apart from the running text */
.content_area .content > h2{margin:var(--ho-s-7) 0 var(--ho-s-3);
padding-left:var(--ho-s-4);position:relative;max-width:var(--ho-measure);
font-size:var(--ho-fs-xl);line-height:var(--ho-lh-snug);
letter-spacing:var(--ho-tracking-tight);color:var(--ho-ink);
font-weight:var(--ho-fw-bold)}
.content_area .content > h2::before{content:"";position:absolute;left:0;top:.15em;
bottom:.15em;width:4px;border-radius:var(--ho-r-pill);background:var(--ho-brand)}
/* sub-section headings — one level under an h2 (e.g. "Domain Cancellation &
Refund Policy" under Refund Policy). Smaller than the h2 and carries a thinner,
softer accent rule so the hierarchy reads at a glance */
/* NUMBERED sections (edit req_20260828_092607_f95f3b, "follow the audit rules and
redesign"). There are 22 of these in one unbroken scroll with nothing to anchor
against; a legal document is referred back to and cited, so the sections are now
numbered 1…22 with a CSS counter — no markup, no new classes. The number REPLACES
the old thin sky accent bar, which also sharpens the hierarchy: the h2 keeps the
solid brand bar, the h3s read as numbered clauses under it. The four
-separated banned-scripts list). Design is
CSS-ONLY and token-ONLY — never a raw hex; every value is a --ho-* token from
brand-tokens.css. Production pulls the tokens + chrome from common.css /
brand-tokens.css; the design lives entirely in this one page stylesheet. */
@import "common.css";
/* ── skip-link (visually hidden until focused) ─────────────────────────────── */
.skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80;
background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand);
border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)}
.skip-link:focus{top:var(--ho-s-2)}
/* ── page shell ────────────────────────────────────────────────────────────── */
/* Shell padding (edit req_20260828_093607_9c9f88, "why main padding top … refer
contact-page.php"). TOP: --ho-s-section left a dead white gap above a card whose own
top is already a tinted hero band, so the band never hugged the nav the way the rest
of the site does; halved to --ho-s-6. NOT dropped to contact-page's 0, because that
page's hero is a full-bleed band with no card — here the band lives INSIDE an 820px
card with a border, radius and shadow, and at 0 its rounded top corners collide with
the nav. BOTTOM: --ho-s-8 doubled the gap before the footer, which already carries
margin-top:--ho-s-section (common.css) — trimmed to --ho-s-5, the same fix
contact-page.css documents. */
/* Shell spacing = contact-page.css parity (edit req_20260828_095219_e146ea): top pad 0
so the hero band sits FLUSH under the header, bottom --ho-s-5 so the footer's own
margin-top:--ho-s-section owns the gap before it. The h1's old
margin-top:calc(-1 * var(--ho-s-6)) pull-up existed only to claw back the top pad and
is deleted with it — the band now hugs the header by construction, not by cancelling. */
main{display:block;max-width:1080px;margin:0 auto;
padding:0 var(--ho-s-5) var(--ho-s-5)}
/* ── terms block — .content_area > .content carries h1 + the sectioned copy ────
Present the (long) terms as one calm reading document: a pale cyan hero band
behind the title, then a comfortable measure for the legal text with clearly
set section headings and generous vertical rhythm. */
.content_area{margin:0}
/* FULL-WIDTH HERO (edit req_20260828_093955_f1dd9f): the card chrome is GONE — no
border, radius, shadow, card ground or overflow:hidden. It had to go: a band cannot
full-bleed out of a box that clips its children, and a viewport-wide band bursting
out of a bordered rounded card reads as broken. The terms are now a plain centred
reading column on the page ground, which is also how a 20-section legal document
reads best. NOTE the user's reference rule — contact-page.css's
`main > .content_area:first-of-type{background:var(--ho-hero-grad)}` — could NOT be
copied here: on that page the first .content_area holds ONLY the hero, while this
page has a single .content_area wrapping the whole document, so tinting it would
flood all 20 sections. The band is painted on the real top elements instead (the h1
+ the intro s carry
their own numbers in the live copy and are left alone. */
.content_area .content > h3{margin:var(--ho-s-6) 0 var(--ho-s-3);
padding-left:calc(var(--ho-s-6) + var(--ho-s-3));position:relative;max-width:var(--ho-measure);
counter-increment:tc-section;
font-size:var(--ho-fs-lg);line-height:var(--ho-lh-snug);
letter-spacing:var(--ho-tracking-tight);color:var(--ho-ink);
font-weight:var(--ho-fw-bold)}
.content_area .content > h3::before{content:counter(tc-section) ".";position:absolute;
left:0;top:0;width:calc(var(--ho-s-6) + var(--ho-s-2));
color:var(--ho-brand-text);font-weight:var(--ho-fw-black);
font-variant-numeric:tabular-nums}
/* run-in item headings — the numbered Domain-Cancellation clauses; the deepest
level, set as a compact brand-tinted label with no accent bar */
.content_area .content > h4{margin:var(--ho-s-5) 0 var(--ho-s-2);max-width:var(--ho-measure);
font-size:var(--ho-fs-md);line-height:var(--ho-lh-snug);
color:var(--ho-brand-text);font-weight:var(--ho-fw-semi)}
/* the banned-scripts ordered list — brand numerals + comfortable rhythm */
.content_area .content > ol{margin:0 0 var(--ho-s-4);padding-left:var(--ho-s-6);
color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.85;
text-align:left;max-width:var(--wrap)}
.content_area .content > ol li{margin:0 0 var(--ho-s-2);padding-left:var(--ho-s-1)}
.content_area .content > ol li::marker{color:var(--ho-brand-text);
font-weight:var(--ho-fw-semi)}
/* the first intro paragraph reads as a lead — sits right under the hero band */
/* the intro lead closes the band — the hairline sits under IT now, not under the h1 */
/* The lead's own measure (edit req_20260828_094709_edecd7, "p tag max width … common
structure for all pages"): it was running the full 820px column, which is a long line
for an intro. It CANNOT be capped with max-width + margin-inline:auto — this element
IS the band, and auto margins would cancel the calc(50% - 50vw) full-bleed above. So
the text column is narrowed with the same mechanism the band already uses: a deeper
padding-inline inset (~600px column, the --ho-measure line length at --ho-fs-md). */
/* edit req_20260828_095710_c52115: the band's foot-room was --ho-s-section (40-88px,
growing with the viewport) — now a flat --ho-s-6. The lead's ink moves from --ho-ink
to --ho-sky-800, matching the hero leads on contact-page.css and hosting-main-page.css
(7.27:1 on white, and the band grad is very pale, so AA is comfortable). */
.content_area .content > h1 + p{margin-top:0;margin-bottom:var(--ho-s-7);
padding-top:0;padding-bottom:var(--ho-s-6);
border-bottom:1px solid var(--ho-sky-200);
max-width:none;text-align:left;
font-size:var(--ho-fs-md);color:var(--ho-sky-800)}
/* body copy — comfortable measure + rhythm */
/* body copy runs the full column, left-aligned (edit req_20260828_095219_e146ea,
"p tag max-width based on --wrap and left align"). --wrap is 1180px and this column
is 820px, so in practice the paragraphs fill the 820 column. */
.content_area .content > p{margin:0 0 var(--ho-s-4);
color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.85;
text-align:left;max-width:var(--wrap)}
.content_area .content > p a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi);
text-decoration:underline;text-underline-offset:2px}
.content_area .content > p a:hover{color:var(--ho-link-d)}
/* inline bold lead-ins the live page already carries (numbered Domain-Cancellation
items, "Unlimited Hosting Plans", the mid-section sub-heads) — set them a touch
darker so they read as run-in sub-heads without breaking the paragraph flow */
.content_area .content > p strong{color:var(--ho-ink);font-weight:var(--ho-fw-bold);
letter-spacing:var(--ho-tracking-tight)}
/* the banned-scripts paragraph is a
-separated list — the soft line breaks
already stack each entry; give those lines a comfortable rhythm so the block
reads as the list it is */
.content_area .content > p br{line-height:2}
/* ── responsive (1024 / 640 / 400 tiers) ───────────────────────────────────── */
@media (max-width:1024px){
.content_area .content > h1{padding-top:var(--ho-s-7);padding-bottom:var(--ho-s-4)}
.content_area .content > h2{margin-top:var(--ho-s-6)}
}
@media (max-width:640px){
main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)}
.content_area .content > p{line-height:1.8}
.content_area .content > h1 + p{font-size:var(--ho-fs-base)}
}
@media (max-width:400px){
main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
.content_area .content > h1{padding-top:var(--ho-s-6);padding-bottom:var(--ho-s-3)}
}