/* ==========================================================================
   FreeSiteCrew service pages
   Loaded after styles.css on /free-website-for/... and /free-website-builder/.
   Nearly everything comes from the homepage stylesheet: hero, proof strip,
   why cards, included grid, steps, work card, FAQ, CTA. This file adds the
   handful of pieces those pages need that the homepage does not.
   ========================================================================== */

/* Hero: copy left, the relevant work example right. The screenshot classes
   from the homepage trim each file's transparent surround, so the artwork
   fills the column. */
.svc-hero .hero__lede{max-width:28rem}
.svc-hero__art{overflow:hidden}
.svc-hero__art .work__shot{transition:none}
.svc-hero__kicker{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;
  padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;
  font-size:.8125rem;color:var(--body);background:#fff;
}
.svc-hero__kicker .icon{width:16px;height:16px;color:var(--lime-deep)}

/* Breadcrumb sits above the hero copy. */
.svc-crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.8125rem;color:var(--faint)}
.svc-crumbs a:hover{color:var(--ink)}
/* Separators trail the item they follow rather than leading the next one.
   On a wrapped line a leading separator is stranded at the start of the
   row, which is what happened once the meta line gained a fourth item. */
.svc-crumbs li:not(:last-child)::after{content:"/";margin-left:.4rem;opacity:.6}
.svc-crumbs [aria-current]{color:var(--body)}

/* A prose section: one measured column of paragraphs, for the part of each
   page that explains the audience rather than lists things. */
.svc-prose{background:var(--bg-why);padding-block:2.75rem}
.svc-prose__inner{max-width:44rem;margin-inline:auto}
.svc-prose h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2rem);letter-spacing:-.03em}
.svc-prose p{margin-top:1rem;font-size:1.0625rem;line-height:1.75}
.svc-prose p:first-of-type{margin-top:1.25rem}

/* The single example card, shown large with a caption beside it. */
.svc-example{background:var(--bg-work);padding-block:2.75rem}
.svc-example__grid{display:grid;gap:1.75rem;align-items:center}
.svc-example .work__card{max-width:40rem}
.svc-example__copy h2{font-size:clamp(1.5rem,1.1rem + 1.7vw,2rem);letter-spacing:-.03em}
.svc-example__copy p{margin-top:.9rem;font-size:1.0625rem;line-height:1.7}
.svc-example__copy ul{display:grid;gap:.55rem;margin-top:1.1rem}
.svc-example__copy li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem;color:var(--ink);font-weight:500}
.svc-example__copy .icon{width:20px;height:20px;margin-top:.1rem;color:var(--lime-deep)}

/* Related pages: the other audiences, so no page is a dead end. */
.svc-more{background:var(--bg-faq);padding-block:2.5rem;border-top:1px solid var(--line)}
.svc-more h2{font-size:1.25rem;letter-spacing:-.025em}
.svc-more ul{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.svc-more a{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:.9375rem;font-weight:500;color:var(--ink);transition:border-color .18s;
}
.svc-more a:hover{border-color:var(--ink)}

/* Builder page: the comparison table reuses the dark homepage table; this
   just widens the first column for the longer row labels. */
.svc-compare .compare__table tbody th{width:26%}

/* Touch: breadcrumb links and the hub card links get a 44px row. */
@media (pointer:coarse){
  .svc-crumbs a,.why__card h3 a{display:inline-flex;align-items:center;min-height:44px}
  .svc-crumbs{row-gap:0}
  .why__card h3 a{margin-block:-.5rem}
}
@media (min-width:700px){
  .svc-example__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.5rem}
}
@media (min-width:1040px){
  .svc-prose,.svc-example{padding-block:3.5rem}
  .svc-hero .hero__grid{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}
  .svc-more{padding-block:3rem}
}

/* --------------------------------------------------------------------------
   5. 404
   -------------------------------------------------------------------------- */
.notfound{background:var(--bg-hero);padding-block:3rem 3.25rem;text-align:center}
.notfound__inner{max-width:40rem;margin-inline:auto}
.notfound__code{color:var(--lime-deep)}
.notfound h1{
  margin-top:1rem;
  font-size:clamp(1.875rem,1.2rem + 3vw,3rem);
  line-height:1.06;letter-spacing:-.04em;text-wrap:balance;
}
.notfound__lede{margin-top:1.25rem;margin-inline:auto;max-width:32rem;font-size:1.0625rem;line-height:1.7}
.notfound__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.75rem}
.notfound__links{background:var(--bg-why);padding-block:2.75rem;border-top:1px solid var(--line)}
.notfound__links .why__cards{margin-top:2.25rem}
.notfound__links .why__card h3 a:hover{text-decoration:underline;text-decoration-color:var(--lime-deep);text-decoration-thickness:2px}

@media (max-width:599px){
  .notfound__actions{flex-direction:column;align-items:stretch}
  .notfound__actions .btn{width:100%}
}
@media (min-width:1040px){
  .notfound{padding-block:4.5rem 4rem}
  .notfound__links{padding-block:3.5rem}
}
@media (pointer:coarse){
  .notfound__links .why__card h3 a{display:inline-flex;align-items:center;min-height:44px;margin-block:-.5rem}
}