/* ============================================================
   99creatix blog cluster
   ONE layer shared by the index (.c99-blog), the eight hub
   archives (.c99-hub), every article (.c99-article) and the
   search results (.c99-search). Built once, never per page.
   Selectors are doubled so they outrank the homepage's .c99
   rules, which print later in the site custom CSS.
   ============================================================ */

.c99.c99-blog [id], .c99.c99-hub [id], .c99.c99-search [id] { scroll-margin-top: 92px; }
.c99.c99-article [id] { scroll-margin-top: 100px; }

/* --teal-d is the accessible teal for text on paper. The brand --teal
   (#35D6BE) is for the dark stage only and fails contrast on light. */
.c99.c99-blog, .c99.c99-hub, .c99.c99-article, .c99.c99-search { --teal-d: #12907C; }

/* The blog runs a smaller display than the marketing pages. A reading
   surface does not need a 6.4rem headline and an article needs less again. */
.c99.c99-blog .display, .c99.c99-hub .display, .c99.c99-search .display {
  font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: .96; letter-spacing: -.042em;
}
.c99.c99-article .display { font-size: clamp(1.85rem, 4vw, 3.05rem); line-height: 1; letter-spacing: -.04em; }
.c99.c99-blog .h2, .c99.c99-hub .h2, .c99.c99-article .h2, .c99.c99-search .h2 {
  font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: .98; letter-spacing: -.038em;
}

/* ============================================================
   DARK OPENING
   The teal hairline that closes the bottom of the dark band has
   to be ::before. The band is <div class="opening grain"> and
   .grain::after already owns the after pseudo-element, so a
   hairline on ::after is silently overwritten by the grain.
   ============================================================ */
.c99.c99-blog .opening::before,
.c99.c99-hub .opening::before,
.c99.c99-article .opening::before,
.c99.c99-search .opening::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 4;
}
/* index and hubs: brightest in the centre, under the kinetic field */
.c99.c99-blog .opening::before, .c99.c99-hub .opening::before, .c99.c99-search .opening::before {
  background: linear-gradient(90deg, rgba(53,214,190,0) 0, var(--teal) 55%, rgba(53,214,190,.25) 100%);
}
/* articles: no field at all, so the hairline runs from the left instead */
.c99.c99-article .opening::before {
  background: linear-gradient(90deg, var(--teal) 0, rgba(53,214,190,0) 42%);
}

.c99.c99-blog .opening .hero, .c99.c99-hub .opening .hero, .c99.c99-search .opening .hero {
  padding-block: clamp(2.2rem, 4.5vw, 3.2rem) clamp(2.4rem, 4.5vw, 3.4rem);
}
.c99.c99-blog .hero__eyebrow, .c99.c99-hub .hero__eyebrow, .c99.c99-search .hero__eyebrow {
  display: block; padding-bottom: 1.1rem;
}
.c99.c99-blog .hero h1, .c99.c99-hub .hero h1, .c99.c99-search .hero h1 { margin-bottom: 1.1rem; }
.c99.c99-blog .hero h1 em, .c99.c99-hub .hero h1 em { font-style: normal; color: var(--blue-l); }
.c99.c99-blog .hero__sub, .c99.c99-hub .hero__sub, .c99.c99-search .hero__sub {
  max-width: 56ch; font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--panel-mute);
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.55;
}
.c99.c99-blog .opening .nav__links a[aria-current],
.c99.c99-hub .opening .nav__links a[aria-current],
.c99.c99-article .opening .nav__links a[aria-current],
.c99.c99-search .opening .nav__links a[aria-current] { color: var(--panel-ink); }

/* ============================================================
   NEWSLETTER
   One bordered object on the dark stage, index only. The blog's
   job is capture, so this is the one page carrying a third
   action. One field: every extra field costs subscribers and a
   name is not needed to send an email.
   ============================================================ */
.c99.c99-blog .sub { border: 1px solid var(--panel-rule); background: rgba(20,22,26,.72); max-width: 660px; }
.c99.c99-blog .sub__k {
  display: block; padding: 1rem 1.2rem .2rem; font-family: var(--mono);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
/* The field and the button come from a Kadence Advanced Form, so the site
   has one form system rather than a bespoke one on this page. Kadence's own
   base treatment stacks fields in a column at 34rem, which these override to
   put the input and the button on one row inside the bordered object. */
.c99.c99-blog .sub .wp-block-kadence-advanced-form { margin: 0; }
.c99.c99-blog .sub .kb-advanced-form {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  gap: 0; max-width: none; margin: 0;
}
.c99.c99-blog .sub .kb-adv-form-field { margin: 0; padding: 0; min-width: 0; }
.c99.c99-blog .sub .kb-adv-form-field label,
.c99.c99-blog .sub .kb-adv-form-field .kb-adv-form-label { display: none; }

.c99.c99-blog .sub .wp-block-kadence-advanced-form input.kb-field {
  background: transparent; border: 0; border-top: 1px solid var(--panel-rule);
  color: var(--panel-ink); font-family: var(--mono); font-size: .82rem;
  letter-spacing: .02em; padding: 1rem 1.2rem; width: 100%; border-radius: 0; box-shadow: none;
}
.c99.c99-blog .sub .wp-block-kadence-advanced-form input.kb-field::placeholder { color: var(--panel-mute); opacity: 1; }
.c99.c99-blog .sub .wp-block-kadence-advanced-form input.kb-field:focus {
  outline: none; border-color: var(--panel-rule); box-shadow: inset 0 -2px 0 var(--blue-l);
}

.c99.c99-blog .sub .kb-submit-field { margin: 0; }
.c99.c99-blog .sub .kb-submit-field button.kb-button {
  height: 100%; border: 0; border-top: 1px solid var(--panel-rule); border-left: 1px solid var(--panel-rule);
  background: var(--panel-ink); color: var(--panel); font-family: var(--mono);
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
  padding: 1rem 1.5rem; cursor: pointer; white-space: nowrap; border-radius: 0;
  transition: background .18s ease, color .18s ease;
}
.c99.c99-blog .sub .kb-submit-field button.kb-button:hover,
.c99.c99-blog .sub .kb-submit-field button.kb-button:focus {
  background: var(--teal); color: var(--panel); border-color: var(--panel-rule);
}

/* the reply, on the dark stage: blue reads wrong here, teal is the dark accent */
.c99.c99-blog .sub .kb-adv-form-message {
  grid-column: 1 / -1; border: 0; border-top: 1px solid var(--panel-rule);
  padding: 1rem 1.2rem; font-family: var(--mono); font-size: .7rem; color: var(--teal);
}
.c99.c99-blog .sub .kb-adv-form-message.kb-adv-form-warning { color: #FF8A8A; }
.c99.c99-blog .sub .kb-adv-form-errors,
.c99.c99-blog .sub .kb-adv-form-error-msg { color: #FF8A8A; padding: 0 1.2rem .6rem; }

.c99.c99-blog .sub__note {
  display: block; padding: .75rem 1.2rem 1rem; font-family: var(--mono);
  font-size: .61rem; letter-spacing: .05em; color: var(--panel-mute);
  border-top: 1px solid var(--panel-rule); line-height: 1.6;
}
@media (max-width: 520px) {
  .c99.c99-blog .sub .kb-advanced-form { grid-template-columns: 1fr; }
  .c99.c99-blog .sub .kb-submit-field button.kb-button { border-left: 0; width: 100%; }
}

/* ============================================================
   TOPIC BAR
   The hubs as one bordered strip, sticky under the opening, with
   a compact search pinned right so it stays reachable while the
   strip scrolls horizontally on narrow screens.
   ============================================================ */
.c99.c99-blog .topics, .c99.c99-hub .topics, .c99.c99-search .topics {
  position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.c99.c99-blog .topics__in, .c99.c99-hub .topics__in, .c99.c99-search .topics__in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
}
.c99.c99-blog .topics__scroll, .c99.c99-hub .topics__scroll, .c99.c99-search .topics__scroll {
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.c99.c99-blog .topics__scroll::-webkit-scrollbar,
.c99.c99-hub .topics__scroll::-webkit-scrollbar,
.c99.c99-search .topics__scroll::-webkit-scrollbar { display: none; }
.c99.c99-blog .topics__scroll a, .c99.c99-hub .topics__scroll a, .c99.c99-search .topics__scroll a {
  flex: 0 0 auto; padding: 1rem 1.2rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
  text-decoration: none; border-right: 1px solid var(--rule); white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.c99.c99-blog .topics__scroll a:first-child,
.c99.c99-hub .topics__scroll a:first-child,
.c99.c99-search .topics__scroll a:first-child { padding-left: 0; }
.c99.c99-blog .topics__scroll a:hover, .c99.c99-hub .topics__scroll a:hover, .c99.c99-search .topics__scroll a:hover {
  background: var(--paper-2); color: var(--ink);
}
.c99.c99-blog .topics__scroll a[aria-current],
.c99.c99-hub .topics__scroll a[aria-current],
.c99.c99-search .topics__scroll a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }
.c99.c99-blog .topics__scroll a span, .c99.c99-hub .topics__scroll a span, .c99.c99-search .topics__scroll a span { color: var(--ink-soft); }

.c99.c99-blog .search, .c99.c99-hub .search, .c99.c99-search .search {
  display: flex; align-items: center; gap: .5rem; border: 1px solid var(--rule);
  padding: .4rem .6rem; background: var(--paper);
}
.c99.c99-blog .search:focus-within, .c99.c99-hub .search:focus-within, .c99.c99-search .search:focus-within { border-color: var(--ink); }
.c99.c99-blog .search svg, .c99.c99-hub .search svg, .c99.c99-search .search svg {
  width: 13px; height: 13px; flex: 0 0 auto; stroke: var(--ink-soft); fill: none; stroke-width: 1.8;
}
.c99.c99-blog .search input, .c99.c99-hub .search input, .c99.c99-search .search input {
  border: 0; background: transparent; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--ink); width: 120px; padding: .25rem 0;
  border-radius: 0; transition: width .2s ease;
}
.c99.c99-blog .search input::placeholder, .c99.c99-hub .search input::placeholder, .c99.c99-search .search input::placeholder {
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; opacity: 1;
}
.c99.c99-blog .search input:focus, .c99.c99-hub .search input:focus, .c99.c99-search .search input:focus { outline: none; width: 190px; }
@media (max-width: 720px) {
  .c99.c99-blog .search input, .c99.c99-hub .search input, .c99.c99-search .search input { width: 88px; }
  .c99.c99-blog .search input:focus, .c99.c99-hub .search input:focus, .c99.c99-search .search input:focus { width: 120px; }
}

/* ============================================================
   FEATURED / PILLAR LEAD
   A slot, not a fixture: whatever sits in the featured field
   appears here, so the section never goes stale. Hubs reuse the
   same object for their pillar article.
   ============================================================ */
.c99.c99-blog .feat, .c99.c99-hub .feat { padding-block: clamp(2.6rem, 5vw, 3.6rem) 0; }
.c99.c99-blog .feat__head, .c99.c99-hub .feat__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.c99.c99-blog .feat__head .tag, .c99.c99-hub .feat__head .tag { color: var(--ink-soft); }
.c99.c99-blog .feat__head a, .c99.c99-hub .feat__head a {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); text-decoration: none;
}
.c99.c99-blog .feat__head a:hover, .c99.c99-hub .feat__head a:hover { color: var(--ink); }

.c99.c99-blog .lead, .c99.c99-hub .lead {
  display: grid; grid-template-columns: 1fr .4fr; border: 1px solid var(--ink);
  text-decoration: none; color: inherit; transition: background .2s ease;
}
.c99.c99-blog .lead:hover, .c99.c99-hub .lead:hover { background: var(--paper-2); }
.c99.c99-blog .lead__main, .c99.c99-hub .lead__main { padding: clamp(1.5rem, 3.2vw, 2.3rem); }
.c99.c99-blog .lead__side, .c99.c99-hub .lead__side {
  padding: clamp(1.5rem, 3.2vw, 2.3rem); border-left: 1px solid var(--rule); background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
}
.c99.c99-blog .lead__k, .c99.c99-hub .lead__k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 1rem;
}
.c99.c99-blog .lead h2, .c99.c99-hub .lead h2 {
  font-size: clamp(1.45rem, 3.2vw, 2.3rem); line-height: 1.04; letter-spacing: -.036em;
  text-transform: uppercase; margin-bottom: .9rem; max-width: 22ch;
}
.c99.c99-blog .lead:hover h2, .c99.c99-hub .lead:hover h2 {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.c99.c99-blog .lead p, .c99.c99-hub .lead p {
  margin: 0; color: var(--ink-mute); font-size: clamp(.96rem, 1.45vw, 1.06rem); line-height: 1.6; max-width: 56ch;
}
.c99.c99-blog .lead__meta, .c99.c99-hub .lead__meta {
  display: block; margin-top: 1.3rem; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
}
.c99.c99-blog .lead__fig b, .c99.c99-hub .lead__fig b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 2.8rem); letter-spacing: -.05em; line-height: 1;
  color: var(--teal-d); font-variant-numeric: tabular-nums;
}
.c99.c99-blog .lead__fig span, .c99.c99-hub .lead__fig span {
  display: block; margin-top: .7rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.5;
}
.c99.c99-blog .lead__go, .c99.c99-hub .lead__go {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: .45rem;
}
.c99.c99-blog .lead__go i, .c99.c99-hub .lead__go i { font-style: normal; display: inline-block; transition: transform .2s ease; }
.c99.c99-blog .lead:hover .lead__go i, .c99.c99-hub .lead:hover .lead__go i { transform: translateX(4px); }
@media (max-width: 860px) {
  .c99.c99-blog .lead, .c99.c99-hub .lead { grid-template-columns: 1fr; }
  .c99.c99-blog .lead__side, .c99.c99-hub .lead__side {
    border-left: 0; border-top: 1px solid var(--rule); flex-direction: row; align-items: flex-end;
  }
}

/* ============================================================
   ARTICLE LEDGER
   One continuous run sharing hairline edges, the house pattern
   from /results and /pricing. Not a card grid: no lift, no
   shadow, no radius, no gap between rows.
   ============================================================ */
.c99.c99-blog .feed, .c99.c99-hub .feed, .c99.c99-search .feed {
  padding-block: clamp(2.8rem, 5.5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
}
.c99.c99-blog .feed__head, .c99.c99-hub .feed__head, .c99.c99-search .feed__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.c99.c99-blog .feed__head p, .c99.c99-hub .feed__head p, .c99.c99-search .feed__head p {
  margin: .8rem 0 0; color: var(--ink-mute); max-width: 56ch;
}
.c99.c99-blog .run, .c99.c99-hub .run, .c99.c99-search .run { border-top: 1px solid var(--ink); }
.c99.c99-blog .post, .c99.c99-hub .post, .c99.c99-search .post {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0 clamp(1.6rem, 3vw, 2.3rem);
  border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
  transition: background .18s ease;
}
.c99.c99-blog .post:hover, .c99.c99-hub .post:hover, .c99.c99-search .post:hover { background: var(--paper-2); }
.c99.c99-blog .post__n, .c99.c99-hub .post__n, .c99.c99-search .post__n {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--ink-soft);
  padding-top: .45rem; font-variant-numeric: tabular-nums;
}
.c99.c99-blog .post__hub, .c99.c99-hub .post__hub, .c99.c99-search .post__hub {
  display: block; font-family: var(--mono); font-size: .61rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue); margin-bottom: .6rem;
}
.c99.c99-blog .post h3, .c99.c99-hub .post h3, .c99.c99-search .post h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: .6rem; max-width: 30ch; font-weight: 700;
}
.c99.c99-blog .post:hover h3, .c99.c99-hub .post:hover h3, .c99.c99-search .post:hover h3 {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.c99.c99-blog .post p, .c99.c99-hub .post p, .c99.c99-search .post p {
  margin: 0; color: var(--ink-mute); font-size: clamp(.94rem, 1.4vw, 1.02rem); line-height: 1.6; max-width: 62ch;
}
.c99.c99-blog .post__meta, .c99.c99-hub .post__meta, .c99.c99-search .post__meta {
  text-align: right; font-family: var(--mono); font-size: .61rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); line-height: 1.9; white-space: nowrap; padding-top: .3rem;
}
.c99.c99-blog .post__meta b, .c99.c99-hub .post__meta b, .c99.c99-search .post__meta b {
  display: block; font-weight: 500; color: var(--ink);
}
@media (max-width: 820px) {
  .c99.c99-blog .post, .c99.c99-hub .post, .c99.c99-search .post { grid-template-columns: 1fr; gap: .9rem; }
  .c99.c99-blog .post__n, .c99.c99-hub .post__n, .c99.c99-search .post__n { display: none; }
  .c99.c99-blog .post__meta, .c99.c99-hub .post__meta, .c99.c99-search .post__meta { text-align: left; }
}

.c99.c99-blog .more, .c99.c99-hub .more, .c99.c99-search .more {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: .3rem;
}
.c99.c99-blog .more i, .c99.c99-hub .more i, .c99.c99-search .more i { font-style: normal; }

/* ============================================================
   HUB GRID
   Nine cells of one bordered object, three by three: the eight
   hubs plus a cell pointing at /results.
   ============================================================ */
.c99.c99-blog .hubs, .c99.c99-search .hubs { padding-block: 0 clamp(3.5rem, 7vw, 5.5rem); }
.c99.c99-blog .hubs__head, .c99.c99-search .hubs__head { max-width: 62ch; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.c99.c99-blog .hubs__head p, .c99.c99-search .hubs__head p { color: var(--ink-mute); margin: 1rem 0 0; }
.c99.c99-blog .hubs__grid, .c99.c99-search .hubs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--ink);
}
.c99.c99-blog .hubs__grid a, .c99.c99-search .hubs__grid a {
  background: var(--paper); padding: 1.5rem 1.5rem 1.7rem; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; transition: background .18s ease;
}
.c99.c99-blog .hubs__grid a:hover, .c99.c99-search .hubs__grid a:hover { background: var(--paper-2); }
.c99.c99-blog .hubs__grid .n, .c99.c99-search .hubs__grid .n {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); display: flex; justify-content: space-between; margin-bottom: 1rem;
}
.c99.c99-blog .hubs__grid .n em, .c99.c99-search .hubs__grid .n em { font-style: normal; color: var(--ink-soft); }
.c99.c99-blog .hubs__grid b, .c99.c99-search .hubs__grid b {
  display: block; font-size: clamp(1.05rem, 2vw, 1.28rem); letter-spacing: -.03em;
  text-transform: uppercase; line-height: 1.1; margin-bottom: .55rem;
}
.c99.c99-blog .hubs__grid p, .c99.c99-search .hubs__grid p {
  margin: 0 0 1.2rem; font-size: .9rem; color: var(--ink-mute); line-height: 1.55;
}
.c99.c99-blog .hubs__grid .go, .c99.c99-search .hubs__grid .go {
  margin-top: auto; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink);
}
.c99.c99-blog .hubs__grid .go i, .c99.c99-search .hubs__grid .go i {
  font-style: normal; display: inline-block; transition: transform .2s ease;
}
.c99.c99-blog .hubs__grid a:hover .go i, .c99.c99-search .hubs__grid a:hover .go i { transform: translateX(4px); }
@media (max-width: 1000px) {
  .c99.c99-blog .hubs__grid, .c99.c99-search .hubs__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .c99.c99-blog .hubs__grid, .c99.c99-search .hubs__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HUB ARCHIVE
   The three-figure teal row under the intro.
   ============================================================ */
.c99.c99-hub .figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 780px; }
.c99.c99-hub .figs > div { min-width: 0; }
.c99.c99-hub .figs b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.05em; line-height: 1;
  color: var(--teal); font-variant-numeric: tabular-nums;
}
.c99.c99-hub .figs span {
  display: block; margin-top: .7rem; font-family: var(--mono); font-size: .61rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--panel-mute); line-height: 1.5;
}
@media (max-width: 620px) { .c99.c99-hub .figs { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ============================================================
   ARTICLE HEADER
   Title and metadata, nothing else. No kinetic field: motion
   behind something a reader is about to spend eleven minutes
   with is an irritation.
   ============================================================ */
.c99.c99-article .opening .crumb {
  padding-top: 1.3rem; margin: 0; font-family: var(--mono); font-size: .63rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--panel-mute);
}
.c99.c99-article .opening .crumb a { color: var(--panel-mute); text-decoration: none; }
.c99.c99-article .opening .crumb a:hover { color: var(--panel-ink); }
.c99.c99-article .opening .crumb span { color: var(--blue-l); }

.c99.c99-article .head { padding-block: clamp(1.6rem, 3.4vw, 2.3rem) clamp(1.8rem, 3.4vw, 2.6rem); max-width: 860px; }
.c99.c99-article .head__eyebrow { display: block; padding-bottom: 1rem; }
.c99.c99-article .head h1 { margin-bottom: 1.1rem; }
.c99.c99-article .head h1 em { font-style: normal; color: var(--blue-l); }
.c99.c99-article .head__dek {
  font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--panel-mute);
  margin: 0 0 clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.55; max-width: 62ch;
}
.c99.c99-article .byline {
  display: flex; flex-wrap: wrap; gap: .55rem 1.8rem; align-items: baseline;
  padding-top: 1.2rem; padding-bottom: .2rem; border-top: 1px solid var(--panel-rule);
  font-family: var(--mono); font-size: .65rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--panel-mute);
}
.c99.c99-article .byline b { font-weight: 500; color: var(--panel-ink); }
.c99.c99-article .byline a { color: var(--blue-l); text-decoration: none; }
.c99.c99-article .byline a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   THE SHORT ANSWER
   On paper, below the header, aligned to the article column via
   the offset grid. It reads as the first thing in the piece
   rather than as header decoration, and an assistant can lift it
   cleanly because it sits in the main content flow.
   ============================================================ */
.c99.c99-article .offset, .c99.c99-hub .offset {
  display: grid; grid-template-columns: 230px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.c99.c99-article .offset > :first-child, .c99.c99-hub .offset > :first-child { min-width: 0; }
@media (max-width: 960px) {
  .c99.c99-article .offset, .c99.c99-hub .offset { grid-template-columns: 1fr; gap: 0; }
  .c99.c99-article .offset > .offset__rail, .c99.c99-hub .offset > .offset__rail { display: none; }
}

.c99.c99-article .short, .c99.c99-hub .short {
  border: 1px solid var(--ink); border-left: 3px solid var(--teal-d);
  background: var(--paper-2); padding: clamp(1.3rem, 3vw, 1.9rem); max-width: 70ch;
}
.c99.c99-article .short .k, .c99.c99-hub .short .k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--teal-d); margin-bottom: .85rem;
}
.c99.c99-article .short p, .c99.c99-hub .short p {
  margin: 0; color: var(--ink); font-size: clamp(1rem, 1.55vw, 1.1rem); line-height: 1.64;
}
.c99.c99-article .short .more, .c99.c99-hub .short .more {
  display: block; margin-top: .9rem; font-family: var(--mono); font-size: .67rem;
  letter-spacing: .06em; color: var(--ink-soft); border-bottom: 0; padding-bottom: 0;
}
.c99.c99-article .short .more a, .c99.c99-hub .short .more a {
  color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(27,59,216,.35);
}
.c99.c99-article .short__wrap, .c99.c99-hub .short__wrap { padding-block: clamp(2.2rem, 4.5vw, 3.2rem) 0; }

/* ============================================================
   BODY: sticky contents rail plus article column
   ============================================================ */
.c99.c99-article .body { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.c99.c99-article .body__grid {
  display: grid; grid-template-columns: 230px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.c99.c99-article .toc { position: sticky; top: 92px; border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.c99.c99-article .toc__k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem;
}
.c99.c99-article .toc a {
  display: block; font-size: .86rem; line-height: 1.4; color: var(--ink-mute);
  text-decoration: none; padding: .5rem 0 .5rem .8rem; border-left: 1px solid var(--rule);
  transition: color .16s ease, border-color .16s ease;
}
.c99.c99-article .toc a:hover { color: var(--ink); }
.c99.c99-article .toc a.on { color: var(--ink); border-left-color: var(--blue); font-weight: 600; }
@media (max-width: 960px) {
  .c99.c99-article .body__grid { grid-template-columns: 1fr; }
  .c99.c99-article .toc { position: static; margin-bottom: 2rem; }
  .c99.c99-article .toc a { display: inline-block; border-left: 0; padding: .3rem .9rem .3rem 0; }
}

.c99.c99-article .article { max-width: 70ch; font-size: clamp(1.02rem, 1.5vw, 1.12rem); line-height: 1.72; }
.c99.c99-article .article > * + * { margin-top: 1.35rem; }
.c99.c99-article .article h2 {
  font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.04; letter-spacing: -.035em;
  text-transform: uppercase; margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.c99.c99-article .article h3 { font-size: clamp(1.08rem, 1.9vw, 1.28rem); letter-spacing: -.025em; margin-top: 2.2rem; }
.c99.c99-article .article p { margin: 0; color: var(--ink-mute); }
.c99.c99-article .article p strong, .c99.c99-article .article li strong { color: var(--ink); font-weight: 700; }
.c99.c99-article .article a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(27,59,216,.32); }
.c99.c99-article .article a:hover { border-bottom-color: var(--blue); }
.c99.c99-article .article ul { margin: 0; padding-left: 1.1rem; color: var(--ink-mute); }
.c99.c99-article .article li { margin-bottom: .6rem; }
.c99.c99-article .article li::marker { color: var(--blue); }

/* takeaways ledger */
.c99.c99-article .takeaways { border: 1px solid var(--ink); padding: clamp(1.3rem, 3vw, 1.9rem); background: var(--paper-2); }
.c99.c99-article .takeaways .k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 1.1rem;
}
.c99.c99-article .takeaways ol { margin: 0; padding: 0; list-style: none; counter-reset: t; }
.c99.c99-article .takeaways li {
  counter-increment: t; display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
  font-size: .98rem; line-height: 1.6; color: var(--ink-mute); margin-bottom: 0;
}
.c99.c99-article .takeaways li:last-child { border-bottom: 0; padding-bottom: 0; }
.c99.c99-article .takeaways li::before {
  content: counter(t, decimal-leading-zero); font-family: var(--mono);
  font-size: .68rem; color: var(--ink-soft); padding-top: .3rem;
}
.c99.c99-article .takeaways li::marker { content: none; }

/* price table */
.c99.c99-article .ptable { border: 1px solid var(--ink); font-family: var(--mono); font-size: .82rem; }
.c99.c99-article .ptable__row {
  display: grid; grid-template-columns: 1.1fr .8fr 1.6fr; gap: 1rem;
  padding: .95rem 1.1rem; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.c99.c99-article .ptable__row:last-child { border-bottom: 0; }
.c99.c99-article .ptable__row--h {
  background: var(--ink); color: var(--paper); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.c99.c99-article .ptable__row--us { background: var(--paper-2); }
.c99.c99-article .ptable__row b { font-weight: 500; color: var(--ink); }
.c99.c99-article .ptable__row--h b { color: var(--paper); }
.c99.c99-article .ptable__row .n { color: var(--blue); font-variant-numeric: tabular-nums; }
.c99.c99-article .ptable__row .d { font-family: var(--grot); font-size: .92rem; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 760px) { .c99.c99-article .ptable__row { grid-template-columns: 1fr; gap: .35rem; } }

/* inline callout */
.c99.c99-article .callout { border-left: 3px solid var(--blue); padding: .2rem 0 .2rem 1.2rem; }
.c99.c99-article .callout p {
  margin: 0; color: var(--ink); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.5; letter-spacing: -.015em;
}
.c99.c99-article .callout span {
  display: block; margin-top: .6rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.c99.c99-article .callout span a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(27,59,216,.35); }

/* method note: the block that makes the honesty claim true page by page */
.c99.c99-article .method { border: 1px dashed var(--rule); padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.c99.c99-article .method .k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem;
}
.c99.c99-article .method p { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--ink-mute); }

/* ============================================================
   FAQ, aligned to the article column
   ============================================================ */
.c99.c99-article .faq, .c99.c99-hub .faq { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.c99.c99-article .faq__in, .c99.c99-hub .faq__in { max-width: 70ch; }
.c99.c99-article .faq__list, .c99.c99-hub .faq__list { border-top: 1px solid var(--ink); margin-top: 1.4rem; }
.c99.c99-article .faq details, .c99.c99-hub .faq details { border-bottom: 1px solid var(--rule); }
.c99.c99-article .faq summary, .c99.c99-hub .faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.1rem); letter-spacing: -.02em;
}
.c99.c99-article .faq summary::-webkit-details-marker, .c99.c99-hub .faq summary::-webkit-details-marker { display: none; }
.c99.c99-article .faq summary::after, .c99.c99-hub .faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 1rem;
  font-family: var(--mono); font-size: 1.15rem; color: var(--blue); line-height: 1;
}
.c99.c99-article .faq details[open] summary::after, .c99.c99-hub .faq details[open] summary::after { content: "\2013"; }
.c99.c99-article .faq p, .c99.c99-hub .faq p {
  margin: 0 0 1.15rem; padding-right: 2.5rem; color: var(--ink-mute); font-size: .98rem; line-height: 1.68;
}

/* ============================================================
   AUTHOR BOX, aligned to the article column
   ============================================================ */
.c99.c99-article .author { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
/* The author section carries the same head rhythm as the FAQ above it, so it
   reads as a designed section rather than a box that trails the article. The
   whole object sits on paper-2 with a 3px ink top edge, which is what pulls
   it visually clear of the body copy. */
.c99.c99-article .author__head { margin-bottom: 1.4rem; }
/* Full shell width, matching the related grid below: the box left the reading
   column when it gained its own section head. */
.c99.c99-article .author__in {
  border: 1px solid var(--ink); border-top: 3px solid var(--ink);
  background: var(--paper-2);
  display: grid; grid-template-columns: 1.4fr 1fr;
}
.c99.c99-article .author__in > div { padding: clamp(1.4rem, 3vw, 2.1rem); }
.c99.c99-article .author__in > div + div { border-left: 1px solid var(--rule); }
.c99.c99-article .author .k {
  display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem;
}
.c99.c99-article .author b { display: block; font-size: 1.15rem; letter-spacing: -.03em; margin-bottom: .25rem; }
.c99.c99-article .author .role {
  display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 1rem;
}
.c99.c99-article .author p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink-mute); }
.c99.c99-article .author .lines div {
  display: flex; align-items: baseline; gap: .6rem; padding: .6rem 0;
  border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .68rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
.c99.c99-article .author .lines div:last-child { border-bottom: 0; }
.c99.c99-article .author .lines .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); }
.c99.c99-article .author .lines .v { color: var(--ink); }
.c99.c99-article .author .lines .v a { color: var(--blue); text-decoration: none; }
@media (max-width: 820px) {
  .c99.c99-article .author__in { grid-template-columns: 1fr; }
  .c99.c99-article .author__in > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ============================================================
   RELATED
   The first full-width object after the reading column, which is
   how the page signals the article is over.
   ============================================================ */
.c99.c99-article .rel { padding-block: 0 clamp(3.5rem, 7vw, 5.5rem); }
.c99.c99-article .rel__head { margin-bottom: 1.5rem; }
.c99.c99-article .rel__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
/* Fewer than three related items must not leave empty grid tracks showing as
   a bare slab of the rule colour: the columns track the cell count. */
.c99.c99-article .rel__grid[data-n="1"] { grid-template-columns: 1fr; }
.c99.c99-article .rel__grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
.c99.c99-article .rel__grid a {
  background: var(--paper); padding: 1.4rem 1.4rem 1.6rem; text-decoration: none;
  color: inherit; display: block; transition: background .18s ease;
}
.c99.c99-article .rel__grid a:hover { background: var(--paper-2); }
.c99.c99-article .rel__grid .k {
  display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue); margin-bottom: .7rem;
}
.c99.c99-article .rel__grid b { display: block; font-size: 1.02rem; letter-spacing: -.025em; line-height: 1.25; margin-bottom: .5rem; }
.c99.c99-article .rel__grid p { margin: 0; font-size: .88rem; color: var(--ink-mute); line-height: 1.5; }
.c99.c99-article .rel__grid em {
  font-style: normal; display: block; margin-top: .8rem; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 860px) { .c99.c99-article .rel__grid { grid-template-columns: 1fr; } }

/* ============================================================
   QUICK BAR ADDITIONS
   The article title in the centre slot and the reading progress
   fill along the bottom edge.
   ============================================================ */
.c99.c99-article .qbar__title {
  flex: 1; font-family: var(--mono); font-size: .63rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--panel-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) { .c99.c99-article .qbar__title { display: none; } }
.c99.c99-article .qbar__rail { height: 2px; background: var(--panel-rule); }
.c99.c99-article .qbar__fill { height: 2px; width: 0; background: var(--teal); transition: width .1s linear; }
@media (prefers-reduced-motion: reduce) { .c99.c99-article .qbar__fill { transition: none; } }

/* ============================================================
   SEARCH RESULTS
   The ledger, reused. An empty result set shows the hub grid
   rather than a dead end.
   ============================================================ */
.c99.c99-search .count {
  display: block; margin-top: 1rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--panel-mute);
}
.c99.c99-search .empty { border: 1px dashed var(--rule); padding: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.c99.c99-search .empty p { margin: 0; color: var(--ink-mute); }