/*
 * Supporting styles only. Colours, typography and layout widths come from
 * theme.json, which is generated from the Next.js design tokens — do not
 * hard-code them here.
 */

/* The faint grid the hero sits on, matching the built site. */
.sigmadev-grid {
  position: relative;
  isolation: isolate;
}

.sigmadev-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(147, 161, 189, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 161, 189, 0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent);
  mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent);
}

/* The dark band. Two colours carry this brand: the hero, the closing call to
   action and the footer are full-bleed deep blue-black, everything between
   them is white. Headings and body copy invert inside. */
.sigmadev-band-dark { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-dark-muted); }
.sigmadev-band-dark h1, .sigmadev-band-dark h2, .sigmadev-band-dark h3, .sigmadev-band-dark h4 { color: var(--wp--preset--color--on-dark); }
.sigmadev-band-dark p, .sigmadev-band-dark li { color: var(--wp--preset--color--on-dark-muted); }
.sigmadev-band-dark .sigmadev-eyebrow { color: var(--wp--preset--color--accent-soft); }
.sigmadev-band-dark .sigmadev-stat__value { color: var(--wp--preset--color--on-dark); }
.sigmadev-band-dark .sigmadev-linklist a { color: var(--wp--preset--color--on-dark-muted); }
.sigmadev-band-dark .sigmadev-linklist a:hover, .sigmadev-band-dark .sigmadev-linklist a:focus-visible { color: var(--wp--preset--color--on-dark); }
.sigmadev-band-dark .wp-block-columns, .sigmadev-band-dark .wp-block-column, .sigmadev-band-dark hr { border-color: rgba(147, 161, 189, 0.18) !important; }

.sigmadev-hero { position: relative; overflow: hidden; }
.sigmadev-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(58% 50% at 78% 18%, rgba(47, 107, 255, .32), transparent 70%); }

/* The working-stack rail. The list is duplicated in the markup so the -50%
   translation loops seamlessly; the copy is hidden from assistive tech. */
.sigmadev-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.sigmadev-marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: .75rem; margin: 0; padding: 0 .75rem 0 0; list-style: none; }
.sigmadev-marquee__track li { white-space: nowrap; border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: .5rem 1rem; font-family: var(--wp--preset--font-family--heading); font-size: .875rem; font-weight: 500; }

/* The engagement steps. */
.sigmadev-step__index { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.875rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--border); -webkit-text-stroke: 1px var(--wp--preset--color--accent); }

.sigmadev-glow {
  position: relative;
  isolation: isolate;
}

.sigmadev-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(58% 60% at 20% 0%, rgba(47, 107, 255, .28), transparent 70%);
}

/* Small uppercase label above section headings. */
.sigmadev-eyebrow {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

/* Cards. Flat and bordered — the previous theme's glassmorphism is gone. */
.sigmadev-card {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 10px;
}

/* Body copy reads better against a measure than against the full 1200px wide
   size, which is set for card grids rather than for prose. */
.sigmadev-lede {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Cards in a row rarely hold the same amount of copy. Pushing the footer of
   each card to the bottom keeps the headline metrics on one line across the
   row instead of stepping down wherever the paragraph above happened to end.
   A column is a flex *item* by default, not a flex container, so it has to be
   made one before margin-top:auto means anything. */
.sigmadev-cases .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* On the tallest card the auto margin resolves to zero, which would put the
   footer's rule straight through the last line of copy. The gap therefore
   belongs to the paragraph above it, where it is guaranteed. */
.sigmadev-cases .wp-block-column > p:last-of-type {
  margin-bottom: 1.5rem;
}

.sigmadev-cardfoot {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* The stat row is one panel, so the columns are divided rather than spaced. */
.sigmadev-statrow .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--border);
}

.sigmadev-stat__value {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wp--preset--color--text);
}

/* ---------------------------------------------------------------------------
   Capability rail
   --------------------------------------------------------------------------- */

.sigmadev-rail .wp-block-column + .wp-block-column {
  border-left: 1px solid var(--wp--preset--color--border);
}

@media (max-width: 781px) {
  .sigmadev-statrow .wp-block-column + .wp-block-column,
  .sigmadev-rail .wp-block-column + .wp-block-column {
    border-left: 0;
    border-top: 1px solid var(--wp--preset--color--border);
  }
}

.sigmadev-pillar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sigmadev-pillar__icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--wp--preset--color--accent);
}

.sigmadev-pillar__index {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: var(--wp--preset--color--muted);
}

/* The header follows the reader down the page. Block attributes cannot express
   position: sticky, so the header part carries this class instead. */
.sigmadev-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* On a phone the title, the hamburger and the CTA cannot share one row, and the
   CTA wrapping onto a second line doubles the header's height on every page.
   It is dropped there instead: the overlay menu carries Contact, and the hero's
   own primary button is immediately below. */
@media (max-width: 599px) {
  .sigmadev-header .wp-block-buttons {
    display: none;
  }
}

/* Footer link columns read as navigation, not as prose lists. */
.sigmadev-linklist {
  list-style: none;
  padding-left: 0;
}

/* theme.json styles links for prose, where an underline and the accent colour
   are right. A column of navigation is not prose: underlined accent text there
   reads as unstyled markup, so the footer lists opt out and earn the underline
   on hover instead. */
.sigmadev-linklist a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}

.sigmadev-linklist a:hover,
.sigmadev-linklist a:focus-visible {
  color: var(--wp--preset--color--text);
  text-decoration: underline;
}

/* Assurances beside the brief form. Marked with a tick rather than a bullet,
   since each line is a commitment rather than an item in a list. */
.sigmadev-assurances {
  list-style: none;
  padding-left: 0;
}

.sigmadev-assurances li {
  position: relative;
  padding-left: 1.5rem;
}

.sigmadev-assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 1.5px solid var(--wp--preset--color--signal);
  border-bottom: 1.5px solid var(--wp--preset--color--signal);
  transform: rotate(-45deg);
}

/* Keyboard focus must stay obvious; the block editor's default is too subtle. */
.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible {
  outline: 2px solid var(--wp--preset--color--signal);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Motion. Mirrors the Next.js build so the two deployments feel the same.
   Every rule is wrapped in prefers-reduced-motion, so a visitor who has asked
   for less movement gets a static but fully usable site.
   --------------------------------------------------------------------------- */

@keyframes sigmadev-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sigmadev-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Each top-level section settles in on load. */
  .wp-site-blocks > * {
    animation: sigmadev-rise 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .sigmadev-marquee__track {
    animation: sigmadev-marquee 42s linear infinite;
  }

  .sigmadev-marquee:hover .sigmadev-marquee__track,
  .sigmadev-marquee:focus-within .sigmadev-marquee__track {
    animation-play-state: paused;
  }

  /* Scroll-driven reveal where the browser supports it. Progressive
     enhancement: without support the content is simply already visible, so
     nothing on the page depends on it. */
  @supports (animation-timeline: view()) {
    .sigmadev-card,
    .sigmadev-reveal {
      animation: sigmadev-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }

  a, button, .wp-element-button {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
  }

  a:active, button:active, .wp-element-button:active { transform: scale(0.97); }

  .sigmadev-pillar,
  .sigmadev-interactive {
    transition: transform 300ms ease-out, background-color 300ms ease-out;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sigmadev-pillar:hover,
  .sigmadev-interactive:hover {
    background: var(--wp--preset--color--raised);
  }

  .sigmadev-interactive:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Brief form. Field colours come from theme.json presets so the form follows
   any palette change made in the Site Editor. */
.sigmadev-form {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 10px;
  padding: 2rem;
}

.sigmadev-form__grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .sigmadev-form__grid { grid-template-columns: 1fr 1fr; }
  .sigmadev-form__field--wide { grid-column: 1 / -1; }
}

.sigmadev-form__field { margin: 0; }

.sigmadev-form__field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--wp--preset--color--muted);
}

.sigmadev-form__field label span { opacity: 0.7; }

.sigmadev-form input,
.sigmadev-form select,
.sigmadev-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 6px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--text);
  font-family: inherit;
  font-size: 1rem;
}

.sigmadev-form input:focus,
.sigmadev-form select:focus,
.sigmadev-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.sigmadev-form textarea { resize: vertical; }

.sigmadev-form button[type="submit"] {
  margin-top: 1.75rem;
  width: 100%;
  cursor: pointer;
  border: 0;
}

.sigmadev-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

/* Kept in the layout so the message does not shift the form when it appears. */
.sigmadev-form__status {
  min-height: 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--wp--preset--color--accent);
}

.sigmadev-form__status[data-error] { color: #B91C1C; }

.sigmadev-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   What we build, and the questions before a first call.
   Both sections are new: the theme previously opened on capability language,
   which reads to a business owner as a list of things they cannot buy.
   --------------------------------------------------------------------------- */

.sigmadev-hero__reassurance {
  max-width: 42rem;
  border-left: 2px solid var(--wp--preset--color--accent-soft);
  padding-left: 1.25rem;
}

.sigmadev-offering h3 { margin: 0; }

/* The "good if" line. Set in body ink rather than muted — it is the sentence a
   scanning reader uses to recognise their own situation, so it has to hold. */
.sigmadev-offering__good {
  color: var(--wp--preset--color--text);
  font-weight: 500;
  padding-top: 1.25rem;
}

.sigmadev-faq .wp-block-details {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-md, 10px);
  padding: 1.5rem 1.75rem;
}

.sigmadev-faq .wp-block-details + .wp-block-details { margin-top: 0.75rem; }

.sigmadev-faq summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--wp--preset--color--text);
}

.sigmadev-faq summary:hover { color: var(--wp--preset--color--accent); }

.sigmadev-faq summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--signal);
  outline-offset: 2px;
}

.sigmadev-faq .wp-block-details p { margin-top: 1rem; max-width: 60ch; }


/* ---------------------------------------------------------------------------
   Corrections found by rendering the theme in a real WordPress install rather
   than reading the markup.
   --------------------------------------------------------------------------- */

/* The button element is deep with a white label, which is right on a light
   page and invisible on the deep band — the hero's primary call to action was
   deep-on-deep. On a dark ground it inverts, exactly as the Next.js site does. */
.sigmadev-band-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  background-color: #FFFFFF;
  color: var(--wp--preset--color--deep);
}

.sigmadev-band-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.sigmadev-band-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--deep);
}

.sigmadev-band-dark .is-style-outline > .wp-block-button__link {
  color: var(--wp--preset--color--on-dark);
  border-color: rgba(255, 255, 255, 0.3);
  background-color: transparent;
}

.sigmadev-band-dark .is-style-outline > .wp-block-button__link:hover,
.sigmadev-band-dark .is-style-outline > .wp-block-button__link:focus-visible {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
}

/* The lockup. The header previously showed the wordmark alone, uppercased and
   letterspaced, which is not the brand the rest of the site uses. */
.sigmadev-lockup { align-items: center; }

.sigmadev-lockup__mark {
  display: inline-flex;
  line-height: 0;
}

.sigmadev-lockup__mark svg {
  width: 2rem;
  height: 2rem;
}

.sigmadev-lockup .wp-block-site-title { margin: 0; }

.sigmadev-lockup .wp-block-site-title a { text-decoration: none; }

/* The hero headline. The h1 preset tops out at 3.5rem, which is right for an
   article title and undersized for the one line the hero exists to carry. */
.sigmadev-hero h1 {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem);
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.sigmadev-hero .sigmadev-lede { max-width: 46ch; }

/* The offering icon tile, matching the card marks on the built site. */
.sigmadev-offering__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sigmadev-radius-md, 10px);
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
}

.sigmadev-offering__icon svg { width: 1.25rem; height: 1.25rem; }

/* Anchored cards: the footer links straight to one, so it must not land under
   the sticky-feeling header. */
.sigmadev-offering { scroll-margin-top: 6rem; }

.sigmadev-faq { scroll-margin-top: 6rem; }


/* ---------------------------------------------------------------------------
   Fixed header, motion and the scroll-to-top control.
   Every animation sits behind prefers-reduced-motion, and the reveal's hidden
   state only exists under .sigmadev-armed, which only the footer script adds —
   so without JavaScript nothing is ever hidden.
   --------------------------------------------------------------------------- */

header .sigmadev-header,
.sigmadev-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* Sticky offsets under the admin bar for logged-in users. */
body.admin-bar .sigmadev-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .sigmadev-header { top: 46px; }
}

.sigmadev-scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  box-shadow: 0 18px 44px -22px rgba(11, 18, 32, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out, background-color 200ms ease-out;
}

.sigmadev-scroll-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sigmadev-scroll-top:hover { background: var(--wp--preset--color--accent-deep); transform: translateY(-0.25rem); }

.sigmadev-scroll-top:focus-visible {
  outline: 2px solid var(--wp--preset--color--signal);
  outline-offset: 2px;
}

.sigmadev-scroll-top svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal, armed by the footer script. */
  .sigmadev-armed .sigmadev-card,
  .sigmadev-armed .sigmadev-offering,
  .sigmadev-armed .sigmadev-pillar,
  .sigmadev-armed .sigmadev-faq__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms cubic-bezier(.2, .7, .2, 1), transform 560ms cubic-bezier(.2, .7, .2, 1);
  }

  .sigmadev-armed .sigmadev-in-view {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Micro-interactions, mirroring the built site. */
  a, button, .wp-element-button { transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; }

  .sigmadev-card { transition: transform 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out, opacity 560ms cubic-bezier(.2, .7, .2, 1); }

  .sigmadev-card:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 18px 44px -26px rgba(11, 18, 32, .45);
  }

  .sigmadev-offering__icon { transition: transform 300ms cubic-bezier(.2, .7, .2, 1), background-color 300ms ease-out; }

  .sigmadev-offering:hover .sigmadev-offering__icon {
    transform: scale(1.08) rotate(-3deg);
    background: var(--wp--preset--color--accent-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sigmadev-scroll-top { transition: none; transform: none; }
}


/* ---------------------------------------------------------------------------
   The free tools. The markup is built by assets/js/tools.js, which runs the
   same logic the built site runs — only the styling lives here.
   --------------------------------------------------------------------------- */

.sigmadev-tool__layout { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 900px) {
  .sigmadev-tool__layout { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
  .sigmadev-tool__aside { position: sticky; top: 7rem; }
}

.sigmadev-tool__field { margin-bottom: 1.75rem; }
.sigmadev-tool__field > label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--wp--preset--color--text); }

.sigmadev-tool__hint { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }

.sigmadev-tool__input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--text);
  font: inherit;
  font-size: 1rem;
}

.sigmadev-tool__input:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.25);
}

.sigmadev-tool__group { margin: 0 0 2.5rem; padding: 0; border: 0; }
.sigmadev-tool__group legend { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sigmadev-tool__group-title { font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--text); }

.sigmadev-check__list { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.sigmadev-check__grid { display: grid; gap: 0.5rem; margin-top: 0.75rem; }

@media (min-width: 640px) { .sigmadev-check__grid { grid-template-columns: 1fr 1fr; } }

.sigmadev-check {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-md, 10px);
  cursor: pointer;
  transition: border-color .18s ease;
}

.sigmadev-check:hover { border-color: var(--wp--preset--color--accent); }
.sigmadev-check--inline { align-items: center; padding: 0.75rem; }
.sigmadev-check input { margin-top: 0.25rem; accent-color: var(--wp--preset--color--accent); }
.sigmadev-check--inline input { margin-top: 0; }
.sigmadev-check__label { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.6; color: var(--wp--preset--color--text); }
.sigmadev-check__why { display: block; margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }

.sigmadev-check__flag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--accent);
  vertical-align: middle;
}

.sigmadev-tool__panel {
  padding: 1.75rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-md, 10px);
  background: var(--wp--preset--color--paper);
}

.sigmadev-tool__panel h3 { margin: 0 0 0.5rem; }

.sigmadev-tool__note {
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--paper);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--wp--preset--color--muted);
}

.sigmadev-tool__output {
  margin: 1.25rem 0 0;
  padding: 1rem;
  max-height: 22rem;
  overflow: auto;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--surface);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.sigmadev-tool__output.is-empty { color: var(--wp--preset--color--muted); }

.sigmadev-tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }

.sigmadev-tool__button {
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.sigmadev-tool__button:hover { background: var(--wp--preset--color--accent-deep); }
.sigmadev-tool__status { font-size: 0.875rem; color: var(--wp--preset--color--muted); }

.sigmadev-tool__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--deep);
  color: #FFFFFF !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.sigmadev-tool__cta:hover { background: var(--wp--preset--color--accent-deep); }

.sigmadev-score { display: flex; align-items: center; gap: 1.5rem; }
.sigmadev-score__value { font-family: var(--wp--preset--font-family--heading, inherit); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--wp--preset--color--accent); }
.sigmadev-score__value--large { font-size: 3rem; margin: 0.5rem 0; }
.sigmadev-score__label { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.sigmadev-score__headline { margin: 0.4rem 0 0; font-size: 1.1rem; line-height: 1.35; }
.sigmadev-score__list { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.sigmadev-score__list-title { font-weight: 600; color: var(--wp--preset--color--text); }

.sigmadev-serp { margin-top: 1rem; }
.sigmadev-serp__url { margin: 0; font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.sigmadev-serp__title { margin: 0.25rem 0 0; font-size: 1.25rem; line-height: 1.3; color: var(--wp--preset--color--accent-deep); }
.sigmadev-serp__desc { margin: 0.35rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* The tools index. wp:columns puts every card on one row and never wraps, so
   six of them came out about 90px wide; a grid is the right primitive.
   Capped at three columns so six cards land as two even rows rather than a
   row of four and a pair of orphans. */
.sigmadev-toolgrid {
  display: grid;
  gap: 1.5rem;
  margin-top: 3.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sigmadev-toolgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sigmadev-toolgrid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}

.sigmadev-toolcard {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-lg, 16px);
  background: var(--wp--preset--color--surface);
  text-decoration: none !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.sigmadev-toolcard:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 18px 44px -26px rgba(11, 18, 32, .45);
}

.sigmadev-toolcard__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sigmadev-radius-md, 10px);
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease;
}

.sigmadev-toolcard__icon svg { width: 1.25rem; height: 1.25rem; }

.sigmadev-toolcard:hover .sigmadev-toolcard__icon {
  transform: scale(1.08) rotate(-3deg);
  background: var(--wp--preset--color--accent-deep);
}

.sigmadev-toolcard__name {
  margin-top: 1.5rem;
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--text);
}

.sigmadev-toolcard__summary {
  flex: 1;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

.sigmadev-toolcard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--wp--preset--color--accent);
}

.sigmadev-toolcard__more svg { width: 1rem; height: 1rem; transition: transform .2s ease-out; }
.sigmadev-toolcard:hover .sigmadev-toolcard__more svg { transform: translateX(3px); }


/* The AdSense report. */
.sigmadev-score__caption { display: block; font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.75rem; font-weight: 400; color: var(--wp--preset--color--muted); }
.sigmadev-report { margin-top: 3rem; }
.sigmadev-report__form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.sigmadev-report__form .sigmadev-tool__input { flex: 1 1 16rem; margin-top: 0; }
.sigmadev-report__form .sigmadev-tool__button { flex: 0 0 auto; padding: 0.75rem 1.5rem; }
.sigmadev-report__url { word-break: break-all; margin-top: 1.25rem; }

.sigmadev-report__tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-align: center;
}

.sigmadev-report__tally span { display: block; font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.sigmadev-report__tally strong { display: block; margin-top: 0.25rem; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.5rem; }
.sigmadev-report__tally .is-pass { color: var(--wp--preset--color--positive, #1F7A4C); }
.sigmadev-report__tally .is-fail { color: var(--wp--preset--color--accent); }

.sigmadev-report__actions h4 { margin: 0 0 1rem; font-size: 0.875rem; }
.sigmadev-report__actions ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 1rem; }
.sigmadev-report__actions li { font-size: 0.875rem; line-height: 1.65; color: var(--wp--preset--color--muted); }
.sigmadev-report__actions strong { display: block; color: var(--wp--preset--color--text); }

.sigmadev-report__group { margin-bottom: 2.5rem; }
.sigmadev-report__group h3 { margin: 0 0 1rem; }
.sigmadev-report__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }

.sigmadev-report__list li {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-md, 10px);
}

.sigmadev-report__list li.is-fail { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--paper); }

.sigmadev-report__mark {
  flex: 0 0 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--wp--preset--color--muted);
}

.sigmadev-report__list li.is-pass .sigmadev-report__mark { background: var(--wp--preset--color--positive, #1F7A4C); }
.sigmadev-report__list li.is-fail .sigmadev-report__mark { background: var(--wp--preset--color--accent); }
.sigmadev-report__label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--wp--preset--color--text); }
.sigmadev-report__detail { display: block; margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }


/* ---------------------------------------------------------------------------
   The generic tool renderer. Mirrors the built site's ToolRunner, so a tool
   looks the same on both halves.
   --------------------------------------------------------------------------- */

.sigmadev-tool__form > * + * { margin-top: 1.5rem; }
.sigmadev-tool__results > * + * { margin-top: 1.25rem; }
.sigmadev-tool__input.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.sigmadev-tool__colour { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.sigmadev-tool__swatch { width: 3.5rem; height: 2.75rem; padding: 0.25rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--sigmadev-radius-sm, 6px); background: var(--wp--preset--color--ink); cursor: pointer; }
.sigmadev-tool__colour .sigmadev-tool__input { margin-top: 0; }

.sigmadev-tool__file { display: block; width: 100%; margin-top: 0.5rem; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.sigmadev-tool__file::file-selector-button {
  margin-right: 1rem; padding: 0.6rem 1rem; border: 0; border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--deep); color: #FFFFFF; font: inherit; font-size: 0.875rem; cursor: pointer;
}

.sigmadev-tool__reset { padding: 0; border: 0; background: none; color: var(--wp--preset--color--muted); font: inherit; font-size: 0.875rem; cursor: pointer; }
.sigmadev-tool__reset:hover { color: var(--wp--preset--color--accent); }

.sigmadev-tool__error {
  margin: 0; padding: 1rem; border: 1px solid var(--wp--preset--color--accent);
  border-radius: var(--sigmadev-radius-md, 10px); background: var(--wp--preset--color--paper);
  font-size: 0.875rem; line-height: 1.6; color: var(--wp--preset--color--text);
}

.sigmadev-metrics { display: grid; gap: 1.25rem; margin: 0; }
@media (min-width: 640px) { .sigmadev-metrics { grid-template-columns: 1fr 1fr; } }
.sigmadev-metrics dt { font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.sigmadev-metrics dd { margin: 0.25rem 0 0; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--text); }
.sigmadev-metrics__hint { font-family: inherit !important; font-size: 0.875rem !important; font-weight: 400 !important; line-height: 1.6 !important; color: var(--wp--preset--color--muted) !important; margin-top: 0.35rem !important; }

.sigmadev-tool__scroll { overflow-x: auto; }
.sigmadev-tool__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sigmadev-tool__table th { padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.sigmadev-tool__table td { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--wp--preset--color--border); vertical-align: top; line-height: 1.6; color: var(--wp--preset--color--muted); word-break: break-word; }
.sigmadev-tool__table td:first-child { color: var(--wp--preset--color--text); }

.sigmadev-tool__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--wp--preset--color--muted); }

.sigmadev-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sigmadev-swatches li { overflow: hidden; border: 1px solid var(--wp--preset--color--border); border-radius: var(--sigmadev-radius-sm, 6px); }
.sigmadev-swatches__chip { display: block; height: 4rem; }
.sigmadev-swatches__label { display: block; padding: 0.5rem 0.75rem; background: var(--wp--preset--color--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--wp--preset--color--text); }

.sigmadev-tool__image { max-height: 20rem; width: auto; border: 1px solid var(--wp--preset--color--border); border-radius: var(--sigmadev-radius-sm, 6px); }

.sigmadev-tool__download {
  display: inline-block; margin-top: 0.5rem; padding: 0.55rem 1rem;
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--sigmadev-radius-sm, 6px);
  font-size: 0.875rem; font-weight: 500; text-decoration: none !important; color: var(--wp--preset--color--text);
}
.sigmadev-tool__download:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* The searchable index. */
.sigmadev-toolindex .sigmadev-tool__input { margin-bottom: 1.25rem; }
.sigmadev-toolfilters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }

.sigmadev-toolfilter {
  padding: 0.5rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
  background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.sigmadev-toolfilter:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.sigmadev-toolfilter.is-active { background: var(--wp--preset--color--deep); border-color: var(--wp--preset--color--deep); color: #FFFFFF; }

.sigmadev-toolcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }

.sigmadev-toolcard__plan {
  flex: 0 0 auto; padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--wp--preset--color--deep); color: #FFFFFF;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}

.sigmadev-toolcard__name { margin-top: 0; }
.sigmadev-toolcard__more { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--wp--preset--color--muted); }

/* ---------------------------------------------------------------------------
   The Pro paywall. Shown in place of a tool the visitor has not bought — the
   tool itself is never rendered, so its logic does not reach the page.
   --------------------------------------------------------------------------- */

.sigmadev-pro {
  padding: 2.5rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sigmadev-radius-md, 10px);
  background: var(--wp--preset--color--surface);
}

.sigmadev-pro__badge {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sigmadev-pro__title { margin: 1.25rem 0 0; font-size: 1.5rem; line-height: 1.25; }
.sigmadev-pro__body { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.65; color: var(--wp--preset--color--muted); }

.sigmadev-pro__list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--wp--preset--color--text);
}
.sigmadev-pro__list li { padding-left: 1.5rem; position: relative; }
.sigmadev-pro__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

.sigmadev-pro__button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--sigmadev-radius-sm, 6px);
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none !important;
}
.sigmadev-pro__button:hover { background: var(--wp--preset--color--accent-deep); color: #FFFFFF; }

.sigmadev-pro__signin { margin: 1rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }