/* ==========================================================================
   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}
}

/* --------------------------------------------------------------------------
   6. Legal pages
   Privacy and cookie policies. Same sticky contents as an article, without
   the banner or the share column, because nobody shares a cookie policy.
   -------------------------------------------------------------------------- */
.legal{background:var(--bg-hero);padding-block:1.75rem 3rem}
.legal__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;align-items:start}
.legal__side,.legal__col{min-width:0}
.legal__col{max-width:44rem}
.legal__head{margin-top:1.25rem}
.legal__head h1{
  margin-top:.75rem;
  font-size:clamp(1.875rem,1.3rem + 2.4vw,2.625rem);
  line-height:1.08;letter-spacing:-.04em;
}
.legal__meta{margin-top:.75rem;font-size:.875rem;color:var(--faint)}
.legal__lede{margin-top:1.25rem;font-size:1.125rem;line-height:1.65;color:var(--ink);font-weight:500}

.legal__body{margin-top:2rem;font-size:1.0625rem;line-height:1.75;min-width:0}
.legal__body > * + *{margin-top:1.25rem}
.legal__body p,.legal__body li{overflow-wrap:anywhere;min-width:0}
.legal__body table{overflow-wrap:normal}
.legal__body h2{
  margin-top:2.5rem;font-size:clamp(1.3rem,1.05rem + 1vw,1.625rem);
  line-height:1.2;letter-spacing:-.03em;scroll-margin-top:6.5rem;
}
.legal__body h3{margin-top:1.75rem;font-size:1.0625rem;letter-spacing:-.02em}
.legal__body h2 + *,.legal__body h3 + *{margin-top:.85rem}
.legal__body a{
  color:var(--ink);font-weight:500;
  text-decoration:underline;text-decoration-color:var(--lime-deep);
  text-decoration-thickness:2px;text-underline-offset:.15em;
}
.legal__body a:hover{text-decoration-color:var(--ink)}
.legal__body strong{color:var(--ink);font-weight:600}
.legal__body ul{display:grid;gap:.55rem;padding-left:0}
.legal__body ul li{position:relative;padding-left:1.4rem}
.legal__body ul li::before{content:"";position:absolute;left:.2rem;top:.7em;width:7px;height:7px;background:var(--lime)}
.legal__body table{font-size:.9375rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.legal__body th,.legal__body td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.legal__body thead th{background:#f4f4f2;font-weight:600;color:var(--ink);font-size:.875rem}
.legal__body tbody th{font-weight:500;color:var(--ink)}
.legal__body tbody tr:last-child th,.legal__body tbody tr:last-child td{border-bottom:0}
/* Three-column tables on the legal pages scroll sideways on a phone instead
   of squeezing each column to a few words per line. */
.legal__body .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal__body .table-scroll table:has(tr > :nth-child(3)){min-width:560px}

/* Contents card. blog.css styles .toc for articles, and legal pages do not
   load it, so the same look is defined here for them. */
.legal .toc{padding:1.25rem 1.25rem 1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.legal .toc ol{margin-top:.75rem;counter-reset:toc;display:grid;gap:.15rem}
.legal .toc li{counter-increment:toc}
.legal .toc ol a{
  display:flex;gap:.6rem;padding:.45rem .6rem;border-radius:var(--radius);
  font-size:.875rem;line-height:1.35;color:var(--body);
  transition:background-color .15s,color .15s;
}
.legal .toc ol a::before{content:counter(toc) ".";flex:none;color:var(--faint);font-variant-numeric:tabular-nums}
.legal .toc ol a:hover{color:var(--ink);background:var(--bg-faq)}
.legal .toc ol a[aria-current="true"]{background:rgba(202,232,4,.22);color:var(--ink);font-weight:600}
.legal .toc ol a[aria-current="true"]::before{color:var(--ink)}

/* A button that reads as a link, for opening the cookie settings inline. */
.legal__link{
  font:inherit;color:var(--ink);font-weight:500;padding:0;
  text-decoration:underline;text-decoration-color:var(--lime-deep);
  text-decoration-thickness:2px;text-underline-offset:.15em;
}
.legal__link:hover{text-decoration-color:var(--ink)}

@media (max-width:1039px){
  .legal .toc{padding:.9rem 1rem}
  .legal .toc ol{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:.6rem;padding-bottom:.25rem;scrollbar-width:none}
  .legal .toc ol::-webkit-scrollbar{display:none}
  .legal .toc li{flex:none}
  .legal .toc ol a{display:inline-flex;min-height:44px;align-items:center;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;white-space:nowrap;font-size:.8125rem}
}
@media (min-width:1040px){
  .legal{padding-block:2.25rem 4rem}
  .legal__grid{grid-template-columns:15rem minmax(0,1fr);gap:3rem;margin-top:.5rem}
  .legal__side{position:sticky;top:6.5rem}
}


/* --------------------------------------------------------------------------
   Every kind of business

   A long list, on the hub page, answering "you do not build for people like
   me" before anybody has to ask. Set in columns rather than one long run,
   because a hundred names in a single column reads as a wall and gets
   skipped, where grouped headings let somebody find their own trade in a
   second and stop reading.
   -------------------------------------------------------------------------- */
.kinds{padding-block:3rem}
.kinds h2{margin-top:.5rem;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.25rem);letter-spacing:-.02em}
.kinds__lede{margin-top:.9rem;max-width:44rem;font-size:1.0625rem;line-height:1.7;color:var(--body)}
/* Columns rather than a grid. A grid row is as tall as its tallest group, so
   a thirteen item group next to an eight item one left a hole the height of
   five lines, five times over. Multi-column flows the groups instead and
   balances the columns, which is what a directory should look like.
   inline-block with a full width is the old but reliable way to make
   break-inside actually hold. */
.kinds__grid{
  margin-top:2.25rem;
  /* The count is a ceiling and the width a floor, so the browser fits as many
     as it can up to five. 9.5rem is chosen so two fit on a 390px phone: at
     13rem it dropped to one column and the section ran to nine thousand
     pixels, which is a long way to scroll past if none of it applies to you. */
  columns:5 9.5rem;column-gap:2rem;
}
@media (max-width:699px){
  .kinds__grid{column-gap:1.25rem}
  .kinds__group li{font-size:.875rem}
}
/* The rule closes the list and spans the full width. It is deliberately not
   on .kinds__foot below, because that is narrowed to centre it and the rule
   would narrow with it. */
.kinds__grid{padding-bottom:.75rem;border-bottom:1px solid var(--line)}
.kinds__group{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;
  margin-bottom:1.75rem;
}
.kinds__group h3{
  font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);
  padding-bottom:.5rem;border-bottom:2px solid var(--lime);
}
.kinds__group ul{margin-top:.75rem;list-style:none;padding:0}
.kinds__group li{
  font-size:.9375rem;line-height:1.5;color:var(--body);
  padding:.2rem 0;
}
/* Centred, and constrained so it centres properly. Left at the full width of
   the shell this runs as one very long line on a wide screen, which is
   centred but does not read as centred. A max-width forces a sensible break
   and text-wrap:balance evens the lines. */
.kinds__foot{
  margin-top:1.75rem;
  font-size:1rem;line-height:1.65;color:var(--body);
  max-width:40rem;margin-inline:auto;text-align:center;text-wrap:balance;
}
.kinds__foot a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.kinds__foot a:hover{text-decoration-color:var(--lime-deep)}

/* The lede can point at a guide for one kind of business. Links went in the
   list itself first, but a list entry is 19px tall and giving it a proper
   tap area would have pushed its neighbours about, so the link lives in the
   sentence instead, where inline links are the normal thing. */
.kinds__lede a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--lime-deep);text-underline-offset:3px}
.kinds__lede a:hover{text-decoration-thickness:2px}