/* Shared page chrome: the fixed top bar and the brand mark inside it.
 *
 * Extracted rather than pasted into six files. Each page carries its own
 * <style> block by design - they are self-contained static documents with
 * no build step - but this bar is identical on all of them, and six copies
 * of it is six places to fix. fonts.css already set the precedent that a
 * genuinely shared thing gets a shared file.
 *
 * What deliberately stays per-page is the right-hand side of the bar: the
 * home page has a dropdown panel there, the subpages a plain link, so
 * those styles live with the pages that use them.
 *
 * Depends on the custom properties each page defines on :root -
 * --font-mono, --panel, --panel-2, --line, --ink, --accent,
 * --accent-bright. Nothing here hard-codes a palette value except the two
 * hover states, which are one step past --accent-bright and have no token.
 */

/* ==== Skip link ====
   WCAG 2.4.1 (Bypass Blocks, Level A). The bar below is eight tab stops
   wide on a desktop viewport - the mark, six nav links and Try Varra - and
   a keyboard user paid all eight on every page before reaching any
   content. This is the documented way out of that, and it costs a mouse
   user nothing: it is off-screen until it takes focus.

   One thing here is load-bearing rather than stylistic: `left`, not
   `display` or `visibility`. An element hidden by either of those is
   removed from the tab order entirely, so the link could never receive the
   focus that is supposed to reveal it. Moving it off-screen keeps it
   focusable, which is the whole mechanism.

   The :focus rule is written after the base rule by convention, not by
   necessity - `:focus` is a pseudo-class, so `.skip-link:focus` scores
   (0,2,0) against `.skip-link`'s (0,1,0) and wins on specificity wherever
   it sits. That is worth stating because this file's other ordering
   hazard - the media queries below, which add no specificity and are
   therefore entirely order-dependent - is the opposite case, and the two
   look alike. Checked by declaring the focus rule first in a scratch
   document: it still won.

   The target carries tabindex="-1" for a related reason: without
   it some browsers move the scroll position but leave focus on the link,
   so the next Tab drops the user straight back into the bar. That failure
   looks exactly like success until someone presses Tab twice.

   z-index clears .topbar's 60 so the link is not painted underneath the
   bar it exists to skip. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 70;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--accent-text);
  border-radius: 4px;
  padding: 12px 18px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* The jump target. Removing the outline is safe here and only here: the
   heading the link lands on is what tells the user they arrived, and a
   focus ring drawn around the entire main column is noise rather than
   information. Nothing else on the site suppresses one. */
main:focus { outline: none; }

/* One bar owns both corners. They were previously two independently
   fixed elements, which meant two sets of offsets to keep in step and
   no shared surface to put a background on when the page scrolls. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 60px;
  border-bottom: 1px solid transparent;
  transition: padding 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
/* Once the page moves, the bar is sitting over content rather than over
   the hero's empty top, so it earns a surface to sit on: --panel, the
   same grey every card and panel on the site already uses.

   Solid, not translucent. A blur behind it would let the animated hex
   field show through as moving mush, and this page already runs a
   canvas - backdrop-filter on top of that is a cost with nothing to
   show for it once the colour is opaque anyway.

   The border is always declared and only changes colour. A border that
   appears from nothing shifts the layout a pixel as it lands. */
.topbar.is-stuck {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: var(--panel);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
}


/* The hero's eyebrow, moved into the bar - same face, colour and
   tracking it always had, at 14px/600 rather than 11px/400 so it
   carries the corner instead of whispering from it. */
.brand-mark {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  /* Named rather than written out at each breakpoint. It was named
     originally so the drawn A could cancel exactly one unit of it; that
     glyph is gone, but a single source for the tracking is still the
     right shape, and the media queries below each override it once.
     Verified at 1440, 860 and 600 (3.24px, 2.7px, 1.32px). */
  --bm-track: 0.18em;
  letter-spacing: var(--bm-track);
  /* --ink, and now --accent would be nearly the same thing: both are
     Warm Cream, at 16.02:1 and 14.26:1 on --panel. This used to be the
     one rule keeping the wordmark out of the violet accent, which
     measured 2.61:1 here and failed WCAG AA even at the 3:1 allowed for
     large bold text.

     Left as --ink because the mark should be the brightest cream in the
     corner and --accent is the fill tone, half a step down. */
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  --brand-gap: 10px;
  gap: var(--brand-gap);
  text-decoration: none;
  transition: color 0.15s ease;
}
/* The glow is already in the artwork, so hover deepens what is there
   rather than adding a new effect: the chip brightens a touch and
   throws a little more light. No movement - a mark that shifts under
   the cursor reads as a button, and this is a logo. */
.brand-chip {
  transition: filter 0.18s ease, width 0.22s ease, opacity 0.22s ease,
              margin-right 0.22s ease;
}
/* At the top of the page the corner is the name alone; the mark arrives as
   the bar collapses and leaves again at the top. Keyed off .is-stuck, which
   chrome.js already maintains with two thresholds, so the mark inherits the
   hysteresis and cannot flicker on a scroll that sits on the boundary.

   width and margin, not display: none. The chip is a flex item in a row
   with a gap, so hiding it outright would leave the gap behind and jump the
   wordmark sideways. Collapsing its width and cancelling one gap's worth of
   margin lets the name slide over instead.

   Specificity (0,2,1) beats the plain .brand-chip rules that set width at
   each breakpoint, so this holds at every size without being repeated in
   the media queries - where it would add no specificity anyway. */
.topbar:not(.is-stuck) .brand-chip {
  width: 0;
  opacity: 0;
  margin-right: calc(var(--brand-gap) * -1);
}
/* ...and the name leaves as the mark arrives, so the corner carries one
   thing at a time rather than both at once.

   Targeted by class, not by span[aria-hidden="true"]. That attribute went
   when the drawn A did: the span used to be hidden from assistive tech
   because a .sr-only sibling carried the real name beside it, and the
   visible copy spelled "Crbon". The span now holds the name itself, in
   plain text, so it must stay readable.

   Specificity drops from (0,2,1) to (0,2,0) here and from (0,3,1) to (0,3,0)
   below. Both fall by the same amount, so the rule that used to win still
   does, and nothing else in this file targets this span.

   max-width rather than width: the span is sized by its text, so there is
   no width to animate from. margin-left cancels the one flex gap that would
   otherwise sit between the mark and nothing. */
.brand-mark > .bm-name {
  overflow: hidden;
  white-space: nowrap;
  max-width: 32em;
  transition: max-width 0.22s ease, opacity 0.22s ease, margin-left 0.22s ease;
}
.topbar.is-stuck .brand-mark > .bm-name {
  max-width: 0;
  opacity: 0;
  margin-left: calc(var(--brand-gap) * -1);
}
.brand-mark:hover .brand-chip,
.brand-mark:focus-visible .brand-chip {
  filter: brightness(1.12) drop-shadow(0 0 7px rgba(232, 226, 212, 0.45));
}
.brand-mark:hover { color: #ffffff; }
/* Keyboard focus has to be visible, and the outline is offset so it
   clears the chip's glow instead of cutting through it. */
.brand-mark:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-chip,
  .brand-mark > .bm-name { transition: none; }
}
/* The chip is the full mark cropped to its ink - brand/mark-chip.svg -
   not the small cut and not the square artwork.

   The square drawing is only 35 of its 100 units tall, so a square chip
   spends most of its height on empty canvas. Cropped, the mark is 64x33
   where it used to be 36x36: nearly twice as wide for three fewer pixels of
   bar. That is what makes the circuitry legible at this size at all. The
   traces are 1.04 units in a 76.3-unit box, so at 64px on a 2x display they
   land at 1.74 device px, against 0.75 for the square mark at 36px - which
   is why the small cut, with no traces at all, used to be the honest choice
   here.

   An SVG in an <img>, not a PNG. It is crisp at every device pixel ratio
   rather than at the two the PNG was cut for, and at 2.2KB it is smaller
   than the file it replaced.

   Drawn with no ground, which is what stops it sitting on the bar as a
   visible darker square. That used to require extracting alpha from the
   artwork's own brightness and a radial falloff to clear the stray tokens
   at the corners; the mark is flat vector now, so the ground rect is simply
   not drawn. The favicons keep theirs - a transparent favicon puts a white
   mark straight onto the browser's tab strip, which disappears in a light
   theme. */
/* Portrait now, where the CCI chip was landscape. The old lockup cropped
   to 76.3x39.1 and this one crops to 65.65x83.59, an aspect of 0.7853.
   Every width below is that ratio applied to the height beside it and
   rounded, so the bar's height is untouched at every breakpoint and only
   the chip's footprint changes:

     33 -> 25.92 -> 26      25 -> 19.63 -> 20
     29 -> 22.78 -> 23      22 -> 17.28 -> 17

   Keep them in step. A width that does not match its height letterboxes
   the mark inside the <img> box rather than resizing it, which shows as
   the chip drifting off the wordmark's optical centre. */
.brand-chip { width: 26px; height: 33px; flex: none; display: block; }
/* The drawn A is gone with the name it belonged to.

   "Carbon" had no crossbar-less A in the display face, so the wordmark
   drew one as an inline <svg> - and for a long time that drawing replaced
   the letter, which left "Crbon Circuit Intelligence" in the extracted
   text of every page. The fix was a zero-width real "a" sitting beside the
   drawing, with three measured CSS lines holding it in place (display:
   inline, because absolute and inline-block both blockify the box and make
   Chrome announce "C A RBON"; letter-spacing: 0, because an inherited em
   value resolves against the parent's font-size and shifted the wordmark
   3.25px without it).

   None of it is needed now. "Syntur" sets in Chakra Petch with no
   substitution, so the name is plain text and the document says what the
   screen says. The lesson survives the markup: if a drawn glyph is ever
   needed again, it stands BESIDE its letter, never in place of one. */

/* Hides text visually while leaving it in the document for screen readers -
   the "Menu" label on the bar's button, the captions on the reference
   tables. It is not used to shadow the wordmark - the visible copy of the
   name is the only copy, and it is spelt correctly. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* An intermediate step, and not for looks. Between about 640 and 670px
   the mark and the button exactly consumed the bar: the measured gap
   sat at 20px across that whole band, which is the flex gap itself and
   therefore zero actual slack. Anything that made the name wider - most
   realistically Plex Mono failing to load and a broader fallback
   standing in - would have overflowed. This buys the band real room.
   Declared before the 640 block so that one still wins below it. */
@media (max-width: 860px) {
  .brand-mark { font-size: 15px; }
  .brand-chip { width: 23px; height: 29px; }
}

@media (max-width: 640px) {
  .topbar { padding: 14px 20px; }
  .topbar.is-stuck { padding-top: 7px; padding-bottom: 7px; }
  /* This ramp was bought by a constraint that is gone. "Carbon Circuit
     Intelligence" is 27 characters and at 0.18em it ran well past the Try
     Varra button, so the size had to drop on a phone. "Syntur" is six.

     The ramp stays anyway, and not out of inertia: the bar's type scales
     with everything else around it, and a name that held 18px while the
     nav and the button stepped down would be the one element on the bar
     that ignored the breakpoint. Face, weight and colour are unchanged.
     What is no longer true is that it is load-bearing - there is room to
     spare now, so this is proportion, not clearance. */
  .brand-mark { font-size: 12px; --bm-track: 0.11em; --brand-gap: 8px; }
  .brand-chip { width: 20px; height: 25px; }
}

/* One more step down at the narrowest width anyone still designs for.
   Measured at 320px: the chip and the name together clear the button with
   room that the old 27-character name did not have. */
@media (max-width: 380px) {
  .brand-mark { font-size: 10px; --bm-track: 0.06em; --brand-gap: 7px; }
  .brand-chip { width: 17px; height: 22px; }
}

/* --- Navigation ------------------------------------------------------ */

/* In the bar, desktop only. The breakpoint is measured, not guessed: with
   Home included the bar needs 976px on index and 961px on the subpages
   before the Try button is pushed past the right edge. Adding Reference as
   a sixth link raised that to 1079px on index and 1059px on the subpages,
   which is where 1100 came from.

   Skills and Business made it eight links. Re-measured the same way — a
   headless Chromium sweeping 1000 to 1500 in 5px steps, comparing the Try
   button's right edge against innerWidth and the nav's left edge against
   the mark's right — the narrowest fit is 1145px, and identically so on
   index, the subpages and the founder page. Set at 1150 rather than 1145:
   the measurement is the exact edge with no slack in it, and one 5px step
   of margin costs nothing at a width where the menu is the fallback.

   Note the bar is position: fixed, which means it contributes nothing to
   document.scrollWidth — overflow here is only visible by comparing each
   item's right edge against innerWidth. An earlier 861px breakpoint
   shipped broken for exactly that reason.
   Below this width the footer carries navigation, so nothing is unreachable. */
.bar-nav { display: none; }
/* Colour and decoration sit outside the query on purpose. Everything about
   .bar-nav used to live inside it, so below the breakpoint these links carried
   the browser's own link styling - rgb(0,0,238), underlined. Hidden, so
   nobody saw it, which is exactly the kind of thing that surfaces the first
   time a print stylesheet or a forced-colors mode ignores `display: none`. */
.bar-nav a { color: var(--muted); text-decoration: none; }
@media (min-width: 1150px) {
  .bar-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
  }
  .bar-nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 3px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .bar-nav a:hover { color: var(--ink); }
  /* The page you are on, marked for both eyes and screen readers. */
  .bar-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  .bar-nav a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
}

/* Footer navigation, on every page at every width. This is the fix for the
   dead ends: each subpage previously linked only to home and to the privacy
   policy, so a reader on Pricing could not reach Roadmap without going back,
   and a crawler found no path between any two subpages. */
.site-foot {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 60px 104px;
}
 /* Four columns rather than one row of seven links. The row was the only
    company information anywhere on the site: no contact, no terms, no
    profiles - and the two profiles the JSON-LD claims in sameAs were not
    linked from any page, so the claim was never confirmed in the direction
    Google reads (SKILL.md rule 4).

    Rows are 34px tall with 12px of vertical gap, which puts the hit area
    over the 44px guideline without setting a font size nobody wants in a
    footer. */
.foot-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 26px 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.foot-h {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.site-foot nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.site-foot a {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 40px;
  transition: color 0.15s ease;
}
.site-foot a:hover { color: var(--accent-bright); }
.site-foot a[aria-current="page"] { color: var(--ink); }
.site-foot a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
.foot-legal {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (max-width: 640px) {
  .site-foot { padding: 0 24px 104px; }
}


/* ---------------------------------------------------------------------
   Subpage shell. These 49 rules were byte-identical in the inline <style>
   of all five subpages - two of them were 100% duplicates of each other.
   That duplication is what made "change every instance" a recurring bug
   here: a fix applied to one page silently left four behind.

   Every page links this file BEFORE its own <style>, so page-specific
   rules still win exactly as they did when these lived inline.
   --------------------------------------------------------------------- */

/* :where(.subpage), not .subpage: :where() contributes ZERO specificity, so
   `:where(.subpage) p` still weighs exactly as much as the bare `p` these
   rules used to be when they lived inline. A plain `.subpage p` would score
   (0,1,1) and start beating page-level rules like .lede at (0,1,0) that
   previously won - which it did, shifting all five subpages on the first
   attempt. */
/* The Carbon / Charcoal / Cream brand system, shared by every page that
   links this file.

   These values are not a second palette. They are the same numbers
   index.html defines on its own :root, mapped onto the token names this
   file has always used, so the home page and the twelve information pages
   are one brand rather than two. The site ran a violet accent over a
   slightly cool near-black until the violet identity was retired; every
   value below moved, not just the accent, because the old neutrals were
   cool (#131315, #edeff0) and the approved ones are warm.

   The home page still declares its own :root, after this file in source
   order, with identical values. That is redundancy, not conflict - and it
   is deliberate: index.html is a self-contained document that also states
   its own contrast measurements, and deleting its block to save fifteen
   lines would make the approved home page depend on a file it currently
   only borrows chrome from. Change both together, or neither. */
:root {
    --void: #0a0a0a;      /* Carbon Black - dominant dark surface */
    --panel: #141414;     /* Dark Charcoal - elevated dark surface */
    --panel-2: #1c1c1c;   /* one step up: insets, hover */
    --line: #262626;
    --ink: #f2efe6;       /* Warm Cream - 17.22:1 on Carbon Black */
    --muted: #94908a;     /* 6.24:1 on Carbon Black, 5.80:1 on Charcoal */
    --muted-2: #635f5a;   /* 3.13:1 - rules and borders only, never text */
    --accent: #e8e2d4;
    --accent-bright: #f7f3e9;
    /* Warm Cream is now the accent, which inverts what these two tokens
       used to mean. The violet --accent was DARKER than the ground and
       failed AA as text at 2.79:1, so --accent-text existed to hold a
       brighter violet for anything that set `color`. Cream is lighter than
       the ground on both counts - --accent measures 15.33:1 on --void and
       14.26:1 on --panel - so --accent-text is no longer a workaround. It
       is kept, at the same value as --accent, because thirty-odd rules and
       four pages name it and renaming them buys nothing.

       The live consequence is the other way round: --accent is bright
       enough to be a FILL, and anything filled with it needs dark text.
       See .plan-badge, .plan-cta.primary and .page-cta below, which all
       carried `color: var(--ink)` over a dark violet fill and would have
       been cream on cream. */
    --accent-text: #e8e2d4;
    --accent-dim: #4a4640;
    --accent-glow: rgba(232, 226, 212, 0.10);
    --font-display: 'Chakra Petch', 'Arial Narrow', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  }

* { box-sizing: border-box; }

html { background: var(--void); }

body:where(.subpage) {
    margin: 0;
    background: var(--void);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

/* The bar positions this now; it used to be fixed on its own.

   No longer scoped to .subpage. The home page used to carry a <button>
   that opened a panel of page descriptions, which meant the one control
   labelled "Try Varra" did not try Varra - it opened a menu whose last
   row was the actual link. Now every page in the site, home included,
   carries this same plain link, and the page list lives in .bar-nav above
   1150px and in the menu below it. */
.try-nav { position: relative; }

.try-nav a {
    /* Mirrors .try-btn on the home page exactly, so the bar is the same
       height on every page - otherwise it jumps as you navigate.

       Two things had to match. As plain inline, vertical padding is
       painted but not counted, so this measured 26px while drawing 39.
       And inline-block alone still inherited the body's 1.6 line-height
       and came out at 44, where the home page's <button> gets
       line-height: normal from the UA sheet. inline-flex plus an explicit
       normal reproduces both. */
    display: inline-flex;
    align-items: center;
    /* 44px, the tap-target floor. This used to be 34px and had to match
       the home page's <button> exactly so the bar did not jump between
       pages; with that button gone there is nothing left to match, so it
       takes the size a thumb actually needs. */
    min-height: 44px;
    line-height: normal;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--accent);
    padding: 0 16px;
    border-radius: 2px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

.try-nav a:hover { border-color: var(--accent-bright); background: var(--panel-2); }
.try-nav a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

:where(.subpage) main {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    /* Clears the fixed bar, which is 80px at rest. The full-viewport
       hero used to do this job. */
    padding: 132px 60px 140px;
  }

:where(.subpage) h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.08;
    margin: 0 0 22px;
    color: var(--ink);
  }

:where(.subpage) h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    margin: 40px 0 14px;
  }

:where(.subpage) h2:first-of-type { margin-top: 0; }

/* Subheadings within a section. Bare <h3> previously fell through to the
   UA stylesheet on every subpage that used one, which meant a heading in
   the wrong size and the wrong weight beside headings that were styled. */
:where(.subpage) main h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    margin: 30px 0 12px;
  }

:where(.subpage) p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }

:where(.subpage) p strong { color: var(--ink); font-weight: 600; }

/* The opening paragraph of a subpage. Lived inline on twelve pages, where
   it had already drifted: ten carried `margin: 0 0 44px` and two carried
   14px, and nothing was comparing them. Hoisted here so there is one copy.

   `.lede` scores (0,1,0) and `:where(.subpage) p` above scores (0,0,1), so
   this wins on specificity wherever it sits in the file - it does not
   depend on being declared after it. A page that wants a different gap
   overrides it in its own <style>, which is later in the cascade at the
   same specificity; status.html and terms.html do exactly that. */
.lede { font-size: 16.5px; line-height: 1.65; color: var(--muted); margin: 0 0 44px; max-width: 60ch; }

:where(.subpage) ul.plain { margin: 0 0 14px; padding: 0; list-style: none; max-width: 62ch; }

:where(.subpage) ul.plain li {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    padding: 0 0 12px 20px;
    position: relative;
  }

:where(.subpage) ul.plain li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }

:where(.subpage) ul.plain li strong { color: var(--ink); font-weight: 600; }

:where(.subpage) .rule { border: none; border-top: 1px solid var(--line); margin: 40px 0; }

:where(.subpage) .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 32px; }

@media (max-width: 720px) { :where(.subpage) .plan-grid { grid-template-columns: 1fr; } }

:where(.subpage) .plan-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 22px 20px;
    position: relative;
  }

:where(.subpage) .plan-card.featured { border-color: var(--accent); }

:where(.subpage) .plan-badge {
    position: absolute; top: -10px; left: 18px;
    background: var(--accent); color: var(--void);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 20px;
  }

:where(.subpage) .plan-price { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 0 0 12px; }

:where(.subpage) .plan-price span { font-family: var(--font-body); font-weight: 400; font-size: 13.5px; color: var(--muted); }

:where(.subpage) .plan-card ul { list-style: none; margin: 0; padding: 0; }

:where(.subpage) .plan-card ul li { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 0 0 8px 16px; position: relative; }

:where(.subpage) .plan-card ul li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent-bright); font-size: 13px; }

:where(.subpage) .status-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }

:where(.subpage) .status-dot { color: var(--accent-bright); font-size: 12px; }

:where(.subpage) .status-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }

:where(.subpage) .rm-item { margin-bottom: 30px; }

:where(.subpage) .rm-item:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    :where(.subpage) main { padding: 96px 24px 100px; }
    :where(.subpage) h1 { font-size: 32px; }
  }

/* Copyright vests in a person or a company, and Syntur is not yet either
     - so the notice names the party the privacy policy already names, and
     changes to the company at incorporation. Renaming the venture does not
     move the copyright: see docs/at-incorporation.md. "All rights
     reserved" carries no legal weight anywhere since Nicaragua joined
     Berne in 2000; it is here because its absence reads as careless, not
     because it grants anything. */
  .copyright {
    margin: 56px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--muted);
  }

@media (max-width: 640px) { :where(.subpage) .copyright { margin-top: 40px; } }


/* --- Reference tables ------------------------------------------------
   Scoped with :where() like the rest of the subpage shell so these carry
   no more specificity than the bare element rules they sit beside. */
:where(.subpage) .reftable {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 32px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}
:where(.subpage) .reftable th,
:where(.subpage) .reftable td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
:where(.subpage) .reftable thead th {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--muted-2);
}
:where(.subpage) .reftable tbody th { color: var(--ink); font-weight: 500; }
/* The published figure is the point of the table, so it takes full ink.
   It was --accent-bright, which separated value from label by hue; with
   the violet gone that token is cream and would sit a shade ABOVE --ink,
   making the numbers the brightest thing on the page. The separation now
   runs the other way: the row label (tbody th) is --ink at 500, the
   header row is --muted, and the value is plain --ink. */
:where(.subpage) .reftable tbody td { color: var(--ink); }

/* The one place on the site where a warning has to out-shout the design. */
:where(.subpage) .caution {
  border-left: 2px solid var(--accent);
  background: var(--panel);
  padding: 18px 22px;
  margin: 0 0 36px;
  border-radius: 0 4px 4px 0;
}
:where(.subpage) .caution p { margin: 0; font-size: 14px; color: var(--muted); max-width: none; }
:where(.subpage) .caution strong { color: var(--ink); }

:where(.subpage) .ref-card { padding: 0 0 4px; margin: 0 0 28px; }
:where(.subpage) .ref-card h2 { margin: 0 0 8px; }
:where(.subpage) .ref-card h2 a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
:where(.subpage) .ref-card h2 a:hover { border-bottom-color: var(--accent-bright); }

:where(.subpage) .ref-cta,
:where(.subpage) .ref-back {
  color: var(--accent-bright);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
}
:where(.subpage) .ref-back { color: var(--muted); }
:where(.subpage) .ref-cta:hover, :where(.subpage) .ref-back:hover { color: var(--ink); }

@media (max-width: 640px) {
  :where(.subpage) .reftable { font-size: 12.5px; }
  :where(.subpage) .reftable th, :where(.subpage) .reftable td { padding: 10px 10px 10px 0; }
}


/* ---------------------------------------------------------------------
   Links inside running copy.

   These were never styled. With no rule for them the browser's own
   stylesheet won, which paints an unvisited link rgb(0,0,238) - Netscape
   blue - and underlines it. Against --void that measures 2.11:1, and it
   appeared on eleven links across overview, reference and privacy,
   including both contact addresses on the page a cautious reader reads
   most closely.

   Scoped to running copy only (p, li, dd) so the many links that DO carry
   their own class - .ref-cta, .ref-back, .try-label, the footer, the bar -
   are untouched. :where() keeps this at (0,0,1), the same weight the bare
   element rules beside it carry, so a page-level rule still wins.
   --------------------------------------------------------------------- */
:where(.subpage) main p a,
:where(.subpage) main li a,
:where(.subpage) main dd a,
:where(main) .prose a {
  color: var(--accent-text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: color 0.15s ease, border-color 0.15s ease;
}
:where(.subpage) main p a:hover,
:where(.subpage) main li a:hover,
:where(.subpage) main dd a:hover,
:where(main) .prose a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent-bright);
}
:where(.subpage) main p a:focus-visible,
:where(.subpage) main li a:focus-visible,
:where(.subpage) main dd a:focus-visible,
:where(main) .prose a:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}


/* ---------------------------------------------------------------------
   Menu, below 1150px.

   .bar-nav turns off under 1150px because the bar cannot hold eight links,
   the mark and the Try button at that width. What replaced it was the
   footer, which on the home page sits 5,274px down a 5,429px page on a
   390px phone - reachable, but not navigation. Every subpage had no way
   to reach any other subpage until the bottom of the document.

   Same disclosure mechanics as the home page's Try panel, because those
   already work: click to toggle, click outside to close, Escape to close.
   Rows are 44px so the panel is usable with a thumb.
   --------------------------------------------------------------------- */
/* No position: relative. The panel is positioned against .topbar, which is
   already position: fixed and therefore already a containing block, so the
   panel's right edge lines up with the bar's right padding instead of with
   the button - which at 320px put a 210px panel eight pixels off the left
   of the screen. */
.menu-wrap { margin-left: auto; }
@media (min-width: 1150px) { .menu-wrap { display: none; } }

.menu-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.menu-btn:hover { border-color: var(--accent-bright); background: var(--panel-2); }
.menu-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.menu-wrap.open .menu-btn { border-color: var(--accent); }

.menu-panel {
  position: absolute;
  top: 100%;
  right: 60px;
  min-width: 210px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 61;
}
.menu-wrap.open .menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.menu-panel a:hover { color: var(--ink); background: var(--panel-2); }
.menu-panel a[aria-current="page"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.menu-panel a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
/* Matches .topbar's own horizontal padding at each breakpoint, so the panel
   hangs flush under the right edge of the bar rather than under the button. */
@media (max-width: 640px) { .menu-panel { right: 20px; } }
/* Narrow enough that a 210px panel beside a 20px gutter is most of the
   screen anyway - so it takes the whole width and stops being a dropdown
   pretending it has room. */
@media (max-width: 520px) { .menu-panel { left: 20px; right: 20px; min-width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-btn { transition: none; }
}

/* The bar now carries mark + menu + Try below 1150px. Measured at 320px,
   the three together overflow while the wordmark is on screen, so the
   wordmark collapses and the chip carries the corner alone - which is what
   .topbar.is-stuck already does on every width, so it is the bar's own
   idiom rather than a new behaviour. The name is collapsed by max-width and
   opacity, not display or visibility, so it stays in the accessibility tree
   and the link still announces the company. */
@media (max-width: 460px) {
  .brand-mark > .bm-name {
    max-width: 0;
    opacity: 0;
    margin-left: calc(var(--brand-gap) * -1);
  }
  /* With the wordmark collapsed the chip has to carry the corner at rest,
     not only when the bar is stuck - otherwise the masthead is empty on a
     phone until you scroll, which is the mark disappearing rather than
     changing form.

     Same selector, and therefore the same (0,3,0), as the rule it
     overrides, and later in the file. A media query adds no specificity,
     so matching the selector is what makes this win; `.brand-chip` alone
     would have lost silently. Measured at 320, 390 and 460. */
  .topbar:not(.is-stuck) .brand-chip { width: 20px; opacity: 1; margin-right: 0; }
  .topbar { gap: 12px; }
}
@media (max-width: 380px) {
  .topbar:not(.is-stuck) .brand-chip { width: 17px; }
}


/* Buttons on the pricing cards. The grid shipped with three prices and
   nothing to click. */
:where(.subpage) .plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* The filled variant inverts its ink. --accent is Warm Cream now, not a
   dark violet, so the `color: var(--ink)` the base rule sets would be
   cream on cream. --void is the same pairing the approved home page uses
   for its primary control: cream fill, Carbon Black text, one step
   brighter on hover. */
:where(.subpage) .plan-cta.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--void);
}
:where(.subpage) .plan-cta.primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
:where(.subpage) .plan-cta:hover { border-color: var(--accent-bright); }
:where(.subpage) .plan-cta:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }


/* The link that closes every subpage. It shipped five times as an inline
   style attribute - the same four declarations, copy-pasted - and rendered
   as an 18px-tall text link, which is the weakest CTA on the site sitting
   in the position where the ask belongs. */
.page-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  /* --void, not --ink: see .plan-cta.primary above. A cream fill takes
     Carbon Black text. */
  color: var(--void);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.page-cta:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
.page-cta:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* mailto toast
   ---------------------------------------------------------------------
   Confirmation that the address is on the clipboard, shown because the
   mail handler a mailto: link depends on can fail without saying so.
   Bottom-centre so it does not sit under the fixed top bar, and above
   everything because it is transient. */
.mailto-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 8px);
  z-index: 999;
  max-width: min(92vw, 520px);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* Declared after the base rule, not before it: an override that loses on
   source order is the bug this project keeps rediscovering. */
.mailto-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .mailto-toast { transition: none; transform: translate(-50%, 0); }
}