/* The home page hero and the shared .sk-home-page wrapper.
 *
 * This stylesheet used to live inside the home page's post_content, as an inline
 * <style> block. That put 6 KB of CSS in a database field, meant the page broke
 * visually the moment its content was edited without that block surviving, and
 * made the styles impossible to version or lint. It lives here now.
 *
 * Kept verbatim rather than rewritten. It was working, it is contrast-checked,
 * and the dark scheme overrides these rules in color-scheme.css by the same
 * custom property names. Rules for sections that the home page no longer uses
 * are left in place: the services page renders from the same catalogue and some
 * of these classes still appear there, and removing them to save a kilobyte
 * would be trading a real regression risk for nothing.
 *
 * Colours come from the custom properties declared on .sk-home-page, which the
 * appearance tint re-points at the visitor's chosen accent, so changing the
 * accent recolours this page like the rest of the site.
 */
.sk-home-page{--sk-ink:#28323a;--sk-muted:#66727b;--sk-purple:#68438b;--sk-purple-dark:#452b61;--sk-line:#e5ddec;--sk-soft:#f8f4fa;max-width:1120px;margin:0 auto;padding:30px 20px 60px;color:var(--sk-ink);line-height:1.65;font-family:inherit}.sk-home-page *{box-sizing:border-box}.sk-home-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.7fr);gap:24px;align-items:stretch;padding:48px;border:1px solid var(--sk-line);border-radius:30px;background:linear-gradient(135deg,#fbf9fd 0%,#f0e9f8 100%);box-shadow:0 20px 50px rgba(69,43,97,.09)}.sk-home-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--sk-purple);font-size:.78rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.sk-home-kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:#b36b9b}.sk-home-hero h1{max-width:700px;margin:14px 0 14px;color:var(--sk-purple-dark);font-size:clamp(2.35rem,5vw,4.1rem);line-height:1.03;letter-spacing:-.045em}.sk-home-lead{max-width:660px;margin:0;color:#61536b;font-size:1.12rem}.sk-home-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.sk-home-button{display:inline-flex;align-items:center;min-height:43px;padding:0 17px;border:1px solid transparent;border-radius:11px;background:var(--sk-purple);color:#fff!important;font-size:.9rem;font-weight:900;text-decoration:none!important}.sk-home-button:hover{background:var(--sk-purple-dark)}.sk-home-button.secondary{border-color:#d6c8df;background:#fff;color:var(--sk-purple-dark)!important}.sk-home-button.secondary:hover{background:#faf6fc}.sk-home-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.sk-home-proof span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(104,67,139,.14);border-radius:999px;background:rgba(255,255,255,.62);color:#65576c;font-size:.78rem;font-weight:800}.sk-home-proof span:before{content:"";width:6px;height:6px;border-radius:50%;background:#b36b9b}.sk-home-start{display:flex;flex-direction:column;justify-content:center;padding:25px;border:1px solid rgba(104,67,139,.16);border-radius:21px;background:rgba(255,255,255,.74)}.sk-home-start .sk-home-start-label{margin:0 0 7px;color:var(--sk-purple);font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sk-home-start h2{margin:0 0 8px;color:var(--sk-purple-dark);font-size:1.35rem;line-height:1.2}.sk-home-start p{margin:0 0 18px;color:#6d6075;font-size:.91rem}.sk-home-start-link{display:inline-flex;align-items:center;gap:8px;color:var(--sk-purple);font-size:.88rem;font-weight:900;text-decoration:none}.sk-home-start-link:hover{text-decoration:underline}.sk-home-section{margin-top:42px}.sk-home-section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:17px}.sk-home-section h2{margin:0;color:var(--sk-purple-dark);font-size:1.65rem;letter-spacing:-.025em}.sk-home-section-head p{max-width:400px;margin:0;color:var(--sk-muted);font-size:.93rem;text-align:left}.sk-home-featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.sk-home-card{display:flex;min-height:225px;flex-direction:column;padding:20px;border:1px solid var(--sk-line);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(53,37,67,.045);color:inherit!important;text-decoration:none!important;transition:transform .2s,box-shadow .2s,border-color .2s}.sk-home-card:hover{border-color:#cbaed8;box-shadow:0 15px 30px rgba(69,43,97,.1);transform:translateY(-3px)}.sk-home-card:focus-visible{outline:3px solid rgba(165,120,185,.4);outline-offset:3px}.sk-home-card-label{color:var(--sk-purple);font-size:.71rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sk-home-card h3{margin:14px 0 8px;color:var(--sk-purple-dark);font-size:1.08rem;line-height:1.25}.sk-home-card p{margin:0;color:#6b5e72;font-size:.88rem}.sk-home-card-action{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;color:var(--sk-purple);font-size:.83rem;font-weight:900}.sk-home-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.sk-home-flow article{padding:21px;border:1px solid var(--sk-line);border-radius:17px;background:#fff}.sk-home-flow-label{display:inline-flex;margin-bottom:12px;color:var(--sk-purple);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.sk-home-flow h3{margin:0 0 7px;color:var(--sk-purple-dark);font-size:1.04rem}.sk-home-flow p{margin:0;color:#6b5e72;font-size:.89rem}.sk-home-note{margin-top:38px;padding:21px 23px;border:1px solid #decce5;border-radius:18px;background:#fbf7fc}.sk-home-note h2{margin:0 0 7px;color:var(--sk-purple-dark);font-size:1.12rem}.sk-home-note p{margin:0;color:#66566d;font-size:.9rem}.sk-home-note a{color:var(--sk-purple);font-weight:800}.sk-home-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:38px;padding:25px 27px;border-radius:19px;background:#452b61;color:#fff}.sk-home-cta h2{margin:0 0 5px;color:#fff;font-size:1.25rem}.sk-home-cta p{margin:0;color:#e9dff0;font-size:.9rem}.sk-home-cta .sk-home-button{background:#fff;color:#452b61!important}.sk-home-cta .sk-home-button:hover{background:#f7f0fa}@media(max-width:980px){.sk-home-hero{grid-template-columns:1fr;padding:35px}.sk-home-start{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.sk-home-start h2,.sk-home-start p{margin-bottom:0}.sk-home-start-link{grid-column:1/-1}.sk-home-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.sk-home-page{padding:18px 14px 40px}.sk-home-hero{padding:27px 20px;border-radius:21px}.sk-home-hero h1{font-size:2.45rem}.sk-home-start{display:block;padding:19px}.sk-home-start p{margin:7px 0 16px}.sk-home-featured-grid,.sk-home-flow{grid-template-columns:1fr}.sk-home-card{min-height:190px}.sk-home-section-head{display:block}.sk-home-section-head p{margin-top:7px;text-align:left}.sk-home-cta{display:block;padding:22px 20px}.sk-home-cta .sk-home-button{margin-top:16px}}

/* The hero with no aside beside it.
 *
 * The hero was a two column grid, the second column being a "Start here" panel
 * that repeated what the hero already said and linked to a jump anchor. With
 * that gone the grid would leave an empty 270px track, so the modifier collapses
 * it to one column and reclaims the space for the headline. */
.sk-home-hero--tight {
  grid-template-columns: minmax(0, 1fr);
  /* The original hero was two columns, so its 24px gap only ever separated
     those two columns. With one column the same gap now sits between all five
     children, on top of the margin each one already carries, which put roughly
     100px of empty space through the middle of the hero. The element margins
     are the spacing; the grid gap has nothing left to separate. */
  row-gap: 0;
  padding: 40px 44px;
}

.sk-home-hero--tight .sk-home-lead {
  max-width: 720px;
}

@media (max-width: 620px) {
  .sk-home-hero--tight {
    padding: 27px 20px;
  }
}

/* The "Find a tool" button is the single action on the page, so it is the only
 * primary button. The secondary variant stays defined for the services page. */
.sk-home-button {
  min-height: 44px;
}
/* A shorter hero on a desktop.
 *
 * At 1440 the hero was 564px tall, which put the Popular Tools section below a
 * 760px fold. The brief asks for a tool to be findable in under ten seconds, and
 * a visitor who has to scroll once to see any tool at all has already spent some
 * of those. The headline is capped so it stays on two lines at full width rather
 * than growing to fill the space, and the padding comes down. Nothing is removed,
 * only tightened.
 *
 * The heading is capped with ch units as well as a max size: 16ch keeps the line
 * break where it reads best rather than wherever the container happens to end. */
@media (min-width: 1024px) {
  .sk-home-hero--tight {
    padding: 34px 40px;
  }

  .sk-home-hero--tight h1 {
    font-size: clamp(2.2rem, 3.3vw, 3.15rem);
    max-width: 17ch;
    margin: 12px 0 12px;
  }

  .sk-home-hero--tight .sk-home-lead {
    max-width: 62ch;
  }

  .sk-home-hero--tight .sk-home-actions {
    margin-top: 20px;
  }

  .sk-home-hero--tight .sk-home-proof {
    margin-top: 18px;
  }
}

/* Home page tokens.
 *
 * The .sk-home-page rule above cannot supply these, because no page carries
 * that class. Declared on the front page's content wrapper instead, so the
 * hero and sections stop inheriting theme colours for --sk-ink, --sk-muted,
 * --sk-line and --sk-soft. Scoped to body.home so no other page is touched, and
 * deliberately not scoped any wider: a tool page that re-declares these on its
 * own wrapper must keep winning.
 *
 * The max-width and padding on the .sk-home-page rule stay unused. The theme's
 * .entry-content owns the page width, and adding that wrapper div to the home
 * page would narrow the hero. Do not add it without deciding that on purpose.
 */
body.home .entry-content {
  --sk-ink: #28323a;
  --sk-muted: #66727b;
  --sk-purple: #68438b;
  --sk-purple-dark: #452b61;
  --sk-line: #e5ddec;
  --sk-soft: #f8f4fa;
}

/* Home page tokens.
 *
 * The .sk-home-page rule above cannot supply these, because no page carries
 * that class. Declared on the front page's content wrapper instead, so the
 * hero and sections stop inheriting theme colours for --sk-ink, --sk-muted,
 * --sk-line and --sk-soft. Scoped to body.home so no other page is touched, and
 * deliberately not scoped any wider: a tool page that re-declares these on its
 * own wrapper must keep winning.
 *
 * The max-width and padding on the .sk-home-page rule stay unused. The theme's
 * .entry-content owns the page width, and adding that wrapper div to the home
 * page would narrow the hero. Do not add it without deciding that on purpose.
 */
body.home .entry-content {
  --sk-ink: #28323a;
  --sk-muted: #66727b;
  --sk-purple: #68438b;
  --sk-purple-dark: #452b61;
  --sk-line: #e5ddec;
  --sk-soft: #f8f4fa;
}

/* The accent override, re-declared here for the same reason
   appearance-tint.css repeats it for .sk-home-page and .sk-services-page.
   html[data-sk-accent] is always set, default included, so --sk-purple is
   already var(--sk-accent) on the root. An inherited value loses to a
   declaration on the element itself, so without this the home page would keep
   the purple literal and ignore the visitor's chosen accent. */
html[data-sk-accent] body.home .entry-content {
  --sk-purple: var(--sk-accent);
  --sk-purple-dark: var(--sk-accent);
  --skh-purple: var(--sk-accent);
  --skh-purple-dark: var(--sk-accent);
  --skr-purple: var(--sk-accent);
  --skr-purple-dark: var(--sk-accent);
}