/* ============================================================
   PROSPECT — Global Stylesheet
   Site reset, prose tokens, site-specific pattern extensions,
   and the single RESPONSIVE section.

   ------------------------------------------------------------
   BRAND SOURCE OF TRUTH
   ------------------------------------------------------------
   Colours, typography, spacing, effects, the webfonts, and the
   shared content-pattern library (nav, footer, buttons, wells,
   bubbles, tables, pillar cards, tag chips, chains, fade-ins)
   are NOT defined here. They live in the Prospect Context
   Protocol, mounted at `brand/` as a git submodule:

       https://github.com/PROSPECT-TECH-LTD/Prospect-Context-Protocol

   `brand/styles.css` is that system's single entry point — an
   import manifest for `brand/tokens/*.css` plus
   `brand/foundations/patterns.css`. Change a token there and it
   lands here on the next submodule bump; nothing in this repo
   needs editing. Do not copy brand values into this file: a
   literal hex or px here is a value that has stopped syncing.

   To pull brand changes in:
       git submodule update --remote brand

   ------------------------------------------------------------
   CASCADE LAYERS
   ------------------------------------------------------------
   Four tiers, lowest first:

     reset   the universal margin/padding/box-sizing reset
     brand   the design system (imported below)
     base    this file + the three page stylesheets
     ―――     the RESPONSIVE section at the end of this file,
             deliberately UNLAYERED, so it beats all three

   The reset MUST sit below `brand`. Layers beat specificity
   outright, so a `*, *::before, *::after { margin: 0; padding: 0 }`
   in `base` silently zeroes the padding of every `.definition-well`,
   `.section-wrap` and `.pattern-table-wrap` the brand library
   defines, no matter how specific those selectors are. That is not a
   theoretical hazard — it is exactly what happened the first time
   this file was layered. Its own layer, ordered first, is the fix.

   Unlayered rules always beat layered ones regardless of file
   order or specificity. That is what lets the breakpoint rules
   below override page-specific rules in index.css / isaac.css /
   contact.css even though those files load later — no
   !important, no specificity games. (Inline style="" attributes
   would still win over all three, which is one reason the markup
   carries none.)

   The `layer(brand)` on the import is load-bearing: without it
   the design system's rules would be unlayered and would outrank
   every site rule here. With it, this file can still override any
   pattern it needs to, and anything it does NOT override stays
   live-linked to the brand repo.
   ============================================================ */
@layer reset, brand, base;

@import url('../brand/styles.css') layer(brand);

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
}

@layer base {

:root {
  /* ── Site-level prose tokens ──
     Single source of truth for page-level prose. Every un-boxed
     paragraph across index / isaac / contact moves together from
     here. The VALUES are brand tokens — this block only maps the
     design system's scale onto the site's own class names. */
  --body-font:        var(--font-body);
  --body-weight:      var(--weight-regular);
  --body-size:        var(--body-md);          /* 16.5px editorial reading size */
  --body-line:        var(--leading-body);     /* 1.62 */
  --body-color:       var(--text);
  --body-color-muted: var(--text-muted);
  --body-align:       left;                    /* ragged right, never justified */

  /* Slightly larger prose (section openers). */
  --body-size-lg:     var(--body-lg);

  /* Section ledes. Libre Franklin 600 with tight tracking — the
     migration retired italic display outright, so this is a weight
     and size step, never a style or family shift. */
  --body-intro-size:   var(--display-md);
  --body-intro-line:   var(--leading-snug);
  --body-intro-weight: var(--weight-semibold);
  --body-intro-track:  var(--track-heading);
  --body-intro-color:  var(--text);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --accent-fill, not --accent-soft: the token was renamed on 17 August
   2026 and this rule kept the old name, so the selection colour has been
   silently falling back to the browser default ever since. */
::selection { background: var(--accent-fill); color: var(--forest-deep); }

img, svg { display: block; max-width: 100%; }

/* Buttons are excluded deliberately. This rule lives in `base`, which
   outranks `brand`, and layers beat specificity outright — so a bare
   `a { color: inherit }` overrode `.btn:hover`'s white text on every
   anchor-based button on the site. The span-based buttons (the product
   cards) were unaffected, which is why only the contact CTA looked
   broken. Fixed 23 August 2026. */
a:not(.btn):not(.btn-fill) { color: inherit; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Placeholder reference tags ── */
.ref {
  display: none;
}

/* ============================================================
   BODY TEXT
   The one place page-level prose is styled. Every class listed
   below takes its type from the --body-* tokens above; the
   page stylesheets only set layout (margins, max-width) and
   deliberate exceptions. Add a new prose class by adding its
   name to the relevant list here — nothing else needed.
   ============================================================ */
.body-text,
.bubble__text,
.mission-vision__quote,    /* index — Our Mission intro */
.who-we-are__intro,        /* index — Who We Are intro */
.problems__intro,          /* index — Problems We Solve intro */
.use-case__body,           /* index — use-case copy */
.product-card__desc,       /* index — Our Products - ISAAC description */
.contact-cta__support,     /* index — contact CTA support line */
.isaac-hero__lede,         /* isaac — hero lede */
.isaac-name__body,         /* isaac — acronym body */
.isaac-fn__body,           /* isaac — function copy */
.isaac-chain__item,        /* isaac — logic chain */
.isaac-compare-close,      /* isaac — comparison close */
.isaac-signup__body,       /* isaac — waitlist support copy */
.contact-body__lede,       /* contact — side lede */
.contact-header__support { /* contact — header support line */
  font-family: var(--body-font);
  font-weight: var(--body-weight);
  font-style: normal;
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--track-body);
  color: var(--body-color);
  text-align: var(--body-align);
}

/* Larger prose — same family/colour, one step up in size. */
.body-text--lg,
.who-we-are__intro,
.isaac-name__body {
  font-size: var(--body-size-lg);
}

/* Muted prose — same type, softer colour. */
.body-text--muted,
.contact-cta__support,
.isaac-signup__body,
.contact-header__support {
  color: var(--body-color-muted);
}

/* Section ledes — the line that opens a section. Display weight,
   tight tracking, never italic. */
.body-text--intro,
.isaac-problem__intro {    /* isaac — Problem intro */
  font-family: var(--font-display);
  font-weight: var(--body-intro-weight);
  font-style: normal;
  font-size: var(--body-intro-size);
  line-height: var(--body-intro-line);
  letter-spacing: var(--body-intro-track);
  color: var(--body-intro-color);
  text-align: var(--body-align);
}

/* ============================================================
   SITE EXTENSIONS TO THE BRAND PATTERN LIBRARY
   Everything below is a genuine site-only addition or a
   deliberate override of brand/foundations/patterns.css. Keep
   this list short: anything that belongs to the brand belongs
   upstream in the Context Protocol, not here.
   ============================================================ */

/* Nav and footer sit on the page ground, not the raised --cream
   surface the brand library gives them. One continuous field from the
   top of the nav to the bottom of the footer; the structural break is
   carried by the rules that were always there — the parchment hairline
   under the nav (which doubles as the scroll-progress track) and the
   gold rule above the footer — rather than by a change of fill.

   NOTE: .site-nav and .site-footer are website-only components, so
   this arguably belongs upstream in brand/foundations/patterns.css
   rather than as an override here. Move it there and delete this block
   when the Context Protocol is next updated. */
.site-nav,
.site-footer { background: var(--bg); }

/* Scroll-progress rule needs to sit above the nav's own border. */
.section-branch { z-index: 1; }

/* A band followed by more content in the same section carries the gap
   below it; the last band in a section leaves it to the section's own
   bottom padding. */
.two-col:not(:last-child) { margin-bottom: 32px; }

/* Scroll rather than clip: `overflow: hidden` silently swallowed the
   whole table once the available width dropped below its min-content
   width (the Objective Hierarchy table simply disappeared). */
.pattern-table-wrap { overflow-y: hidden; }

.pattern-table-wrap--dark .pattern-table { max-width: 980px; margin: 0 auto; }

/* Two columns, filled top-to-bottom then across (4 items, then the
   remaining 3) — fills the width instead of one long single column
   with empty space beside it. */
.green-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: row;
  grid-auto-flow: none;
}

/* Five items in a three-column grid: the second row is deliberately
   pushed right so it sits under the last two columns rather than the
   first two. Delete these two rules to let it flow left instead. */
.numbered-steps__grid .numbered-steps__item:nth-child(4) { grid-column: 2; }
.numbered-steps__grid .numbered-steps__item:nth-child(5) { grid-column: 3; }

/* Comparison table — the Isaac column reads as the stronger option at
   every width. The brand library frames the column; these two rules
   close the box top and bottom, which is specific to this table. */
.pattern-table-wrap--striped .pattern-table tbody tr:first-child td.pattern-table__cell-isaac { border-radius: 0; }
.pattern-table-wrap--striped .pattern-table tbody tr:last-child td.pattern-table__cell-isaac {
  border-bottom: var(--border-2) solid var(--gold);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
}

/* Non-striped variant of the same convention. */
.isaac-compare-wrap .pattern-table td.pattern-table__cell-isaac {
  color: var(--gold);
  border-left: 1px solid var(--gold);
  padding-left: 16px;
}

/* Pull quotes carrying the gold accent spine. */
.mission-vision__quote,       /* Index: ── 1.2 — Our Mission ── */
.isaac-compare-quote          /* Isaac: Comparison Quote */
{
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(23px, 2.8vw, 26px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--text);
  border-left: var(--border-3) solid var(--gold);
  padding-left: 28px;
  margin-bottom: 18px;
}

}

/* ============================================================
   RESPONSIVE — three steps, two knobs, one place
   ------------------------------------------------------------
   Step 1  FULL    wider than --bp-mid   → the rules above
   Step 2  MID     <= --bp-mid           → first @media block
   Step 3  MOBILE  <= --bp-mobile        → second @media block
                   (mobile is also <= --bp-mid, so it inherits the
                    mid-step rules and only states the differences)

   Every responsive rule for every page is in these two blocks, so
   there are exactly two numbers to tune. CSS cannot read a custom
   property inside a media condition, so each number appears twice —
   once as a variable (available to calc(), JS and documentation) and
   once in its @media condition, directly below. Keep the pairs equal.

        --bp-mid     1024px
        --bp-mobile   600px
   ============================================================ */
:root {
  --bp-mid:    1024px;
  --bp-mobile:  600px;
}

/* ─────────────────────────────────────────────────────────────
   STEP 2 — MID  (tablet / small laptop)
   Multi-column layouts collapse to one column here. This is the
   step where things were previously being squeezed rather than
   stacked.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── Tokens ──
     The full-size gutter is the brand's --gutter (48px). This step
     and the mobile step below are the site's own. */
  :root {
    --gutter: 32px;
  }

  /* ── Shared: any two-column band becomes a single column ──
     Plain declarations are enough: this section is unlayered, so it
     outranks the .two-col--even / --wide modifiers in the base layer
     regardless of their specificity. */
  .two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-wrap { padding: 36px var(--gutter) 72px; }

  /* ── Nav ── */
  .site-nav__links   { gap: 26px; }
  .site-nav__wordmark { font-size: 20px; letter-spacing: 10px; }

  /* ── Shared components ── */
  .pillar-row     { grid-template-columns: repeat(3, 1fr); }
  /* minmax(0, …) rather than 1fr: a bare 1fr track is floored at the
     item's min-content width, which a card holding a nowrap button can
     push wider than the section. */
  .products-row   { grid-template-columns: minmax(0, 1fr); }

  .numbered-steps__grid { grid-template-columns: repeat(2, 1fr); }
  /* Items 4 and 5 are pinned to columns 2 and 3 at full size; with only
     two columns left that would spill into a phantom third column. */
  .numbered-steps__grid .numbered-steps__item { grid-column: auto; }

  .pattern-table-wrap        { padding: 26px 28px; }
  .pattern-table-wrap--dark  { padding: 32px var(--gutter); }

  /* ── index — hero ── */
  .hero          { min-height: 78vh; }
  .hero__content { padding: 56px var(--gutter) 0; }

  /* ── index — use-case bands stack, animation above copy ── */
  .use-case-section { padding-top: 16px; margin-bottom: 36px; }
  .use-case__row,
  .use-case-section--reverse .use-case__row {
    flex-direction: column;
    min-height: 0;
    gap: 0;
  }
  .use-case__animation,
  .use-case__text { flex: none; width: 100%; }
  .use-case__text { padding: 24px 0 0; }
  .use-case__more {
    max-width: var(--content-max);
    margin: 28px auto 0;
    padding: 0 var(--gutter);
  }

  /* ── isaac — hero ──
     The artwork is a background layer on an absolutely positioned box,
     so at full size it sits *behind* the copy. Here it becomes a normal
     block in the flow, ordered after the text and before the quote
     section, and can no longer overlap anything. aspect-ratio matches
     the source file (1536 × 1024) so nothing is cropped. */
  .isaac-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .isaac-hero__content {
    order: 1;
    padding: 40px var(--gutter) 0;
  }
  .isaac-hero__image {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 640px;
    margin: 24px auto 0;
    aspect-ratio: 1.5;
    background-position: center bottom;
    background-size: contain;
  }
  /* The scrim only exists to protect text sitting on top of the
     artwork; nothing overlaps now, so it would just wash the image. */
  .isaac-hero__scrim { display: none; }
  .isaac-hero__lede  { max-width: none; }

  /* ── isaac — function sections ── */
  .isaac-fn-section { padding-top: 16px; margin-bottom: 56px; }
  .isaac-fn__image-wrap,
  .isaac-fn-section--reverse .isaac-fn__image-wrap {
    float: none;
    width: 46%;
    max-width: 300px;
    margin: 0 auto 24px;
  }

  /* ── isaac — paired boxes ──
     The base --fill-right rules set `flex: 0 0 460px` on the first
     child. Once the row becomes a column that 460px basis is read as a
     *height*, which is where the large empty gap between Ranking
     Criteria and the Output box came from. Both children are reset
     explicitly here (the old reset used `> *`, which lost on
     specificity; the layer would settle it now either way). */
  .isaac-fn__pair,
  .isaac-fn__pair--left,
  .isaac-fn__pair--fill-right {
    flex-direction: column;
    gap: 20px;
  }
  .isaac-fn__pair > *,
  .isaac-fn__pair--left > *,
  .isaac-fn__pair--fill-right > :first-child,
  .isaac-fn__pair--fill-right > :last-child {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 !important;
  }
  .isaac-tags--grid .isaac-tags { flex-wrap: wrap; }

  /* ── contact ── */
  .contact-header { padding: 64px var(--gutter) 32px; }
  .contact-header__row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 28px;
  }
  .contact-header__graphic {
    flex-basis: auto;
    width: 80%;
    max-width: 620px;
    margin: 0 auto;
    display: block;
  }
  .contact-header__anchor { max-width: 100%; }
  .contact-body {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 36px var(--gutter) 72px;
  }
  .contact-body__lede { max-width: none; }
}

/* ─────────────────────────────────────────────────────────────
   STEP 3 — MOBILE
   Everything is a single column by now; this step is about
   chrome, spacing, type scale and turning tables into lists.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Tokens ──
     --gutter-sm is the brand's own mobile gutter token. */
  :root {
    --gutter:    var(--gutter-sm);
    --body-size: 16px;
  }

  /* ── Nav ── */
  .site-nav__inner    { padding: 14px var(--gutter); }
  .site-nav__brand    { gap: 10px; }
  .site-nav__mark     { width: 24px; height: 24px; }
  .site-nav__wordmark { font-size: 15px; letter-spacing: 5px; }
  .site-nav__links    { gap: 14px; }
  /* 11px is the system's floor — nothing is set below it. */
  .site-nav__link     { font-size: 11px; letter-spacing: var(--track-mono); }

  /* ── Rhythm ── */
  .section-wrap  { padding: 28px var(--gutter) 56px; }
  .section-label { font-size: 11px; letter-spacing: var(--track-mono); }
  .two-col       { gap: 22px; }

  .definition-well,
  .green-list,
  .numbered-steps { padding: 24px 22px; }
  .bubble         { padding: 20px 20px 18px; }
  .status-console { padding: 24px 22px; }

  /* ── index — hero ──
     Below this breakpoint the iframe carries the portrait companion
     drawing rather than the wide one — js/main.js picks the file at this
     same 600px, so the two must stay in step.

     The whole graphic has to sit on the first screen, so that the first
     scroll goes straight to the quote rather than dragging the foot of a
     drawing up after it. The drawing is therefore the largest 3:4 box
     that fits in what is left of the viewport once the nav and the
     wordmark block are taken out:

        54px   the sticky nav at this breakpoint — 14px x 2, the 24px
               mark, and its hairline bottom rule
       127px   the wordmark block — 44px of padding, the 40px mark, the
               tagline and its 20px lead, measured
        41px   the gap under the tagline, twice: once above the drawing and
               once below it, so the graphic is framed rather than run off
               the bottom edge of the screen. 127 + 41 = the 168px the
               artwork is offset by inside the hero, which is also exactly
               how much taller than the artwork the hero is.
       263px   the three summed — the figure taken out of the viewport

     The first screen then works out at 54 + 168 + (100svh − 263) =
     100svh − 41, so the graphic fits with its foot one gap clear of the
     fold, by construction rather than by luck. Change any one of those
     numbers and the others have to follow.

     svh, not vh: on a phone vh is the viewport with the browser chrome
     rolled away, which is not what the visitor sees on arrival. The vh line
     above each svh one is the fallback for anything that cannot parse the
     unit — which is why these are paired declarations rather than a custom
     property, since an unknown unit inside a custom property survives
     parsing and takes the property down at substitution time instead.

     min-height uses 100vw where the width below uses 100%: a percentage in
     min-height would resolve against the parent's height, not its width.
     The two differ only by a classic scrollbar, and only in a desktop
     window narrowed past this breakpoint, where the cost is a sliver of air
     under the tagline rather than a cropped drawing. */
  .hero {
    min-height: calc(168px + min(100vw, calc((100vh - 263px) * 3 / 4)) * 4 / 3);
    min-height: calc(168px + min(100vw, calc((100svh - 263px) * 3 / 4)) * 4 / 3);
  }
  .hero__animation {
    width: min(100%, calc((100vh - 263px) * 3 / 4));
    width: min(100%, calc((100svh - 263px) * 3 / 4));
    margin-inline: auto;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
  /* The scrim exists to protect the wordmark where the artwork runs under
     it. Here the artwork is pinned to the foot of the hero and the hero is
     exactly 168px taller than the artwork, so the drawing always starts
     168px down however tall the screen is and the fade can be given in px
     and be clear of it every time. A percentage fade would wash the whole
     head of the drawing. */
  .hero__scrim {
    background: linear-gradient(180deg,
      var(--bg) 0,
      var(--bg) 92px,
      color-mix(in srgb, var(--bg) 0%, transparent) 158px);
  }
  .hero__content   { padding: 44px var(--gutter) 0; }
  .hero-quote,
  .isaac-quote     { padding: 40px var(--gutter) 48px; }

  /* Five pillars become a swipeable row rather than five tall cards. */
  .pillar-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .pillar-card { scroll-snap-align: start; }

  .numbered-steps__grid { grid-template-columns: 1fr; }
  .stat-trio            { grid-template-columns: 1fr; gap: 16px; }
  .stat-trio__item      { border-right: none; }

  /* Button labels are mono, uppercase and widely letter-spaced, which
     makes the longer ones (e.g. "Join the early access programme")
     wider than a phone. nowrap held them on one line and pushed their
     card past the section edge, so they wrap here instead. */
  .btn {
    white-space: normal;
    text-align: center;
    padding: 14px 22px;
  }
  .product-card       { padding: 28px 22px; }
  .product-card__cta  { align-self: stretch; }

  /* ── isaac ── */
  .isaac-hero__image { max-width: none; margin-top: 18px; }
  .isaac-name__acronym { gap: 20px 28px; margin: 22px 0 28px; }
  .isaac-name__letter  { min-width: 84px; }
  .isaac-fn__image-wrap,
  .isaac-fn-section--reverse .isaac-fn__image-wrap {
    width: 68%;
    max-width: 240px;
  }
  .isaac-signup__form   { flex-direction: column; max-width: 100%; }
  .isaac-signup__submit { width: 100%; }

  /* ── contact ── */
  .contact-header        { padding: 48px var(--gutter) 28px; }
  .contact-form__row     { grid-template-columns: 1fr; }
  .contact-header__graphic { width: 100%; }

  /* ── Footer ── */
  .site-footer__inner { flex-direction: column; padding: 40px var(--gutter) 32px; }
  .site-footer__col   { align-items: flex-start; }

  /* ── Tables become stacked lists ── */
  .pattern-table-wrap { padding: 22px 20px; }
  .pattern-table,
  .pattern-table thead,
  .pattern-table tbody,
  .pattern-table tr,
  .pattern-table th,
  .pattern-table td { display: block; }
  .pattern-table thead { display: none; }
  .pattern-table tr    { margin-bottom: 18px; }
  .pattern-table tr:last-child { margin-bottom: 0; }
  .pattern-table td {
    border-bottom: none;
    padding: 4px 0;
    width: auto;
  }
  /* Matching specificity so the accent cell drops its nowrap / 1% width
     without needing !important. */
  .pattern-table td.pattern-table__accent {
    width: auto;
    white-space: normal;
    padding-top: 10px;
  }

  /* Row dividers survive the switch to stacked blocks: the rule moves
     from the cells to the row, so every row still closes with a line
     exactly as it does at wider widths. The comparison table opts out —
     its rows are already separated by the key and the gold column. */
  .pattern-table-wrap:not(.isaac-compare-wrap) .pattern-table tr {
    border-bottom: 1px solid var(--parchment);
    padding-bottom: 14px;
  }
  .pattern-table-wrap:not(.isaac-compare-wrap) .pattern-table tr:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ── isaac — "Why not use a general AI chat?" comparison ──
     Stacked cells lose the column headers, so the header row is
     re-shown as a key at the top of the table and the ISAAC answers
     are set in gold. The pairing then reads: plain = general AI chat,
     gold = ISAAC. */
  .isaac-compare-wrap .pattern-table thead {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--parchment);
  }
  .isaac-compare-wrap .pattern-table thead::before {
    content: 'Key';
    display: block;
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    font-size: 11px;
    letter-spacing: var(--track-mono-wide);
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 12px;
  }
  .isaac-compare-wrap .pattern-table thead tr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
  }
  .isaac-compare-wrap .pattern-table th {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border-bottom: none;
    color: var(--forest-mid);
  }
  .isaac-compare-wrap .pattern-table th::before {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 1px solid var(--stone);
    background: var(--linen);
    border-radius: var(--radius-1);
  }
  .isaac-compare-wrap .pattern-table th.pattern-table__th-isaac { color: var(--gold); }
  .isaac-compare-wrap .pattern-table th.pattern-table__th-isaac::before {
    background: var(--gold);
    border-color: var(--gold);
  }

  .isaac-compare-wrap .pattern-table tr { margin-bottom: 24px; }
  .isaac-compare-wrap .pattern-table td {
    padding: 6px 0 6px 14px;
    border-left: 1px solid var(--parchment);
  }
  .isaac-compare-wrap .pattern-table td.pattern-table__cell-isaac {
    color: var(--gold);
    border-left-color: var(--gold);
  }
}