/* ============================================================
   Odd Jar — Warm Indie theme styles
   One 1080px container. Heebo + Fira Code. Paper, ink, periwinkle.
   Hard rules: no tinted sections, no shadows, radius ≤ 4px,
   never white text on periwinkle.
   Values are transcribed from design-reference mockups — when
   changing one, cite the mockup file it came from.
   ============================================================ */

:root {
  --oj-gutter: 24px;
  --oj-ink: #111;
  --oj-hairline: #E5E5E5;
  --oj-primary: #6892F3;
  --oj-deep: #3D63C9;
  --oj-warm: #C2410C;
  --oj-muted: #555;
  --oj-placeholder: #767676;
  --oj-mono: 'Fira Code', monospace;
}
/* Spec says the 1080 container has no horizontal padding; the 24px
   gutter exists only below 1080+48 so content never touches the glass. */
@media (min-width: 1128px) {
  :root { --oj-gutter: 0px; }
}

/* ---------- global ----------
   The mockups' universal reset includes box-sizing:border-box — without it
   any padded, width-constrained box (TOC, cards) renders wider than spec. */
*, *::before, *::after { box-sizing: border-box; }
/* Mockups keep the browser-default underline on prose links and remove
   it per-component (nav, cards, TOC, footer, pager). Do the same. */
.wp-block-button__link { text-decoration: none; }

.oj-mono, .is-style-oj-mono {
  font-family: var(--oj-mono);
  font-size: 14px;
  color: var(--oj-muted);
}

/* ---------- flow-gap neutralization ----------
   WP injects margin-block-start:1.25rem on every non-first child of every
   is-layout-flow group (theme.json blockGap, :where() so 0 specificity).
   The mockups have *{margin:0} and space components explicitly — inside oj-
   layout containers that injected gap breaks grid/flex alignment (columns
   drift 20px, stretch-cards render unequal). Zero it here; every intended
   margin below is explicit, transcribed from the mockups. */
.oj-home-hero > *, .oj-home-hero > .wp-block-group > *,
.oj-section > *,
.oj-bundle > *, .oj-bundle > .wp-block-group > *, .oj-deal > *,
.oj-shelf > *, .oj-item > *, .oj-item > .wp-block-group > *,
.oj-testi-row > *,
.oj-trust > *, .oj-numeral-wrap > *,
.oj-svcgrid > *, .oj-svcgrid > .wp-block-group > *,
.oj-posts2 > *, .oj-posts2 > .wp-block-group > *,
.oj-featgrid > *, .oj-feat > *, .oj-feat > .wp-block-group > *,
.oj-facts > *, .oj-fact > *,
.oj-ledger > *, .oj-site > *, .oj-siteline > *,
.oj-svcs2 > *, .oj-svcs2 > .wp-block-group > *,
.oj-gf-grid > *, .oj-layout > *,
.oj-footcols > *, .oj-footcols > .wp-block-group > *,
.oj-postrow > *, .oj-postbody > *,
.oj-fold > *, .oj-foldmain > *, .oj-foldrail > *, .oj-railitem > *,
.oj-sec > *, .oj-sechead > *, .oj-gfcell > *, .oj-relrow > *,
.oj-nextrow > *, .oj-next-prev > *, .oj-next-fwd > *,
.oj-masthead__row > *,
.oj-hero-fig > *, .oj-hero-fig > .wp-block-group > * { margin-block-start: 0; }
/* ...and on the top-level page blocks themselves (children of post-content,
   main, or a query wrapper): the mockups butt landmarks together, all
   spacing is internal padding */
.entry-content > .oj-section, .entry-content > .oj-home-hero,
.entry-content > .oj-layout, .entry-content > .oj-gf-grid,
.wp-site-blocks main > *, .wp-block-query > * { margin-block-start: 0; }
/* ^ WP ≥6.6 emits the constrained gap as ":root :where(...) > *" —
   specificity (0,1,0) — so a bare "main > *" loses; qualify it. */

/* Section rhythm (home.html: section{padding:64px 0}, h2 30/800 + mb 10 with
   inherited 1.7 line-height, .lede mb via the grids' own 36px top margin).
   Dividers render full-viewport in the mockups and only BETWEEN sections —
   the hero/section boundary has none. Sections stay 1080 content boxes, so
   the divider is a full-bleed pseudo. */
.oj-section { position: relative; }
.oj-section + .oj-section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); border-top: 1px solid var(--oj-hairline);
}
body { overflow-x: clip; } /* 100vw includes the scrollbar gutter */
.oj-section > h2 { line-height: 1.7; margin: 0 0 10px; }
.oj-section-pad { padding-top: 64px; padding-bottom: 64px; }
/* the mockup's 1px section border adds flow height; the pseudo doesn't —
   compensate so section rhythm stays pixel-identical down the page */
.oj-section + .oj-section { padding-top: 65px; }
/* about.html rhythm: every section 56px AND bordered (incl. the first) */
.oj-section--divided::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw;
  transform: translateX(-50%); border-top: 1px solid var(--oj-hairline);
}
.oj-section.oj-section--56 { padding: 57px 0 56px; }
.oj-section--56 > h2 { margin-bottom: 12px; }
/* the root layout also injects the 20px flow gap between header/main/footer;
   mockup landmarks butt together (spacing is internal padding) */
.wp-site-blocks > *, main > .entry-content { margin-block-start: 0; }
/* plugin.html section rhythm */
.oj-section--product { border-top: 1px solid var(--oj-hairline); padding: 48px 0 8px; margin-top: 8px; }

/* ---------- masthead ---------- */
.oj-masthead { border-bottom: 1px solid var(--oj-hairline); }
.oj-masthead__row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
/* home.html renders the logo img inline inside its link — the baseline gap
   below it is part of the masthead's rendered 106px height. Core site-logo
   sets line-height:0 on the anchor, which erases that gap; restore the
   mockup's inline text context. */
.oj-masthead .custom-logo, .oj-masthead .oj-logo img { width: 76px; height: auto; display: inline; }
.oj-masthead .wp-block-site-logo, .oj-masthead .wp-block-site-logo a,
.oj-footcols .wp-block-site-logo, .oj-footcols .wp-block-site-logo a {
  line-height: 1.7; font-size: 18px;
}
.oj-footcols .custom-logo { width: 76px; height: auto; display: inline; }

/* Gotcha #2: scope nav styles to the masthead only */
.oj-masthead .wp-block-navigation a {
  font-size: 16px; font-weight: 500; color: var(--oj-ink); text-decoration: none;
}
.oj-masthead .wp-block-navigation a:hover { color: var(--oj-warm); }
.oj-masthead .oj-nav-cart a,
.oj-masthead .oj-nav-cart {
  /* home.html .cart sets family/size/color only — weight 500 inherits from nav a */
  font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); font-weight: 500;
}
.oj-masthead .oj-nav-cart a:hover { color: var(--oj-warm); }

/* ---------- breadcrumb ---------- */
.oj-crumb, .oj-crumb a { font-family: var(--oj-mono); font-size: 14px; }
.oj-crumb { padding: 28px 0 0; }
.oj-crumb a { color: var(--oj-deep); text-decoration: none; }
.oj-crumb a:hover { color: var(--oj-warm); }

/* ---------- hero ---------- */
.oj-warm, .oj-hero .warm, .is-style-oj-warm-word .warm { color: var(--oj-warm); }
.oj-hero-deck { font-size: 20px; color: #333; max-width: 56ch; } /* services.html */
.page-id-729 .oj-hero-deck { max-width: 54ch; } /* support.html */
.oj-hero-h1 { max-width: 18ch; } /* support.html hero h1 measure */
.oj-hero-h1--svc { max-width: 20ch; margin: 0 0 18px; } /* services.html */

/* ---------- two-column layouts with sticky rail ---------- */
/* Gotcha #3: no overflow/height constraints on the rail column */
.oj-layout { display: grid; grid-template-columns: 1fr 340px; gap: 0 72px; align-items: start; }
.oj-layout--320 { grid-template-columns: 1fr 320px; }
.oj-rail-sticky { position: sticky; top: 24px; }
@media (max-width: 900px) {
  .oj-layout, .oj-layout--320 { grid-template-columns: 1fr; }
  .oj-rail-sticky { position: static; }
}

/* ---------- spec line ---------- */
.is-style-oj-specline, .oj-specline {
  font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted);
}

/* ---------- buy box (product rail) — plugin.html .buybox ---------- */
.oj-buybox { border: 1px solid var(--oj-ink); border-radius: 4px; padding: 26px 28px; }
.oj-buybox h2, .oj-buybox .oj-buybox__title { font-size: 20px; font-weight: 800; line-height: 1.7; margin: 0 0 2px; }
.oj-buybox .oj-sale {
  font-family: var(--oj-mono); font-size: 13px; color: var(--oj-warm); font-weight: 500;
  display: block; margin-bottom: 14px;
}
.oj-buybox .wp-block-button { width: 100%; }
/* plugin.html .btn: 16/700; ghost keeps the system's 1px ink border.
   Doubled class outguns SureCart's sc-button__link sizing. */
.oj-buybox .wp-block-button__link, .oj-buybox .wp-block-button .wp-block-button__link {
  width: 100%; text-align: center; padding: 14px 20px; font-size: 16px; font-weight: 700; line-height: 1.7;
}
.oj-buybox .is-style-outline .wp-block-button__link {
  border: 1px solid var(--oj-ink); color: var(--oj-ink); background: #fff;
}
.oj-buybox .is-style-outline .wp-block-button__link:hover { background: var(--oj-ink); color: #fff; }
.oj-buybox .wp-block-buttons > .wp-block-button + .wp-block-button { margin-top: 10px; }
/* .promise is flat text — the 3px periwinkle rule belongs to callouts only */
.oj-promise { font-size: 15px; color: #444; margin-top: 16px; }

/* SureCart price chooser → tier cards (plugin.html .cards; decided from
   buybox-options.html option B). Each tier is a hairline card; the chosen
   card's border goes ink and its name bolds — no radio marker. */
.oj-price-chooser .sc-form-label { display: none; }
.oj-price-chooser .sc-choices { margin: 16px 0 18px; }
.oj-price-chooser .sc-choice {
  border: 1px solid var(--oj-hairline); border-radius: 4px; box-shadow: none; background: #fff;
  padding: 12px 14px; margin: 0;
  cursor: pointer; font-size: 16px; color: var(--oj-ink);
  display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: nowrap;
}
.oj-price-chooser .sc-choice + .sc-choice { margin-top: 10px; }
/* one line per tier (plugin.html .cards li) — defeat any stacked
   direction SureCart's layout CSS applies */
.oj-price-chooser .sc-choice > * { margin-block-start: 0; }
.oj-price-chooser .wp-block-surecart-price-name { flex: 1 1 auto; }
.oj-price-chooser .sc-choice:hover { border-color: var(--oj-muted); }
.oj-price-chooser .sc-choice:focus-visible { outline: 2px solid var(--oj-deep); outline-offset: 2px; }
/* :hover pair keeps the ink border while hovered (bare :hover would outrank --checked) */
.oj-price-chooser .sc-choice--checked, .oj-price-chooser .sc-choice--checked:hover { border-color: var(--oj-ink); }
.oj-price-chooser .sc-choice--checked .wp-block-surecart-price-name { font-weight: 700; }
/* recommended-tier tag, injected by oddjar-core when a product designates
   one (oddjar_recommended_price meta) — its own line under the name */
.oj-price-chooser .oj-price-rec {
  display: block; font-family: var(--oj-mono); font-style: normal;
  font-size: 12px; font-weight: 400; color: var(--oj-muted);
}
/* single-price products: SureCart renders no chooser rows, so a lone mono
   price line stands in (surecart/product-selected-price-amount — the block
   nests its wrapper class, hence the inner override). Hidden whenever tier
   cards render, and pre-hydration while the amount is still empty. */
.oj-buybox .oj-price-solo { display: block; font-family: var(--oj-mono); font-size: 15px; font-weight: 600; margin: 16px 0 18px; }
.oj-buybox .oj-price-solo .oj-price-solo { display: inline; margin: 0; }
.oj-buybox:has(.sc-choice) .oj-price-solo,
.oj-buybox .oj-price-solo:has(.oj-price-solo:empty) { display: none; }
/* price tier rows (SureCart price choices restyled) — plugin.html .tiers */
.oj-tiers { list-style: none; margin: 16px 0 18px; padding: 0; }
.oj-tiers li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--oj-hairline); font-size: 16px;
}
.oj-tiers li:last-child { border-bottom: none; }
.oj-tiers .price, .oj-price-now { font-family: var(--oj-mono); font-weight: 600; font-size: 15px; white-space: nowrap; }
.oj-tiers .was, .oj-price-was {
  font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted);
  text-decoration: line-through; font-weight: 400; margin-right: 6px;
}
.oj-price-amounts { white-space: nowrap; }
.oj-price-per { font-size: 16px; color: var(--oj-muted); }
.oj-qty { font-size: 16px; }
.oj-qty input { width: 64px; font-family: var(--oj-mono); font-size: 15px; border: 1px solid var(--oj-placeholder); border-radius: 4px; padding: 8px 10px; text-align: center; }

/* ---------- product intro (plugin.html .intro) ---------- */
.oj-product-intro h1 { max-width: 24ch; }
.oj-product-deck { font-size: 20px; color: #333; margin-bottom: 16px; }

/* product body sections (plugin.html section{padding:48px 0 8px}+h2.sec 28/800,
   .qa h3 19/700) — interim styling on raw content headings until the
   content is wrapped in oj-section--product groups */
.oj-layout .entry-content > h2 {
  font-size: 28px; font-weight: 800; line-height: 1.7;
  /* section rhythm: 8 (prev pb) + 8 (mt) + 48 (border gap) = 64 total */
  border-top: 1px solid var(--oj-hairline); padding-top: 48px; margin: 16px 0 12px;
}
.oj-layout .entry-content > h2:first-child { border-top: none; padding-top: 0; margin-top: 8px; }
.oj-layout .entry-content > h3 { font-size: 19px; font-weight: 700; line-height: 1.7; margin: 24px 0 4px; }
.oj-layout .entry-content > h3 + p { margin-top: 0; }
/* product-content.html body voice: 17px #333; the lede after a section h2
   stays 18px #444 (plugin.html .lede) */
.oj-layout .entry-content > p { font-size: 17px; color: #333; }
.oj-layout .entry-content > h2 + p { font-size: 18px; color: #444; margin-bottom: 32px; }

/* ---------- buttons ---------- */
.is-style-oj-ghost .wp-block-button__link {
  background: #fff; color: var(--oj-ink); border: 1px solid var(--oj-ink);
}
/* spec: hover inverts to ink/white (DESIGN-SYSTEM.md "Buttons") */
.is-style-oj-ghost .wp-block-button__link:hover {
  background: var(--oj-ink); color: #fff; border-color: var(--oj-ink);
}

/* ---------- plugin tile ---------- */
.oj-tile {
  width: 52px; height: 52px; border-radius: 4px; background: var(--oj-primary); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--oj-mono); font-weight: 600; font-size: 16px; flex: none;
}

/* ---------- feature grid (about.html .builds/.build) ---------- */
.oj-featgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; }
.oj-feat { display: flex; gap: 18px; align-items: flex-start; padding: 6px 0; }
.oj-feat h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0; }
.oj-feat .oj-meta { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); margin-top: 4px; }
.entry-content .oj-feat h3 a, .entry-content .oj-item h3 a, .entry-content .oj-item h2 a,
.entry-content .oj-posts2 h3 a, .entry-content .oj-site h3 a {
  color: var(--oj-ink); text-decoration: none;
}
.entry-content .oj-feat h3 a:hover, .entry-content .oj-item h3 a:hover, .entry-content .oj-item h2 a:hover,
.entry-content .oj-posts2 h3 a:hover, .entry-content .oj-site h3 a:hover {
  color: var(--oj-warm);
}
.oj-feat p:not(.oj-meta) { font-size: 16px; color: #444; max-width: 44ch; margin: 0; }
@media (max-width: 700px) { .oj-featgrid { grid-template-columns: 1fr; } }

/* about.html hero: portrait col 260, h1 48/16ch, deck 54ch */
.oj-home-hero.oj-hero--about { grid-template-columns: 1fr 260px; padding: 80px 0 64px; }
@media (max-width: 760px) { .oj-home-hero.oj-hero--about { grid-template-columns: 1fr; } }
.oj-home-hero.oj-hero--about h1 { font-size: 48px; line-height: 1.12; max-width: 16ch; margin: 0 0 20px; }
.oj-home-hero.oj-hero--about p { max-width: 54ch; }
/* about.html: "section > .wrap > p" outranks .lede there — ledes and body
   paragraphs read #222/66ch with a 16px bottom margin (about page only) */
.page-id-1077 .oj-section--56 > p, .page-id-1077 .oj-section--56 > .oj-lede { color: #222; max-width: 66ch; margin-bottom: 16px; }
/* services.html lede: #444/62ch with the full 36px drop */
.page-id-2171 .oj-section--56 > .oj-lede { max-width: 62ch; margin-bottom: 36px; }

/* about.html .promise: row band, 28/32 padding, sits 44 under the grid
   (doubled selector: the generic band-row rule is declared later) */
.is-style-oj-band-row.oj-band--promise { padding: 28px 32px; margin: 44px 0 0; }
.is-style-oj-band-row.oj-band--promise p { font-size: 18px; max-width: 52ch; }

/* about.html .reach — contact rows: bold label rail, mono values */
.oj-reach .oj-reach-li {
  display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--oj-hairline); margin: 0;
}
.oj-reach .oj-reach-li:last-child { border-bottom: none; }
.oj-reach-label { font-weight: 700; min-width: 110px; }
.oj-reach-val { font-family: var(--oj-mono); font-size: 15px; }
.oj-reach-val a { text-decoration: none; }
.oj-reach-val a:hover { color: var(--oj-warm); }
.oj-reach-note { font-size: 15px; color: var(--oj-muted); }

/* about.html prose voice (the class sits on the paragraphs themselves).
   The .oj-section > leg (0,2,1) preserves the final paragraph's 16px margin
   against WP's :last-child margin killer (0,2,0). */
p.oj-prose, .oj-prose p, .oj-section > p.oj-prose { font-size: 17.5px; color: #222; max-width: 66ch; margin: 0 0 16px; }

/* ---------- screenshots (plugin.html .shots/.shot) ---------- */
.oj-shot figure, figure.oj-shot { margin: 0 0 28px; }
.oj-shot img { border: 1px solid var(--oj-hairline); border-radius: 4px; width: 100%; height: auto; display: block; }
.oj-shot figcaption {
  font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); margin-top: 8px; text-align: left;
}

/* ---------- changelog (product-content.html .log) ----------
   The release ledger: mono, hairline-separated entries, version anchors,
   optional date + warm "current" marker, optional warm type prefixes. */
.oj-log { font-family: var(--oj-mono); font-size: 14px; line-height: 1.75; color: #333; }
.oj-log-entry { padding: 18px 0 14px; border-top: 1px solid var(--oj-hairline); }
.oj-log-entry:first-child { border-top: none; padding-top: 6px; }
.oj-log-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.oj-log-version { font-size: 15px; font-weight: 600; color: var(--oj-ink); text-decoration: none; }
.oj-log-version:hover { color: var(--oj-warm); }
.oj-log-date { font-size: 13px; color: var(--oj-muted); }
.oj-log-current { font-size: 13px; font-weight: 500; color: var(--oj-warm); text-transform: lowercase; }
.oj-log ul { list-style: none; margin: 0; padding: 0; }
.oj-log li { padding-left: 16px; text-indent: -16px; margin-bottom: 2px; }
.oj-log .oj-chtype { color: var(--oj-warm); font-weight: 500; text-transform: lowercase; }

/* ---------- product feature list (product-content.html .whatlist) ---------- */
.oj-whatlist, .is-style-oj-whatlist { list-style: none; margin: 0; padding: 0; }
.oj-whatlist > li, .is-style-oj-whatlist > li {
  font-size: 17px; line-height: 1.65; color: #333; padding: 9px 0 9px 22px; position: relative; max-width: 62ch;
  text-indent: 0; margin: 0;
}
.oj-whatlist > li::before, .is-style-oj-whatlist > li::before {
  content: ""; position: absolute; left: 2px; top: 1.05em; width: 7px; height: 7px;
  background: var(--oj-primary); border-radius: 1px;
}
.oj-whatlist strong, .is-style-oj-whatlist strong { color: var(--oj-ink); }

/* ---------- requirements rows (product-content.html .reqs) ---------- */
.oj-reqs, .is-style-oj-reqs { font-family: var(--oj-mono); font-size: 14px; line-height: 1.65; color: #333; max-width: 48ch; list-style: none; margin: 0; padding: 0; }
.oj-reqs > li, .is-style-oj-reqs > li, .oj-reqs .oj-req { display: flex; justify-content: space-between; gap: 24px; padding: 9px 0; border-bottom: 1px solid var(--oj-hairline); margin: 0; }
.oj-reqs > li:last-child, .is-style-oj-reqs > li:last-child, .oj-reqs .oj-req:last-child { border-bottom: none; }
.oj-reqs .oj-req-k { color: var(--oj-muted); }
.oj-reqs .oj-req-v { color: var(--oj-ink); font-weight: 500; }

/* ---------- installation steps (product-content.html .steps) ---------- */
.oj-steps, .is-style-oj-steps { list-style: none; counter-reset: oj-step; max-width: 62ch; margin: 0; padding: 0; }
.oj-steps > li, .is-style-oj-steps > li { counter-increment: oj-step; position: relative; padding: 8px 0 8px 40px; font-size: 17px; line-height: 1.65; color: #333; margin: 0; }
.oj-steps > li::before, .is-style-oj-steps > li::before {
  content: counter(oj-step); position: absolute; left: 0; top: 8px;
  font-family: var(--oj-mono); font-size: 15px; font-weight: 600; color: var(--oj-deep);
}
.oj-steps strong, .is-style-oj-steps strong { color: var(--oj-ink); }

/* ---------- screenshots grid (product-content.html .shots) ---------- */
.oj-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.oj-shots .oj-shot, .oj-shots figure { margin: 0; }
.oj-shots > *:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 700px) { .oj-shots { grid-template-columns: 1fr; } }

/* ---------- testimonial (customer voice: 4px periwinkle top edge) ---------- */
.oj-testi {
  border: 1px solid var(--oj-ink); border-top: 4px solid var(--oj-primary); border-radius: 4px;
  padding: 26px 28px 24px; display: flex; flex-direction: column; background: #fff;
}
.oj-testi__mark {
  display: block; font-size: 76px; font-weight: 800; color: var(--oj-primary);
  line-height: 1; height: 0.6em; overflow: hidden; margin-bottom: 16px; user-select: none;
}
.oj-testi blockquote, .oj-testi__quote {
  font-size: 20px; font-weight: 500; line-height: 1.55; margin: 0 0 22px; border: none; padding: 0;
}
.oj-testi cite, .oj-testi__cite {
  font-family: var(--oj-mono); font-size: 14px; font-style: normal; color: var(--oj-muted);
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--oj-hairline);
}
.oj-testi cite strong { color: var(--oj-ink); font-weight: 600; }
/* home.html .testis gap 28; plugin rail stacks at 24 */
.oj-testi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.oj-testi-row--2 { grid-template-columns: 1fr 1fr; }
.oj-rail-sticky .oj-testi + .oj-testi { margin-top: 24px; }
@media (max-width: 860px) { .oj-testi-row, .oj-testi-row--2 { grid-template-columns: 1fr; } }

/* full-width photo variant */
.oj-testi--photo { flex-direction: row; padding: 0; overflow: hidden; }
.oj-testi--photo .oj-testi__photo { flex: 0 0 260px; }
.oj-testi--photo .oj-testi__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oj-testi--photo .oj-testi__body { padding: 36px 44px 32px; display: flex; flex-direction: column; }
@media (max-width: 700px) {
  .oj-testi--photo { flex-direction: column; }
  .oj-testi--photo .oj-testi__photo { flex: none; }
}

/* ---------- callout / promise (3px periwinkle left border) — post.html .disclosure ---------- */
.is-style-oj-callout {
  border-left: 3px solid var(--oj-primary); padding: 4px 0 4px 20px; border-radius: 0; color: #333;
}

/* ---------- CTA band ----------
   Two designed shapes: post.html .cta (copy above, button below, reading width)
   and services.html .band (flex row, button right). */
.is-style-oj-band {
  border: 1px solid var(--oj-ink); border-radius: 4px; padding: 26px 30px; margin: 44px 0; color: var(--oj-ink);
}
.is-style-oj-band p { margin: 0 0 18px; font-size: 17.5px; max-width: 56ch; color: #1c1c1c; }
.is-style-oj-band .price, .is-style-oj-band .oj-price { font-family: var(--oj-mono); color: var(--oj-warm); font-weight: 600; }
.is-style-oj-band-row {
  border: 1px solid var(--oj-ink); border-radius: 4px; padding: 26px 30px; margin: 56px 0 72px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
}
.is-style-oj-band-row p { margin: 0; font-size: 17.5px; max-width: 56ch; }
/* keep the closing band's 72px drop against WP's last-child margin killer */
.entry-content > .is-style-oj-band-row:last-child { margin-bottom: 72px; }

/* ---------- creds card (4px periwinkle top edge on ink border) ---------- */
.is-style-oj-creds {
  border: 1px solid var(--oj-ink); border-top: 4px solid var(--oj-primary);
  border-radius: 4px; padding: 24px 28px;
}
.is-style-oj-creds .oj-numeral {
  font-family: var(--oj-mono); font-size: 44px; font-weight: 600; color: var(--oj-primary);
  display: block; line-height: 1.1;
}
/* services.html .creds card copy */
.is-style-oj-creds h3 { font-size: 18px; font-weight: 700; line-height: 1.7; margin: 4px 0 8px; }
.is-style-oj-creds p { font-size: 15.5px; color: #444; margin: 0; }

/* services.html .gf .body — consulting column prose + list; the section h2
   lives inside the grid's body column, not at section level */
.oj-gf-grid h2 { font-size: 30px; font-weight: 800; line-height: 1.7; margin: 0 0 12px; }
.oj-gf-grid p { font-size: 17.5px; color: #222; max-width: 60ch; margin: 0 0 16px; }
.oj-gf-grid ul:not([class*="oj-"]) { margin: 0 0 16px; padding: 0 0 0 20px; max-width: 60ch; }
.oj-gf-grid ul:not([class*="oj-"]) li { font-size: 17px; line-height: 1.7; color: #333; margin-bottom: 8px; }
.oj-gf-grid .is-style-oj-creds p { font-size: 15.5px; line-height: 1.7; color: #444; max-width: none; margin: 0; }
/* body column's final paragraph keeps its 16px drop (margin killer, again) */
.oj-gf-grid > .wp-block-group:first-child p:last-child { margin-bottom: 16px; }

/* ---------- trust facts (home.html .facts/.fact) ---------- */
.oj-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
.oj-trust .oj-numeral {
  font-family: var(--oj-mono); font-size: 44px; font-weight: 600; color: var(--oj-primary);
  display: block; line-height: 1.1;
}
.oj-trust h3 { font-size: 20px; font-weight: 700; line-height: 1.7; margin: 4px 0 10px; }
.oj-trust p { font-size: 16.5px; color: #444; margin: 0; }
@media (max-width: 760px) { .oj-trust { grid-template-columns: 1fr; } }

/* mono meta line, wherever it appears (about.html .meta, blog rows) */
.oj-meta { font-family: var(--oj-mono); font-size: 14px; line-height: 1.7; color: var(--oj-muted); }

/* ---------- ledger rows (sites / recent work) ---------- */
.oj-ledger .oj-site { padding: 22px 0; border-bottom: 1px solid var(--oj-hairline); }
.oj-ledger .oj-site h3 { font-size: 21px; font-weight: 700; line-height: 1.7; margin: 0 0 4px; }
.oj-ledger .oj-site .oj-meta { margin-top: 6px; }
.oj-ledger .oj-site:last-child { border-bottom: none; }
.oj-siteline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.oj-siteline h3 { font-size: 21px; font-weight: 700; margin: 0; }
.oj-siteline h3 a { color: var(--oj-ink); }
.oj-siteline h3 a:hover { color: var(--oj-warm); }
.oj-siteline .oj-url { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-deep); }
.oj-site p:not(.oj-meta):not(.oj-url) { font-size: 17px; color: #444; max-width: 72ch; margin: 2px 0 0; }
/* placeholder slot dims heading + copy only — the meta line stays #555,
   as about.html renders it */
.oj-site.oj-slot h3, .oj-ledger .oj-site.oj-slot p:not(.oj-meta), .oj-site.oj-slot .oj-url { color: var(--oj-placeholder); }

/* ---------- signoff (post.html/plugin.html 110px; blog.html index variant 120px) ---------- */
.oj-signoff {
  display: grid; grid-template-columns: 110px 1fr; gap: 32px; align-items: center;
  border-top: 1px solid var(--oj-hairline); margin-top: 48px; padding: 40px 0 56px;
}
.oj-signoff img, .oj-signoff .oj-signoff-img img { width: 100%; height: auto; border-radius: 4px; object-fit: cover; }
.oj-signoff p { font-size: 18px; color: #222; margin: 0; }
.oj-signoff--index { grid-template-columns: 120px 1fr; gap: 36px; margin-top: 0; padding: 56px 0 72px; }
.oj-signoff--index p { font-size: 19px; max-width: 56ch; }

/* ---------- table of contents (post.html .toc) ---------- */
.oj-toc { border: 1px solid var(--oj-ink); border-radius: 4px; padding: 22px 28px 18px; color: var(--oj-ink); }
.oj-toc__label { font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); display: block; margin-bottom: 12px; }
.oj-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.oj-toc li { break-inside: avoid; margin-bottom: 9px; font-size: 16.5px; line-height: 1.45; color: #1c1c1c; }
.oj-toc a { display: block; font-weight: 500; color: var(--oj-deep); text-decoration: none; }
.oj-toc a:hover { color: var(--oj-warm); }
@media (max-width: 640px) { .oj-toc ul { columns: 1; } }

/* ---------- blog index (blog.html) ---------- */
/* archive hero (index/archive templates only — the blog home has no hero) */
.oj-bloghero h1 { max-width: 18ch; }
.oj-bloghero > p { margin-top: 14px; max-width: 52ch; }
.oj-postmeta { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); }
.oj-postmeta a { text-decoration: none; }
/* meta reads as one dotted line: "release · 2026-08-04 · Johnathon Williams"
   (blog.html .meta, post.html .head .meta) */
.oj-postmeta--dots > * + *::before { content: "· "; }
.oj-postmeta .oj-typelabel, .oj-typelabel a, .oj-typelabel { color: var(--oj-warm); font-weight: 500; text-transform: lowercase; }
/* the fold — featured story + also-new rail (blog.html .fold); the featured
   title is the page h1, there is no standalone hero */
.oj-fold { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: start; padding: 64px 0 0; margin-bottom: 64px; }
.oj-foldmain .oj-postmeta { margin-bottom: 10px; }
.oj-foldmain .wp-block-post-title { font-size: 40px; font-weight: 800; line-height: 1.1; margin-bottom: 14px; max-width: 22ch; }
.oj-foldmain .wp-block-post-title a { color: var(--oj-ink); text-decoration: none; }
.oj-foldmain .wp-block-post-title a:hover { color: var(--oj-warm); }
.oj-foldmain .wp-block-post-excerpt__excerpt { font-size: 19px; color: #333; max-width: 58ch; }
.oj-foldmain .wp-block-post-excerpt__more-text { margin-top: 16px; font-weight: 700; }
.oj-railhead { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); padding-bottom: 10px; border-bottom: 1px solid var(--oj-hairline); }
.oj-railitem { padding: 14px 0; border-bottom: 1px solid var(--oj-hairline); }
.oj-railitem .oj-postmeta { font-size: 13.5px; margin-bottom: 2px; }
.oj-railitem .wp-block-post-title { font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.oj-railitem .wp-block-post-title a { color: var(--oj-ink); text-decoration: none; }
.oj-railitem .wp-block-post-title a:hover { color: var(--oj-warm); }
@media (max-width: 820px) { .oj-fold { grid-template-columns: 1fr; gap: 44px; } }
/* sections (blog.html .sec/.sechead/.secnote/.alllink) */
.oj-sec { border-top: 1px solid var(--oj-hairline); padding: 56px 0 64px; }
.oj-sec--first { border-top: none; padding-top: 0; }
.oj-sechead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
/* line-height 1.7 inherited from body in the mockup — keeps the count's
   shared baseline where blog.html puts it */
.oj-sechead h2 { font-size: 27px; font-weight: 800; line-height: 1.7; }
.oj-count { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); }
.oj-secnote { font-size: 16.5px; color: var(--oj-muted); max-width: 62ch; margin-bottom: 26px; }
.oj-sec .oj-alllink { margin-top: 26px; }
.oj-alllink a { font-weight: 700; text-decoration: none; }
.oj-alllink a:hover { color: var(--oj-warm); }
/* stacked rows: meta line above title (blog.html .stack .post) — also the
   archive/index row shape */
.oj-postrow { padding: 24px 0; border-bottom: 1px solid var(--oj-hairline); }
.oj-postrow .oj-postmeta { margin-bottom: 6px; }
.oj-postrow h3, .oj-postrow h2 { font-size: 23px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; max-width: 34ch; }
.oj-postrow p { font-size: 17px; color: #444; max-width: 66ch; }
.oj-postrow h3 a, .oj-postrow h2 a { color: var(--oj-ink); text-decoration: none; }
.oj-postrow h3 a:hover, .oj-postrow h2 a:hover { color: var(--oj-warm); }
.oj-postrow .wp-block-post-excerpt { margin-top: 0; }
.wp-block-post-template > li:first-child > .oj-postrow { border-top: 1px solid var(--oj-hairline); }
/* rows sit border-to-border — defeat the post-template blockGap */
.wp-block-query .wp-block-post-template > * + * { margin-block-start: 0; }
/* gravity forms grid (blog.html .gfgrid) */
.oj-gfgrid .wp-block-post-template { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 64px; }
.oj-gfcell .oj-postmeta { margin-bottom: 4px; }
.oj-gfcell .wp-block-post-title { font-size: 20px; font-weight: 700; line-height: 1.35; max-width: 30ch; }
.oj-gfcell .wp-block-post-title a { color: var(--oj-ink); text-decoration: none; }
.oj-gfcell .wp-block-post-title a:hover { color: var(--oj-warm); }
@media (max-width: 700px) { .oj-gfgrid .wp-block-post-template { grid-template-columns: 1fr; gap: 24px; } }
/* workshop release ledger (blog.html .rel .post) */
.oj-relrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--oj-hairline); }
.oj-rel .wp-block-post-template > li:first-child > .oj-relrow { border-top: 1px solid var(--oj-hairline); }
.oj-relrow .wp-block-post-title { font-size: 18px; font-weight: 700; line-height: 1.4; }
.oj-relrow .wp-block-post-title a { color: var(--oj-ink); text-decoration: none; }
.oj-relrow .wp-block-post-title a:hover { color: var(--oj-warm); }
.oj-relrow .wp-block-post-date { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); }
/* comparison columns (blog.html .cmp) — markup from oddjar/comparison-list */
.oj-cmp ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 64px; }
.oj-cmp li { padding: 8px 0; break-inside: avoid; font-size: 17px; line-height: 1.5; }
.oj-cmp li a { text-decoration: none; }
.oj-cmp li a:hover { color: var(--oj-warm); }
.oj-cmp .oj-n { font-family: var(--oj-mono); font-size: 13.5px; color: var(--oj-muted); margin-left: 8px; white-space: nowrap; }
@media (max-width: 700px) { .oj-cmp ul { columns: 1; } }
/* pager (blog.html .pager) */
.oj-pager { display: flex; justify-content: space-between; align-items: center; padding: 32px 0 0; }
.oj-pager a { font-weight: 700; text-decoration: none; }
.oj-pager a:hover { color: var(--oj-warm); }
.oj-pager .oj-count { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); }

/* ---------- reading column (single post: post.html article) ----------
   Width discipline lives on the post-content block's own constrained
   layout (760 content / 1080 wide) so .alignwide tables can break out. */
.oj-reading { font-size: 18px; color: #1c1c1c; overflow-wrap: break-word; }
.oj-post-title { max-width: 22ch; }
/* post.html: article h2 29/800 lh1.2, h3 21/700 (inherited 1.7 line-height);
   headings stay ink — only body copy is #1c1c1c */
.oj-reading h2 { font-size: 29px; line-height: 1.2; color: var(--oj-ink); margin: 48px 0 16px; }
.oj-reading h3 { font-size: 21px; line-height: 1.7; color: var(--oj-ink); margin: 32px 0 10px; }
.oj-reading p { margin-bottom: 22px; }
/* post.html: article ul { margin:0 0 22px 22px } + li spacing, no UA padding.
   Left inset is padding, not margin — the constrained layout's !important
   auto-margins (gotcha #5) would eat a margin-left. */
.oj-reading .entry-content ul:not([class]) { margin: 0 0 22px; padding: 0 0 0 22px; }
.oj-reading .entry-content ul:not([class]) li { margin-bottom: 8px; color: #1c1c1c; }
/* comparison tables (post.html .tablewrap/.compare) — tables are the only
   full-width breakout in a post */
.oj-reading .wp-block-table { overflow-x: auto; margin: 28px 0 34px; color: var(--oj-ink); }
/* below the 1080 frame the wide figure caps at the viewport and the table
   scrolls inside it (post.html .tablewrap behavior) */
@media (max-width: 1128px) {
  .oj-reading .wp-block-table.alignwide { max-width: 100%; }
}
.oj-reading .wp-block-table table {
  border-collapse: collapse; min-width: 860px; width: 100%;
  font-family: var(--oj-mono); font-size: 13.5px; line-height: 1.55;
}
.oj-reading .wp-block-table th, .oj-reading .wp-block-table td {
  text-align: left; vertical-align: top; padding: 12px 14px;
  border: none; border-bottom: 1px solid var(--oj-hairline);
}
.oj-reading .wp-block-table thead th {
  font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 700; color: var(--oj-ink); border-bottom: 2px solid var(--oj-ink);
}
.oj-reading .wp-block-table tbody th {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--oj-ink);
}
.oj-reading .wp-block-table td { color: #333; }
/* featured image (post.html figure.feature) */
/* (0,2,1) — must outgun WP's ":root :where(...) > :last-child" margin-block
   killer (0,2,0), which hits this figure as sole child of its group */
.wp-block-group > figure.oj-feature-img, .oj-feature-img { margin: 8px 0 48px; }
.oj-feature-img img { border: 1px solid var(--oj-hairline); border-radius: 4px; width: 100%; height: auto; }
/* tags row (post.html .tags) — undo theme.json's warm post-terms color
   (that preset is for type labels) and hash-prefix each tag like the mockup */
.oj-tags { padding: 8px 0 0; font-family: var(--oj-mono); font-size: 14px; color: #1c1c1c; }
.oj-tags a { color: var(--oj-deep); text-decoration: none; margin-right: 16px; }
.oj-tags a::before { content: "# "; }
/* spacing comes from the 16px margin alone, like the mockup */
.oj-tags .wp-block-post-terms__separator { display: none; }
.oj-tags a:hover { color: var(--oj-warm); }
/* prev/next (post.html .next/.nextrow) */
.oj-nextrow {
  border-top: 1px solid var(--oj-hairline);
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 40px 0 56px;
}
.oj-nextrow .post-navigation-link-previous, .oj-nextrow .post-navigation-link-next { font-size: 20px; font-weight: 700; line-height: 1.35; max-width: 30ch; }
.oj-next-fwd .post-navigation-link-next { margin-left: auto; }
.oj-nextrow .oj-next-k { font-family: var(--oj-mono); font-size: 14px; font-weight: 500; color: var(--oj-muted); display: block; margin-bottom: 8px; }
.oj-nextrow a { color: var(--oj-ink); text-decoration: none; }
.oj-nextrow a:hover { color: var(--oj-warm); }
.oj-nextrow .oj-next-fwd { text-align: right; }
@media (max-width: 700px) { .oj-nextrow { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- document pages (utility.html: terms, privacy) ----------
   The treatment for non-marketing pages: a quiet 760px record. The
   injected blockGap is zeroed wholesale here (flow-gap gotcha), so every
   margin below is explicit, transcribed from the mockup. */
.oj-doc { font-size: 17px; color: #1c1c1c; overflow-wrap: break-word; }
.oj-doc .entry-content > *, .oj-doc .oj-toc > *, .oj-doc .is-style-oj-callout > * { margin-block-start: 0; }
.oj-doc .wp-block-post-title { margin: 0 0 12px; color: var(--oj-ink); }
/* utility.html .dochead .meta — the author-controlled "last updated" line */
.oj-docmeta { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); margin: 0 0 36px; }
/* utility.html .shortversion — the standard callout carrying a mono label
   + a plain-words summary (padding 6 vs the post callout's 4) */
.oj-doc .is-style-oj-callout { padding: 6px 0 6px 20px; margin: 0 0 36px; }
.oj-doc .oj-sv__label { font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); margin: 0 0 6px; }
.oj-doc .is-style-oj-callout p:not(.oj-sv__label) { font-size: 17px; margin: 0; }
/* numbered TOC — the post TOC component with an <ol>; numerals are data */
.oj-doc .oj-toc { margin: 0 0 40px; }
.oj-doc .oj-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; counter-reset: oj-tocsec; }
.oj-doc .oj-toc li { break-inside: avoid; margin: 0 0 9px; font-size: 16px; line-height: 1.45; counter-increment: oj-tocsec; }
.oj-doc .oj-toc li::before { content: counter(oj-tocsec) ". "; font-family: var(--oj-mono); font-size: 13.5px; color: var(--oj-muted); }
/* the ::before numeral must share the line — undo the post TOC's block links */
.oj-doc .oj-toc a { display: inline; }
@media (max-width: 640px) { .oj-doc .oj-toc ol { columns: 1; } }
/* clauses: h2s auto-numbered by CSS counter — the numeral is a reference,
   same license as installation-step numerals; heading text stays clean */
.oj-doc .entry-content { counter-reset: oj-docsec; }
.oj-doc .entry-content > p { margin-bottom: 20px; }
.oj-doc .entry-content h2 {
  font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--oj-ink);
  margin: 40px 0 12px; counter-increment: oj-docsec; scroll-margin-top: 24px;
}
.oj-doc .entry-content h2::before { content: counter(oj-docsec) ". "; font-family: var(--oj-mono); font-size: 18px; font-weight: 600; color: var(--oj-deep); }
.oj-doc .entry-content h3 { font-size: 19px; font-weight: 700; color: var(--oj-ink); margin: 28px 0 8px; }
.oj-doc .entry-content ul:not([class]), .oj-doc .entry-content ul.wp-block-list { margin: 0 0 20px; padding: 0 0 0 22px; }
.oj-doc .entry-content ul li { margin-bottom: 8px; }

/* ---------- dashboard (SureCart) ---------- */
/* login chrome on the SureCart template: white field, no card shadow, and
   the support band held to the 1080 frame (hard rules: no tints/shadows) */
html body.page-template-template-surecart-dashboard { background: #fff; }
.page-template-template-surecart-dashboard sc-login-form::part(base),
.page-template-template-surecart-dashboard .sc-card, .page-template-template-surecart-dashboard sc-card::part(base) {
  box-shadow: none; border: 1px solid var(--oj-hairline);
}
/* dashboard.html .helpband — SureCart's template CSS centers all logged-out text
   and underlines/inherits every anchor; pin the band back to the design */
.page-template-template-surecart-dashboard .is-style-oj-band-row {
  max-width: 1080px; margin-left: auto; margin-right: auto; text-align: left;
}
.page-template-template-surecart-dashboard .is-style-oj-band-row p { max-width: 52ch; }
body.page-template-template-surecart-dashboard .is-style-oj-band-row .wp-block-button__link {
  text-decoration: none; color: var(--wp--preset--color--black, #000);
}
body.page-template-template-surecart-dashboard .is-style-oj-band-row .wp-block-button__link:hover {
  color: var(--wp--preset--color--paper, #fff);
}
.oj-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--oj-ink); margin-top: 32px; flex-wrap: wrap; }
.oj-tabs a { font-family: var(--oj-mono); font-size: 15px; color: var(--oj-muted); padding: 10px 0 12px; text-decoration: none; }
.oj-tabs a:hover { color: var(--oj-warm); }
.oj-tabs a.is-active { color: var(--oj-ink); font-weight: 600; border-bottom: 3px solid var(--oj-primary); margin-bottom: -1px; }

/* support.html aside .warmline — the rail's compact callout variant */
.oj-buybox .is-style-oj-callout { font-size: 16px; line-height: 1.7; padding: 0 0 0 16px; margin-top: 16px; }

/* ---------- support rail facts — stacked ledger: label above value, full measure ---------- */
.oj-fact { padding: 12px 0; border-top: 1px solid var(--oj-hairline); font-size: 16px; line-height: 1.6; margin: 0; }
.oj-facts .oj-fact:first-child { border-top: none; padding-top: 2px; }
.oj-fact .oj-fact-k { display: block; font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); margin-bottom: 2px; }
.oj-fact .oj-fact-k + span { display: block; color: #333; }

/* ---------- footer ----------
   Two designed variants: single-row (most pages) and the home page's
   3-column link footer (home.html footer .cols). */
.oj-footer { border-top: 1px solid var(--oj-hairline); }
/* blog.html/post.html: footer{padding:40px 0 56px} on the wrapper, not the row */
/* horizontal padding = the global gutter (0 at desktop): the vertical
   padding lives on this constrained wrapper, and a bare "padding: X 0"
   shorthand silently kills its mobile gutter (gotcha #1) */
.oj-footer:has(.oj-footrow) { padding: 40px var(--oj-gutter, 24px) 56px; }
.oj-footrow { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: center; }
.oj-footrow .wp-block-navigation a { color: var(--oj-ink); font-size: 15px; text-decoration: none; }
.oj-footrow .wp-block-navigation a:hover { color: var(--oj-warm); }
.oj-copyright { font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); }
/* home.html: footer{padding:44px 0 60px} carries the vertical padding — keep
   it on the wrapper so the inner boxes measure like the mockup's */
.oj-footer:has(.oj-footcols) { padding: 44px var(--oj-gutter, 24px) 60px; }
.oj-footcols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.oj-footcols h4 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.oj-footcols ul, .oj-footcols .wp-block-navigation__container { list-style: none; margin: 0; padding: 0; display: block; }
.oj-footcols li { margin-bottom: 8px; }
/* mockup rows are plain list items: an 18px li line box (30.6px) wrapping a
   16px inline anchor. Core nav renders li as flex, which blockifies the
   anchor and collapses the row to 27.2px — restore both displays. */
.oj-footcols li, .oj-footcols .wp-block-navigation-item { display: block; }
.oj-footcols a { color: var(--oj-ink); text-decoration: none; font-size: 16px; }
/* core nav CSS loads after theme.css and re-blockifies the anchor */
.oj-footcols li a.wp-block-navigation-item__content { display: inline; }
.oj-footcols a:hover { color: var(--oj-warm); }
.oj-footcols + .oj-copyright { display: block; margin-top: 44px; }
@media (max-width: 700px) { .oj-footcols { grid-template-columns: 1fr; } }

/* ============================================================
   Gravity Forms (Orbital theme) — support form styling
   support.html: labels 17/700, warm *, mono sublabels, dashed drop,
   periwinkle/black submit inverting to ink/white
   ============================================================ */
/* Orbital (GF ≥2.7) scopes its rules under .gform-theme.gform-theme--framework
   (≥0,3,0) with --gform-theme-* tokens; the .gform_wrapper.gform-theme.gform-theme--orbital
   prefix (0,3,0 + tail) outguns them without !important. support.html values. */
.gform_wrapper.gform-theme.gform-theme--orbital form { max-width: 640px; }
.gform_wrapper.gform-theme.gform-theme--orbital .gform_required_legend { display: none; }
.gform_wrapper.gform-theme.gform-theme--orbital .gfield_label {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.7;
  color: var(--oj-ink); margin-bottom: 6px;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gfield_required {
  color: var(--oj-warm); font-size: 17px; font-weight: 700; line-height: 1.7;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gfield_description {
  font-size: 15px; color: var(--oj-muted); font-family: 'Heebo', sans-serif; max-width: 56ch;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gform_fileupload_rules,
.gform_wrapper.gform-theme.gform-theme--orbital .ginput_counter,
.gform_wrapper.gform-theme.gform-theme--orbital .charleft,
.gform_wrapper.gform-theme.gform-theme--orbital .ginput_complex label,
.gform_wrapper.gform-theme.gform-theme--orbital .gform-field-label--type-sub {
  font-family: var(--oj-mono); font-size: 13px; line-height: 1.7; color: var(--oj-muted); font-weight: 400; margin-top: 5px;
  text-transform: lowercase; /* support.html: "first", "enter email" */
}
.gform_wrapper.gform-theme.gform-theme--orbital .ginput_counter { text-align: right; }
.gform_wrapper.gform-theme.gform-theme--orbital input[type=text],
.gform_wrapper.gform-theme.gform-theme--orbital input[type=email],
.gform_wrapper.gform-theme.gform-theme--orbital input[type=url],
.gform_wrapper.gform-theme.gform-theme--orbital select,
.gform_wrapper.gform-theme.gform-theme--orbital textarea {
  font-family: 'Heebo', sans-serif; font-size: 17px; line-height: normal; color: var(--oj-ink);
  border: 1px solid #767676; border-radius: 4px; background: #fff; padding: 12px 14px;
  height: auto; /* Orbital's fixed control height clips 17px text */
}
.gform_wrapper.gform-theme.gform-theme--orbital textarea { min-height: 160px; resize: vertical; }
.gform_wrapper.gform-theme.gform-theme--orbital input:focus,
.gform_wrapper.gform-theme.gform-theme--orbital select:focus,
.gform_wrapper.gform-theme.gform-theme--orbital textarea:focus {
  outline: 2px solid var(--oj-deep); outline-offset: 1px; border-color: var(--oj-deep);
}
/* support.html .drop: one dashed box holding "Drop files here or select
   files" + the mono rules line. GF puts the rules OUTSIDE .gform_drop_area,
   so the dashed border lives on the container that wraps both. */
.gform_wrapper.gform-theme.gform-theme--orbital .ginput_container_fileupload {
  border: 1px dashed #767676; border-radius: 4px; background: #fff;
  padding: 32px 20px 20px; text-align: center;
  color: var(--oj-muted); font-size: 16px; font-weight: 400; line-height: 1.7;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area {
  border: none; background: none; color: var(--oj-muted);
  padding: 0; text-align: center; font-size: 16px; font-weight: 400; line-height: 1.7;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area { box-shadow: none; }
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area .gform-icon,
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area svg,
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area::before,
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_area::after { display: none; }
.gform_wrapper.gform-theme.gform-theme--orbital .gform_drop_instructions { display: inline; }
/* the select-files control reads as an inline link, not a button */
.gform_wrapper.gform-theme.gform-theme--orbital .gform_button_select_files {
  background: none !important; color: var(--oj-deep) !important; border: none !important;
  padding: 0 !important; font-size: 16px !important; font-weight: 700 !important;
  text-decoration: underline; display: inline !important; cursor: pointer;
  line-height: inherit !important; vertical-align: baseline !important; box-shadow: none !important;
}
.gform_wrapper.gform-theme.gform-theme--orbital .gform_button_select_files:hover { color: var(--oj-warm) !important; }
.gform_wrapper.gform-theme.gform-theme--orbital .gform_fileupload_rules { text-align: center; display: block; }
/* !important is deliberate: Orbital's framework resolves button styles
   through late local custom-property rules that outlast any sane
   specificity war (support.html .btn: periwinkle/black 17/700, 14x30) */
.gform_wrapper.gform-theme input[type=submit],
.gform_wrapper.gform-theme .gform_button {
  font-family: 'Heebo', sans-serif !important; background: var(--oj-primary) !important;
  color: #000 !important; font-weight: 700 !important; font-size: 17px !important;
  line-height: normal !important; border: none !important; border-radius: 4px !important;
  padding: 14px 30px !important; cursor: pointer;
}
.gform_wrapper.gform-theme input[type=submit]:hover,
.gform_wrapper.gform-theme .gform_button:hover {
  background: var(--oj-ink) !important; color: #fff !important;
}

/* ============================================================
   SureCart (light DOM outside checkout) — first pass
   ============================================================ */
/* Product list → ledger/tile look */
.wp-block-surecart-product-list .sc-product-item,
.sc-product-item {
  border: none; border-radius: 0; box-shadow: none;
}
/* checkout + components: brand tokens */
:root {
  --sc-color-primary-500: #6892F3;
  --sc-color-primary-text: #000;
  --sc-input-border: 1px solid #767676;
  --sc-input-border-radius: 4px;
  --sc-border-radius: 4px;
  --sc-font-family: 'Heebo', sans-serif;
  --sc-color-brand-primary: #6892F3;
  --sc-focus-ring-color-focus: #3D63C9;
}
sc-button::part(base) { border-radius: 4px; font-weight: 700; }

/* ---------- home page (home.html) ---------- */
.oj-home-hero { display: grid; grid-template-columns: 1fr 240px; gap: 72px; align-items: center; padding: 80px 0 72px; }
.oj-home-hero h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); font-weight: 800; line-height: 1.1; max-width: 17ch; margin: 0 0 20px; }
.oj-home-hero p { font-size: 20px; max-width: 52ch; color: #333; margin: 0 0 10px; }
.oj-home-hero p.oj-small { font-size: 17px; color: var(--oj-muted); margin: 0 0 10px; }
.oj-home-hero img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--oj-hairline); }
@media (max-width: 760px) { .oj-home-hero { grid-template-columns: 1fr; gap: 32px; } }

.oj-bundle {
  border: 1px solid var(--oj-ink); border-radius: 4px; padding: 32px 36px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; margin-bottom: 44px;
}
.oj-bundle .oj-fig { margin: 0; } /* the bundle stat-jar (figures.html) */
.oj-bundle h3 { font-size: 26px; font-weight: 800; line-height: 1.7; margin: 0 0 8px; }
.oj-bundle p { font-size: 17px; color: #333; max-width: 56ch; margin: 0; }
.oj-bundle .wp-block-button { margin-top: 14px; }
.oj-deal { text-align: right; }
.oj-deal .was { font-family: var(--oj-mono); font-size: 15px; color: var(--oj-muted); text-decoration: line-through; display: block; }
.oj-deal .now { font-family: var(--oj-mono); font-size: 34px; font-weight: 600; color: var(--oj-warm); }
.oj-deal .per { font-size: 17px; color: var(--oj-muted); }
@media (max-width: 700px) { .oj-bundle { grid-template-columns: 1fr; } .oj-deal { text-align: left; } .oj-bundle .oj-fig { display: none; } }

.oj-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.oj-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--oj-hairline); align-items: flex-start; }
.oj-item h3, .oj-item h2 { font-size: 19px; font-weight: 700; line-height: 1.35; margin: 0; }
.oj-item h3 a { color: var(--oj-ink); text-decoration: none; }
.oj-item h3 a:hover { color: var(--oj-warm); }
.oj-item p { font-size: 16px; color: #444; max-width: 44ch; margin: 0; }
.oj-item .oj-meta { font-family: var(--oj-mono); font-size: 14px; color: var(--oj-muted); margin-top: 4px; }
.oj-item .oj-meta strong { color: var(--oj-ink); font-weight: 600; }
.oj-item .oj-new { color: var(--oj-warm); font-weight: 500; }
@media (max-width: 860px) { .oj-shelf { grid-template-columns: 1fr; } }

.oj-svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 56px; }
.oj-svcgrid h3 { font-size: 20px; font-weight: 700; line-height: 1.7; margin: 0 0 8px; }
.oj-svcgrid p { font-size: 16.5px; color: #444; margin: 0; }
@media (max-width: 860px) { .oj-svcgrid { grid-template-columns: 1fr; } }

.oj-posts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.oj-posts2 h3 { font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.oj-posts2 h3 a { color: var(--oj-ink); text-decoration: none; }
.oj-posts2 h3 a:hover { color: var(--oj-warm); }
.oj-posts2 p { font-size: 16.5px; color: #444; margin: 0; }
@media (max-width: 760px) { .oj-posts2 { grid-template-columns: 1fr; } }

.oj-lede { font-size: 18px; color: #444; max-width: 60ch; }

/* services page */
.oj-svcs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 64px; }
.oj-svcs2 h3 { font-size: 21px; font-weight: 700; line-height: 1.7; margin: 0 0 6px; }
.oj-svcs2 p { font-size: 17px; color: #444; margin: 0; }
@media (max-width: 760px) { .oj-svcs2 { grid-template-columns: 1fr; } }
.oj-gf-grid { display: grid; grid-template-columns: 1fr 320px; gap: 72px; align-items: start; }
@media (max-width: 900px) { .oj-gf-grid { grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.oj-hairline-top { border-top: 1px solid var(--oj-hairline); }
.oj-inkline-top { border-top: 1px solid var(--oj-ink); }
.oj-placeholder { color: var(--oj-placeholder); }
.oj-prose { max-width: 66ch; }

/* ---------- figures + oddments (figures.html .fig / oddments.html .odd) ----------
   The visual content system, two tiers. Figures carry facts (washes, orthogonal,
   labeled); oddments carry the brand (solids, one 45° event, nearly wordless).
   SVG documents live in assets/figures/ and are server-inlined by oddjar/figure;
   the short .ojf-/.odm- class names are a payload decision — they repeat dozens
   of times per document and inline SVG ships uncached. All color via --oj-* vars;
   washes rgba(104,146,243,.15/.30) + rgba(17,17,17,.04) are the only opacities. */
.oj-fig { margin: 24px 0 8px; }
.oj-fig svg { display: block; max-width: 100%; height: auto; }
.oj-fig__caption { font-family: var(--oj-mono); font-size: 13px; color: var(--oj-muted); margin-top: 8px; text-align: left; }
.oj-fig--spot svg { width: 100%; }

/* figure strokes — 1.5px on purpose: heavier than the 1px page boxes, so a
   node never reads as a card. Dashed 4·4 = absent. */
.ojf-ink { stroke: var(--oj-ink); stroke-width: 1.5; stroke-linecap: square; }
.ojf-hair { stroke: var(--oj-hairline); stroke-width: 1; }
.ojf-absent { stroke: var(--oj-ink); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: butt; }
.ojf-absent--marker { stroke: var(--oj-ink); stroke-width: 1; stroke-dasharray: 2 2; }
.ojf-fill-paper { fill: #fff; }
.ojf-fill-primary { fill: var(--oj-primary); }
.ojf-fill-wash { fill: rgba(104, 146, 243, .15); }
.ojf-fill-wash2 { fill: rgba(104, 146, 243, .30); }
.ojf-fill-inkwash { fill: rgba(17, 17, 17, .04); }
.ojf-fill-none { fill: none; }
.ojf-label { font-family: var(--oj-mono); font-size: 13px; fill: var(--oj-ink); }
.ojf-label--muted { fill: var(--oj-muted); }
.ojf-label--warm { fill: var(--oj-warm); }
.ojf-init { font-family: var(--oj-mono); font-size: 16px; font-weight: 600; fill: #000; }

/* oddment paints — solids only; the washes belong to figures */
.odm-ink { fill: var(--oj-ink); }
.odm-peri { fill: var(--oj-primary); }
.odm-warm { fill: var(--oj-warm); }
.odm-paper { fill: #fff; }
.odm-hollow { fill: none; }
.odm-line { stroke: var(--oj-ink); stroke-width: 1.5; stroke-linecap: square; }
.odm-absent { stroke: var(--oj-ink); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; stroke-linecap: butt; }
.odm-label { font-family: var(--oj-mono); font-size: 13px; fill: var(--oj-ink); }
.odm-label--muted { fill: var(--oj-muted); }

/* motion — annotation, not decoration; static frame is the design */
.ojf-flow { stroke: var(--oj-primary); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: butt; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.oj-fig--motion .ojf-flow { visibility: visible; animation: oj-flow 3s linear infinite; }
	.oj-fig--motion .ojf-draw { stroke-dasharray: var(--ojf-len, 600); stroke-dashoffset: var(--ojf-len, 600); animation: oj-draw 1.1s ease-out .2s forwards; }
}
@keyframes oj-flow { to { stroke-dashoffset: -16; } }
@keyframes oj-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.oj-fig--motion .ojf-draw { animation: none; stroke-dashoffset: 0; }
}

/* hero with an oddment in the empty half — hidden when the half disappears */
.oj-hero-fig { display: grid; grid-template-columns: 1fr 320px; gap: 72px; align-items: center; }
.oj-hero-fig .oj-fig { margin: 0; justify-self: end; }
@media (max-width: 900px) { .oj-hero-fig { grid-template-columns: 1fr; } .oj-hero-fig .oj-fig { display: none; } }