/* hosteasy/about-us.css — PAGE-specific CSS for the Host Easy "About Us"
   page (the LIVE https://www.hosteasy.in/about-us.php).
   =========================================================================
   Loads the shared design system first (tokens + base + header/nav/footer via
   common.css → brand-tokens.css), then styles ONLY this page's one section —
   every selector hangs off the LIVE page's own class names / tags (no invented
   class):
     .skip-link                          → keyboard skip-to-content (a11y)
     main / .content_area / .content     → the centred reading column
     .content > h1                       → the "About Us" hero title
     .content > p                        → the multi-paragraph about copy
   The live page ships exactly one content block (h1 + a single <p> whose four
   paragraphs are separated by <br><br>). CSS-ONLY design: 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 = contact-page/terms parity (edit req_20260828_100616_c1aa58): 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 (common.css) owns the gap before it. */
main{display:block;max-width:1080px;margin:0 auto;
  padding:0 var(--ho-s-5) var(--ho-s-5)}

/* ── about block — .content_area > .content carries the h1 + about copy ──────
   Present the single section as one calm reading card: a pale cyan hero wash
   behind the title, a comfortable measure for the body, generous rhythm. */
.content_area{margin:0}

/* The card chrome is GONE — no border, radius, shadow, card ground or overflow:hidden.
   A band cannot full-bleed out of a box that clips its children. The page is now a plain
   centred reading column, matching terms-and-conditions-page.css and privacy-policy.css.
   Column kept at this page's own 780px (the siblings are 820) — nothing forces parity. */
.content_area .content{max-width:780px;margin:0 auto}

/* title — sits on a soft cyan hero band with a brand accent rule beneath it */
/* the band full-bleeds to the viewport edges via margin-inline:calc(50% - 50vw) (not
   width:100vw, which overflows past the scrollbar), with the inner padding re-insetting
   the title to the 780px reading column (half = 390).
   UNLIKE terms and privacy, the band covers the <h1> ONLY: this page has no intro lead —
   the h1 is followed by a single <p> carrying the ENTIRE about copy (four paragraphs
   split by <br><br>), so banding `h1 + p` would flood the whole page with the grad. The
   hairline therefore closes the band directly under the title. */
.content_area .content > h1{background:var(--ho-hero-grad);
  margin-inline:calc(50% - 50vw);margin-top:0;margin-bottom:0;
  padding-inline:max(var(--ho-s-5),calc(50vw - 390px));
  padding-top:var(--ho-s-section);padding-bottom:var(--ho-s-6);
  border-bottom:1px solid var(--ho-sky-200);
  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)}

/* body copy — the live <br><br> breaks read as paragraph gaps.
   Runs the full column, left-aligned (the house style settled on the terms
   page). The card's inner gutters are gone with the card — main's padding supplies the
   side room now; only the top gap below the band is kept. */
.content_area .content > p{margin:var(--ho-s-7) 0 0;padding:0;
  color:var(--ho-body);font-size:var(--ho-fs-md);line-height:1.85;
  text-align:left;max-width:var(--wrap)}
.content_area .content > p br{line-height:2.4}

/* ── responsive (1024 / 640 / 400 tiers) ───────────────────────────────────── */
@media (max-width:1024px){
  .content_area .content > h1{padding-top:var(--ho-s-7);padding-bottom:var(--ho-s-5)}
  .content_area .content > p{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{font-size:var(--ho-fs-base);line-height:1.8}
}
@media (max-width:400px){
  main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)}
  .content_area .content > h1{padding:var(--ho-s-5) var(--ho-s-4) var(--ho-s-4)}
  .content_area .content > p{padding:var(--ho-s-5) var(--ho-s-4)}
}