/* ==========================================================================
   breathingexercises.com — Design Foundation
   Complete stylesheet. Everything the site needs is in this one file.
   --------------------------------------------------------------------------
   Stack: GeneratePress Premium + GenerateBlocks Premium
   Surface tint: Soft blue

   WHERE THIS LIVES
   The Site System plugin loads this file directly, which is the recommended
   setup — one file to replace when it changes. It is also valid standalone
   CSS, so it can be pasted into Appearance > Customize > Additional CSS
   instead if you would rather not run the plugin's copy.

   All custom classes are prefixed bx- so nothing collides with GeneratePress
   or GenerateBlocks. Add them via a block's "Additional CSS classes" field.

   COLORS ARE PINNED, NOT INHERITED
   Section 1 sets the palette to literal values. It used to read the
   GeneratePress Global Colors with a hex fallback — but GeneratePress always
   defines --accent, --base and the rest, so the fallback never fired and the
   site quietly used the theme's stock palette. See the note at the end of
   section 1 for how to switch to Global Colors once they are set up.

   CONTENTS
     1  Tokens                    12  Stat strip
     2  Base                      13  List rows
     3  Header and navigation     14  Sidebar rail, TOC, layout shells
     4  Buttons                   15  Byline
     5  Surfaces                  16  Code block
     6  Hero backdrop             17  Search highlight
     7  Labels and badges         18  Affiliate disclosure
     8  Tables                    19  Score meter
     9  Callouts                  20  The breathing timer
    10  FAQ                       21  Responsive
    11  Numbered steps            22  Timer settings, presets, options, facts
                                  23  Page furniture — hero, breadcrumbs, sections
                                  24  Theme adjustments for tool pages
                                  25  The embed page
                                  26  Footer
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   GeneratePress Global Colors already publish --base, --base-2, --base-3,
   --contrast, --contrast-2, --contrast-3, --accent. We alias them to short
   names and add the tokens GP has no slot for.
   ========================================================================== */
:root{
  /* The palette, pinned. Changing a value here changes it everywhere. */
  --bx-bg:      #fbfcfe;   /* page background */
  --bx-raise:   #f6f9fd;   /* raised panels, table headers */
  --bx-sink:    #eff4fa;   /* sunken wells, footer */
  --bx-t1:      #0b1016;   /* headings and primary text */
  --bx-t2:      #54606d;   /* body copy */
  --bx-t3:      #8391a0;   /* meta, captions, muted labels */
  --bx-acc:     #1f5fbf;   /* links, active states, progress */
  --bx-ln:      #e0e8f2;   /* hairline borders */
  --bx-ln2:     #cfdbea;   /* stronger borders */
  --bx-acc-sf:  #e7effb;   /* accent surface */
  --bx-ok:      #0d8a7f;   /* well supported */
  --bx-ok-sf:   #e0f4f1;
  --bx-warn:    #9c6a1a;   /* qualified */
  --bx-warn-sf: #faf2e3;
  --bx-crit:    #ac3838;
  --bx-crit-sf: #fbeded;

  /* not colors — no Customizer equivalent */
  --bx-inv:     #0b1016;          /* primary button surface */
  --bx-inv-t:   #ffffff;
  --bx-inv-h:   #1e2833;
  --bx-code:    #0b1016;
  --bx-mark:    #fbf0cd;

  /* The gap on each side of a section rule. See .bx-tsec. */
  --bx-band:    38px;

  --bx-glow-1:  rgba(31,95,191,.13);
  --bx-glow-2:  rgba(13,138,127,.08);

  --bx-sh-sm:   0 1px 2px rgba(11,16,22,.05);
  --bx-sh-md:   0 4px 14px -6px rgba(11,16,22,.14), 0 1px 2px rgba(11,16,22,.05);
  --bx-sh-lg:   0 30px 60px -28px rgba(11,16,22,.26), 0 2px 6px rgba(11,16,22,.05);

  --bx-r-sm:    7px;
  --bx-r-md:    12px;
  --bx-r-lg:    16px;

  /* Inter first, and actually loaded — see the note below. The system fonts
     behind it are a fallback for the moment before it arrives, not the plan. */
  --bx-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --bx-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   INTER HAS TO BE LOADED, NOT JUST NAMED

   This design is drawn in Inter. The tight negative tracking (-.034em on h1)
   and the font-feature-settings in section 2 are Inter's — cv02, cv03, cv04
   and cv11 are its character variants and do nothing to any other face.

   With Inter merely listed in the stack behind -apple-system, a Mac visitor
   saw SF Pro, a Windows visitor saw Segoe UI and nobody saw the design. The
   Site System plugin loads Inter for you. If you are using this stylesheet
   standalone, uncomment the import below, or self-host and use the @font-face
   block instead — self-hosting is faster and makes no third-party request.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap');

   Self-hosted, once Inter-Variable.woff2 sits next to this file:

@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Variable.woff2') format('woff2-variations');
}
   -------------------------------------------------------------------------- */

/* Optional: drive the palette from Customizer > Colors > Global Colors
   instead of the pinned values above. Worth doing, because it makes the
   GenerateBlocks color pickers show the real palette. Set all sixteen colors
   up first — the slugs have to match exactly — then uncomment this block.
   With the plugin, also add:  add_filter('bx_use_bundled_palette','__return_false');

:root{
  --bx-bg: var(--base-3); --bx-raise: var(--base-2); --bx-sink: var(--base);
  --bx-t1: var(--contrast); --bx-t2: var(--contrast-2); --bx-t3: var(--contrast-3);
  --bx-acc: var(--accent); --bx-ln: var(--border); --bx-ln2: var(--border-strong);
  --bx-acc-sf: var(--accent-soft); --bx-ok: var(--success); --bx-ok-sf: var(--success-soft);
  --bx-warn: var(--warning); --bx-warn-sf: var(--warning-soft);
  --bx-crit: var(--critical); --bx-crit-sf: var(--critical-soft);
}
*/


/* ==========================================================================
   2. BASE
   GeneratePress handles most typography via the Customizer. These are the
   details its controls can't reach.
   ========================================================================== */
body{
  font-family: var(--bx-sans);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography lock -----------------------------------------------------
   Headings are pinned here, not left to the Customizer. GeneratePress writes
   its own font-family, size and weight for h1-h6, and a theme set to Red Hat
   Display will happily override anything inherited from body — which is
   exactly what happened. `html body` beats a bare element selector on
   specificity, so this wins whatever order the two stylesheets load in and
   without a single !important.

   Values are the mockup's, including the clamps. Setting these in the
   Customizer as well is harmless but no longer necessary. */
html body,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .main-title, html body .bx-logo,
html body button, html body input, html body select, html body textarea{
  font-family: var(--bx-sans);
}
html body{ font-size: 15px; line-height: 1.6 }

html body h1, .bx-h1{
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08; letter-spacing: -.034em; font-weight: 620;
}
html body h2, .bx-h2{
  font-size: 24px; line-height: 1.16; letter-spacing: -.028em; font-weight: 620;
}
html body h3, .bx-h3{
  font-size: 17px; line-height: 1.3; letter-spacing: -.020em; font-weight: 620;
}
html body h4, html body h5, html body h6{ letter-spacing: -.014em; font-weight: 620 }

/* The tool hero runs smaller than an article headline — it shares the fold
   with a 344px dial. */
html body .bx-hero__h1{
  font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.032em;
}

/* --- Theme lock ----------------------------------------------------------
   The mockup puts content straight on the page background. GeneratePress
   defaults to a white content card on a tinted body, which is a different
   look before a single component renders. These two rules close that gap;
   remove them if you would rather keep the card. */
html body{ background-color: var(--bx-bg) }
.bx-has-header .site-content,
.bx-has-header .content-area,
.bx-has-header .site-main,
.bx-has-header .inside-article{ background: transparent; box-shadow: none }

/* Prose runs larger than UI chrome, exactly as in the mockups. */
.entry-content{ font-size: 16.5px; line-height: 1.72 }
.entry-content p{ color: var(--bx-t2) }
.entry-content p strong,
.entry-content li strong{ color: var(--bx-t1); font-weight: 620 }
.entry-content li{ color: var(--bx-t2); margin: 7px 0 }
.entry-content > *:last-child{ margin-bottom: 0 }

/* In-prose links: underline that thickens on hover, never a raw blue. */
.entry-content p a:not(.bx-btn),
.entry-content li a:not(.bx-btn){
  color: var(--bx-acc);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--bx-acc) 28%, transparent);
}
.entry-content p a:not(.bx-btn):hover,
.entry-content li a:not(.bx-btn):hover{ border-bottom-color: var(--bx-acc) }

/* Footnote markers */
.entry-content sup a{ font-size: 11.5px; font-weight: 640; padding: 0 1px; border: 0 }

/* Anchor offset so sticky nav never covers a jumped-to heading */
.entry-content h2[id],
.entry-content h3[id],
[id]{ scroll-margin-top: 96px }

hr, .bx-rule{ border: 0; border-top: 1px solid var(--bx-ln); margin: 32px 0 }


/* ==========================================================================
   3. HEADER AND NAVIGATION
   The plugin renders its own header (see "The header" below) and unhooks
   GeneratePress's. These few rules are all that is left for the theme's, in
   case the custom header is switched off with bx_custom_header.
   ========================================================================== */
.main-navigation,
#sticky-navigation{
  background: color-mix(in srgb, var(--bx-bg) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bx-ln);
  box-shadow: none;
}
.main-navigation .main-nav > ul > li > a{
  text-decoration: none; font-size: 13.5px; font-weight: 520;
  color: var(--bx-t2); letter-spacing: -.005em; text-transform: none;
  transition: color .15s;
}
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a{ color: var(--bx-t1) }
.main-navigation .main-nav > ul > li.current-menu-item > a{ font-weight: 620 }
.main-navigation .main-nav ul ul{
  border: 1px solid var(--bx-ln2); border-radius: var(--bx-r-md);
  box-shadow: var(--bx-sh-md); overflow: hidden;
}

/* --- The logo mark ------------------------------------------------------
   A masked SVG rather than a bordered box with an inner pseudo-element,
   because pseudo-elements do not nest — the first attempt at this rendered
   as two separate squares sitting next to each other. Masking also means the
   mark takes its colour from --bx-acc like everything else.

   It hangs off the site title, so there is no theme filter to guess at. Set a
   real logo image in the Customizer and GeneratePress drops .main-title
   entirely, which takes this with it. */
.bx-logo .bx-mark{
  content: "";
  display: inline-block;
  width: 19px; height: 19px;
  margin-right: 9px;
  vertical-align: -3px;
  flex-shrink: 0;
  background-color: var(--bx-acc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019%2019%22%3E%3Crect%20x%3D%22.75%22%20y%3D%22.75%22%20width%3D%2217.5%22%20height%3D%2217.5%22%20rx%3D%224.25%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%224.5%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23000%22%20opacity%3D%22.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2019%2019%22%3E%3Crect%20x%3D%22.75%22%20y%3D%22.75%22%20width%3D%2217.5%22%20height%3D%2217.5%22%20rx%3D%224.25%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%224.5%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23000%22%20opacity%3D%22.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.bx-logo{
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-weight: 640; letter-spacing: -.018em; font-size: 14.5px;
  color: var(--bx-t1); text-decoration: none; white-space: nowrap;
}

/* --- The header ----------------------------------------------------------
   One 56px row: mark and wordmark, menu, two buttons. Sticky, translucent,
   hairline base — the mockup's header, not the theme's with additions. */
.bx-header{
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bx-bg) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bx-ln);
}
.bx-header__inner{
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  height: 56px; display: flex; align-items: center; gap: 28px;
}
.bx-nav__list{
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
}
.bx-nav__list a{
  color: var(--bx-t2); font-size: 13.5px; font-weight: 520;
  text-decoration: none; letter-spacing: -.005em; transition: color .15s;
  text-transform: none;
}
.bx-nav__list a:hover{ color: var(--bx-t1) }
.bx-nav__list .current-menu-item > a,
.bx-nav__list .current_page_item > a{ color: var(--bx-t1); font-weight: 620 }
.bx-nav__list .sub-menu{ display: none } /* one level in the bar; children live on the page */
.bx-header__right{ margin-left: auto; display: flex; align-items: center; gap: 10px }
.bx-navbtn{ padding: 7px 15px; font-size: 13px }

/* GeneratePress's own header, unhooked in PHP. This is the belt to that
   braces — if a child theme puts it back, it still will not double up. */
.bx-has-header .site-header,
.bx-has-header #site-navigation,
.bx-has-header #sticky-navigation,
.bx-has-header .main-navigation{ display: none }

/* --- Mobile ------------------------------------------------------------- */
.bx-navtoggle{
  display: none; margin-left: auto; width: 38px; height: 34px; padding: 0;
  border: 1px solid var(--bx-ln2); border-radius: 8px;
  background: var(--bx-bg); cursor: pointer; position: relative;
}
.bx-navtoggle span,
.bx-navtoggle span::before,
.bx-navtoggle span::after{
  content: ""; position: absolute; left: 50%; width: 16px; height: 1.5px;
  background: var(--bx-t1); transform: translateX(-50%); border-radius: 2px;
}
.bx-navtoggle span{ top: 50%; margin-top: -.75px }
.bx-navtoggle span::before{ top: -5px }
.bx-navtoggle span::after{ top: 5px }
.bx-header__mobile{ display: none }

@media (max-width: 900px){
  .bx-header__inner > .bx-nav,
  .bx-header__right{ display: none }
  .bx-navtoggle{ display: block }
  .bx-header__mobile{
    display: block; padding: 6px 24px 20px;
    border-top: 1px solid var(--bx-ln); background: var(--bx-bg);
  }
  .bx-header__mobile[hidden]{ display: none }
  .bx-header__mobile .bx-nav__list{ display: block }
  .bx-header__mobile .bx-nav__list a{
    display: block; padding: 11px 0; font-size: 15px;
    border-bottom: 1px solid var(--bx-ln);
  }
  .bx-header__mobile .bx-btn{ margin-top: 12px }
  .bx-header__mobile{ box-sizing: border-box }
  html.bx-nav-open{ overflow: hidden }
}


/* ==========================================================================
   4. BUTTONS
   .bx-btn for hand-placed buttons. The GB Button and GP Button classes are
   matched below so both routes land in the same place.
   ========================================================================== */
/* Full base — only for buttons you mark up yourself with .bx-btn */
.bx-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 570;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--bx-r-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* Shared "feel" only — radius, weight, transition. Deliberately does NOT set
   size or padding, so existing GenerateBlocks buttons keep their own spacing
   and nothing you already built shifts. Add .bx-btn--primary / --ghost /
   --accent to a GB button when you want the full treatment. */
.wp-block-button__link,
.gb-button,
.button{
  border-radius: var(--bx-r-sm);
  font-weight: 570;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* When a GB or core button opts in, give it the layout as well */
.wp-block-button__link[class*="bx-btn--"],
.gb-button[class*="bx-btn--"]{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent;
}

/* Primary — near-black, the page's anchor */
.bx-btn--primary,
.gb-button.bx-btn--primary,
.wp-block-button__link.bx-btn--primary{
  background: var(--bx-inv);
  border-color: var(--bx-inv);
  color: var(--bx-inv-t);
  box-shadow: var(--bx-sh-sm);
}
.bx-btn--primary:hover{ background: var(--bx-inv-h); border-color: var(--bx-inv-h); color: #fff }

/* Ghost — the secondary action */
.bx-btn--ghost{
  background: var(--bx-bg);
  border-color: var(--bx-ln2);
  color: var(--bx-t2);
}
.bx-btn--ghost:hover{
  color: var(--bx-t1);
  border-color: var(--bx-t3);
  box-shadow: var(--bx-sh-sm);
}

/* Accent — reserved for commercial CTAs (buy, subscribe) */
.bx-btn--accent{ background: var(--bx-acc); border-color: var(--bx-acc); color: #fff }
.bx-btn--accent:hover{ filter: brightness(1.08); color: #fff }

.bx-btn--lg{ padding: 12px 22px; font-size: 14.5px }
.bx-btn--block{ width: 100%; box-sizing: border-box }

/* Text link with the chevron affordance. Never an arrow — house style. */
.bx-more{
  font-size: 13px;
  font-weight: 590;
  color: var(--bx-acc);
  text-decoration: none;
  border: 0;
}
.bx-more::after{ content: " \203A" }


/* ==========================================================================
   5. SURFACES — cards, cell grids, panels
   ========================================================================== */
.bx-card{
  background: var(--bx-bg);
  border: 1px solid var(--bx-ln2);
  border-radius: var(--bx-r-md);
  padding: 20px;
  box-shadow: var(--bx-sh-sm);
}
.bx-card--sink{ background: var(--bx-sink) }
.bx-card--raise{ background: var(--bx-raise) }
.bx-card--flat{ box-shadow: none; border-color: var(--bx-ln) }

/* Hairline grid: 1px gutters that read as one ruled table, not floating cards.
   Put bx-cellgrid on a GB Grid, bx-cell on each child Container. */
.bx-cellgrid{
  display: grid;
  gap: 1px;
  background: var(--bx-ln);
  border: 1px solid var(--bx-ln);
  border-radius: var(--bx-r-md);
  overflow: hidden;
}
/* A single cell stretched across 1,200px reads as a stripe, not a card. */
.bx-cellgrid--1{ grid-template-columns: minmax(0,1fr); max-width: 560px }
.bx-cellgrid--2{ grid-template-columns: repeat(2, 1fr) }
.bx-cellgrid--3{ grid-template-columns: repeat(3, 1fr) }
.bx-cellgrid--4{ grid-template-columns: repeat(4, 1fr) }
.bx-cell{
  background: var(--bx-bg);
  padding: 24px 22px;
  transition: background .16s;
  display: flex;
  flex-direction: column;
  color: var(--bx-t1);
  text-decoration: none;
}
a.bx-cell:hover{ background: var(--bx-raise) }
.bx-cell h3, .bx-cell .bx-cell__title{
  font-size: 14.5px; font-weight: 620; margin: 0 0 6px; letter-spacing: -.016em;
}
.bx-cell p{ font-size: 13.5px; color: var(--bx-t2); margin: 0; line-height: 1.55 }
.bx-cell__foot{ margin-top: auto; padding-top: 14px; font-size: 11.5px; color: var(--bx-t3) }

/* A cellgrid carries no vertical margin of its own, because on the homepage
   and the hubs it sits inside a band that supplies the spacing. Dropped
   straight into page prose there is no band, so the paragraph after it lands
   flush against the border. The child combinator is what keeps this off the
   banded layouts — their grids are nested inside .bx-wrap, never direct
   children of the content wrapper. */
.entry-content > .bx-cellgrid,
.bx-prose > .bx-cellgrid{ margin: 26px 0 32px }

/* Small square glyph tile used at the top of a cell */
.bx-glyph{
  width: 31px; height: 31px;
  border-radius: 8px;
  border: 1px solid var(--bx-ln2);
  background: var(--bx-raise);
  display: grid; place-items: center;
  color: var(--bx-acc);
  font-size: 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Sunken well — the surface the timer sits on */
.bx-well{
  background: var(--bx-sink);
  position: relative;
  padding: 44px 24px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.bx-well::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 44%, var(--bx-bg), transparent 70%);
}
.bx-well > *{ position: relative; z-index: 1 }


/* ==========================================================================
   6. HERO BACKDROP
   Add bx-glow to a GB Container for the soft wash; add bx-glow--grid for the
   fading 64px grid underneath it.
   ========================================================================== */
.bx-glow{ position: relative; overflow: hidden }

/* The wash is sized in percentages of its own container, not in pixels, and
   reaches full transparency well inside every edge of it.

   The pixel version was 1180px wide and clipped by overflow:hidden the moment
   its container was narrower than that — which is every phone, and any desktop
   layout that gives up width to a sidebar. What you saw was not a glow but a
   rectangle of gradient with hard vertical edges. Percentages cannot produce
   that: the colour is gone 40% of the width and 42% of the height out from the
   centre, so there is always a clear margin before the clip happens — on all
   four sides, not just the left and right. The first attempt only fixed the
   sides: the box still started 300px above the container, which put the
   gradient at full strength on the top edge and drew a hard horizontal line
   across it. Sizing the box to the container and centring the wash inside it
   is what makes the fade land everywhere. */
.bx-glow::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 56% 58% at 50% 46%,
              var(--bx-glow-1), var(--bx-glow-2) 46%, transparent 72%);
  pointer-events: none;
}
.bx-glow--grid::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--bx-ln) 1px, transparent 1px),
    linear-gradient(90deg, var(--bx-ln) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .5;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 72%);
  mask: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 72%);
}
.bx-glow > *{ position: relative; z-index: 1 }


/* ==========================================================================
   7. LABELS AND BADGES
   ========================================================================== */
/* Eyebrow above a heading */
.bx-kicker{
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--bx-acc); font-weight: 660; margin-bottom: 12px; display: block;
}
.bx-kicker--muted{ color: var(--bx-t3) }

/* Small caps column head */
.bx-colhead{
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--bx-t3); font-weight: 660; margin-bottom: 10px; display: block;
}

/* Evidence rating — maps to the Evidence taxonomy terms */
.bx-ev{
  display: inline-block;
  font-size: 10.5px; font-weight: 680; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
.bx-ev--supported,  .bx-ev.well-supported{ color: var(--bx-ok);   background: var(--bx-ok-sf) }
.bx-ev--qualified,  .bx-ev.qualified{     color: var(--bx-warn); background: var(--bx-warn-sf) }
.bx-ev--thin,       .bx-ev.thin-evidence{ color: var(--bx-t3);   background: var(--bx-sink) }

/* Content type badge — used in search results and mixed listings */
.bx-kind{
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; border-radius: 20px; padding: 3px 9px;
}
.bx-kind--tool{    background: var(--bx-acc-sf); color: var(--bx-acc) }
.bx-kind--guide{   background: var(--bx-sink);   color: var(--bx-t2) }
.bx-kind--gear{    background: var(--bx-warn-sf);color: var(--bx-warn) }
.bx-kind--science{ background: var(--bx-ok-sf);  color: var(--bx-ok) }

/* Tool status */
.bx-status{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 680; border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
.bx-status--live{ color: var(--bx-ok); background: var(--bx-ok-sf) }
.bx-status--soon{ color: var(--bx-t3); background: var(--bx-sink) }

/* Editorial pick flag */
.bx-pick{
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; color: var(--bx-ok);
  background: var(--bx-ok-sf); border-radius: 20px; padding: 2px 8px; margin-left: 7px;
}

/* Pill badge with a highlighted lead chip — the "New · thing shipped" bar */
.bx-badge{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--bx-t2);
  background: var(--bx-bg); border: 1px solid var(--bx-ln2);
  border-radius: 20px; padding: 4px 13px 4px 5px;
  box-shadow: var(--bx-sh-sm);
}
.bx-badge > em{
  font-style: normal; background: var(--bx-ok-sf); color: var(--bx-ok);
  border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 660;
}


/* ==========================================================================
   8. TABLES
   Wrap any table in a bx-table div so it scrolls on mobile instead of
   breaking the layout.
   ========================================================================== */
.bx-table{
  border: 1px solid var(--bx-ln);
  border-radius: var(--bx-r-md);
  overflow-x: auto;
  margin: 22px 0 26px;
}
.bx-table table,
.entry-content .bx-table table{
  width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; border: 0;
}
.bx-table th{
  text-align: left;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bx-t3); font-weight: 680;
  padding: 11px 16px;
  background: var(--bx-raise);
  border: 0; border-bottom: 1px solid var(--bx-ln);
  white-space: nowrap;
}
.bx-table td{
  padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--bx-ln);
  color: var(--bx-t2); vertical-align: top; line-height: 1.55;
}
.bx-table tr:last-child td{ border-bottom: 0 }
.bx-table tbody tr:hover{ background: var(--bx-raise) }
.bx-table .bx-td-name{ color: var(--bx-t1); font-weight: 570 }
.bx-table .bx-td-num,
.bx-table th.bx-td-num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
/* Zebra variant for spec sheets */
.bx-table--zebra tbody tr:nth-child(odd){ background: var(--bx-raise) }
.bx-table--zebra tbody tr:hover{ background: var(--bx-sink) }


/* ==========================================================================
   9. CALLOUTS
   ========================================================================== */
.bx-note{
  border-left: 2.5px solid var(--bx-acc);
  background: var(--bx-acc-sf);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.bx-note--warn{ border-left-color: var(--bx-warn); background: var(--bx-warn-sf) }
.bx-note--crit{ border-left-color: var(--bx-crit); background: var(--bx-crit-sf) }
.bx-note__title{
  font-size: 13.5px; font-weight: 660; color: var(--bx-t1);
  letter-spacing: -.01em; margin: 0 0 5px; display: block;
}
.bx-note p{ margin: 0; font-size: 14.5px; color: var(--bx-t2); line-height: 1.64 }
.bx-note p + p{ margin-top: 9px }

/* Key points card — the summary block at the top of a guide */
.bx-takeaway{
  border: 1px solid var(--bx-ln2);
  border-radius: var(--bx-r-md);
  background: var(--bx-raise);
  padding: 24px 26px;
  margin: 0 0 34px;
  box-shadow: var(--bx-sh-sm);
}
.bx-takeaway .bx-colhead{ color: var(--bx-acc); font-weight: 680 }
.bx-takeaway ul{ margin: 0; padding: 0; list-style: none }
.bx-takeaway li{
  position: relative; padding-left: 19px; margin: 0 0 11px;
  font-size: 15px; line-height: 1.62; color: var(--bx-t2);
}
.bx-takeaway li:last-child{ margin-bottom: 0 }
.bx-takeaway li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bx-acc);
}

/* Do / don't pair */
.bx-dd{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--bx-ln); border: 1px solid var(--bx-ln);
  border-radius: var(--bx-r-md); overflow: hidden; margin: 22px 0 24px;
}
.bx-dd__col{ background: var(--bx-bg); padding: 20px 22px 22px }
.bx-dd__col .bx-colhead{ font-size: 11px; letter-spacing: .1em; font-weight: 680 }
.bx-dd__col--yes .bx-colhead{ color: var(--bx-ok) }
.bx-dd__col--no  .bx-colhead{ color: var(--bx-crit) }
.bx-dd ul{ margin: 0; padding: 0; list-style: none }
.bx-dd li{
  position: relative; padding-left: 21px; margin: 0 0 9px;
  font-size: 14.5px; line-height: 1.55; color: var(--bx-t2);
}
.bx-dd li:last-child{ margin: 0 }
.bx-dd__col--yes li::before{
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--bx-ok); font-weight: 700; font-size: 12px;
}
.bx-dd__col--no li::before{
  content: "\2715"; position: absolute; left: 0; top: 1px;
  color: var(--bx-crit); font-weight: 700; font-size: 11px;
}


/* ==========================================================================
   10. FAQ
   Native <details>, so it works without JavaScript and is FAQPage-ready.
   ========================================================================== */
.bx-faq{
  border: 1px solid var(--bx-ln);
  border-radius: var(--bx-r-md);
  overflow: hidden;
  margin: 22px 0;
}
.bx-faq details{ border-bottom: 1px solid var(--bx-ln); margin: 0 }
.bx-faq details:last-child{ border-bottom: 0 }
.bx-faq summary{
  padding: 15px 20px;
  font-size: 15px; font-weight: 570; letter-spacing: -.014em;
  color: var(--bx-t1); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.bx-faq__q{ flex: 1; min-width: 0 }
.bx-faq summary::-webkit-details-marker{ display: none }
.bx-faq summary::after{
  content: "\203A"; color: var(--bx-t3); font-size: 19px; line-height: 1;
  transform: rotate(90deg); transition: transform .18s;
}
.bx-faq details[open] summary::after{ transform: rotate(-90deg) }
.bx-faq summary:hover{ background: var(--bx-raise) }
.bx-faq__a{ padding: 0 20px 17px; font-size: 14.5px; color: var(--bx-t2); line-height: 1.66 }
.bx-faq__a p{ margin: 0 0 12px; font-size: inherit }
.bx-faq__a p:last-child{ margin: 0 }


/* ==========================================================================
   11. NUMBERED STEPS
   ========================================================================== */
.bx-steps{ counter-reset: bxs; margin: 22px 0 28px; padding: 0; list-style: none }
.bx-steps li{
  counter-increment: bxs;
  position: relative;
  padding: 0 0 21px 47px;
  margin: 0;
  border-left: 1px solid var(--bx-ln);
  color: var(--bx-t2);
}
.bx-steps li:last-child{ border-left-color: transparent; padding-bottom: 0 }
.bx-steps li::before{
  content: counter(bxs);
  position: absolute; left: -15px; top: -2px;
  width: 29px; height: 29px; border-radius: 50%;
  background: var(--bx-bg); border: 1px solid var(--bx-ln2);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 660; color: var(--bx-t1);
}
.bx-steps li strong,
.bx-steps li b{
  display: block; color: var(--bx-t1); font-weight: 620;
  font-size: 16.5px; margin-bottom: 4px; letter-spacing: -.016em;
}


/* ==========================================================================
   12. STAT STRIP
   ========================================================================== */
.bx-stats{
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--bx-ln);
  border-radius: var(--bx-r-md);
  overflow: hidden;
  background: var(--bx-bg);
  box-shadow: var(--bx-sh-sm);
}
.bx-stat{ padding: 16px 24px; border-right: 1px solid var(--bx-ln); flex: 1; min-width: 145px }
.bx-stat:last-child{ border-right: 0 }
.bx-stat__v{ font-size: 22px; font-weight: 640; letter-spacing: -.03em; line-height: 1.1; color: var(--bx-t1) }
.bx-stat__k{ font-size: 12.5px; color: var(--bx-t3); margin-top: 3px }


/* ==========================================================================
   13. LIST ROWS
   Compact index rows with a right-aligned meta value.
   ========================================================================== */
.bx-list a{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bx-ln);
  font-size: 14px; color: var(--bx-t2);
  text-decoration: none;
  transition: color .15s, padding-left .15s;
}
.bx-list a:last-child{ border-bottom: 0 }
.bx-list a:hover{ color: var(--bx-acc); padding-left: 4px }
.bx-list em{ font-style: normal; font-size: 11.5px; color: var(--bx-t3); white-space: nowrap }


/* ==========================================================================
   14. SIDEBAR RAIL AND TABLE OF CONTENTS
   Both stick clear of the GP sticky header. If your header is taller than
   56px, raise the two top values below to match.
   ========================================================================== */
.bx-rail{ position: sticky; top: 96px; display: grid; gap: 14px }

.bx-toc{ position: sticky; top: 96px }
.bx-toc a{
  display: block;
  font-size: 13px; color: var(--bx-t2);
  padding: 6px 0 6px 13px;
  border-left: 1.5px solid var(--bx-ln);
  border-bottom: 0;
  text-decoration: none;
  line-height: 1.45;
  transition: color .15s, border-color .15s;
}
.bx-toc a:hover{ color: var(--bx-t1); border-left-color: var(--bx-ln2) }
.bx-toc a.bx-toc--active,
.bx-toc a.is-active{ color: var(--bx-acc); border-left-color: var(--bx-acc); font-weight: 560 }
.bx-toc a.bx-toc--sub{ padding-left: 26px; font-size: 12.5px }


/* ==========================================================================
   14b. PAGE SHELLS
   The TOC + content + rail layouts. Put on a GB Container (or any div); the
   direct children become the columns in order. Collapses rail first, then TOC.
   ========================================================================== */
.bx-shell{
  display: grid;
  gap: 52px;
  align-items: start;
  min-width: 0;
}
/* TOC · content · rail */
.bx-shell--3{ grid-template-columns: 212px minmax(0,1fr) 300px }
/* TOC · content */
.bx-shell--2{ grid-template-columns: 216px minmax(0,1fr); gap: 56px }
/* content · rail */
.bx-shell--rail{ grid-template-columns: minmax(0,1fr) 306px; gap: 44px }
.bx-shell > *{ min-width: 0 }

@media (max-width: 1100px){
  .bx-shell--3{ grid-template-columns: 190px minmax(0,1fr); gap: 40px }
  .bx-shell--3 > .bx-rail{ display: none }
}
@media (max-width: 1024px){
  .bx-shell--rail{ grid-template-columns: minmax(0,1fr); gap: 28px }
}
@media (max-width: 900px){
  .bx-shell--2{ grid-template-columns: minmax(0,1fr); gap: 0 }
  .bx-shell--2 > .bx-toc{ display: none }
}
@media (max-width: 820px){
  .bx-shell--3{ grid-template-columns: minmax(0,1fr); gap: 28px }
  .bx-shell--3 > .bx-toc{ display: none }
}


/* ==========================================================================
   15. BYLINE
   Author and reviewer side by side, dates right-aligned. E-E-A-T above the fold.
   ========================================================================== */
/* nowrap, because wrapping put the avatar on a line of its own the moment the
   text ran long. The line wraps inside its own column instead, which keeps the
   avatar where a reader looks for it. */
/* No rule of its own. The head band already closes with one, and a second
   hairline 60px above it boxed the byline in — two lines that close to each
   other read as a table row rather than a credit. Spacing does the separating
   now, and .bx-ahead's bottom border closes the whole band. */
.bx-byline{
  display: flex; gap: 12px; flex-wrap: nowrap; align-items: center;
  margin-top: 30px;
}
.bx-avatar{
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--bx-ln2);
  background: var(--bx-acc-sf); color: var(--bx-acc);
  overflow: hidden;
}
.bx-avatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50% }

/* One grey line. Every part carries the same weight, so nothing in here is
   bolded and nothing is pushed to the opposite edge — the previous version
   right-aligned the dates and bolded their values, which made two facts of
   equal standing look like a heading and a footnote. */
.bx-byline__line{
  font-size: 13px; color: var(--bx-t3); line-height: 1.6;
}
/* --bx-ln2 is a border colour; at this size it made the separators invisible
   and the line read as three phrases with odd gaps. */
.bx-byline__line i{ font-style: normal; color: var(--bx-t3); margin: 0 5px }


/* ==========================================================================
   16. CODE BLOCK
   For the embed snippets. Dark on light, one accent per token type.
   ========================================================================== */
.bx-code{
  background: var(--bx-code);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: var(--bx-sh-md);
  margin: 22px 0;
}
.bx-code__head{
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: #6b737b; font-weight: 680;
  display: flex; align-items: center; gap: 9px;
}
.bx-code pre{
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--bx-mono); font-size: 12.5px; line-height: 1.75;
  color: #c8cdd2; white-space: pre; background: none; border: 0;
}
.bx-code .t{ color: #7fb2ee }   /* tag */
.bx-code .a{ color: #c99a6b }   /* attribute */
.bx-code .v{ color: #8fd4b8 }   /* value */

kbd, .bx-kbd{
  font-family: var(--bx-mono); font-size: 11px;
  background: var(--bx-bg); border: 1px solid var(--bx-ln2);
  border-radius: 5px; padding: 1px 6px; color: var(--bx-t2);
}


/* ==========================================================================
   17. SEARCH HIGHLIGHT
   ========================================================================== */
mark, .bx-mark{
  background: var(--bx-mark); color: var(--bx-t1);
  border-radius: 3px; padding: 0 2px; font-weight: 560;
}


/* ==========================================================================
   18. AFFILIATE DISCLOSURE
   ========================================================================== */
.bx-disclosure{
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--bx-ln2);
  border-radius: 10px;
  background: var(--bx-raise);
  padding: 13px 16px;
  margin: 0 0 24px;
  max-width: 70ch;
}
.bx-disclosure__icon{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bx-acc-sf); color: var(--bx-acc);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
}
.bx-disclosure p{ margin: 0; font-size: 13px; color: var(--bx-t2); line-height: 1.58 }
.bx-disclosure p strong{ color: var(--bx-t1); font-weight: 620 }


/* ==========================================================================
   19. SCORE METER
   Single hue, always paired with the number — never color alone.
   ========================================================================== */
.bx-scores{ border: 1px solid var(--bx-ln); border-radius: var(--bx-r-md); overflow: hidden; margin: 22px 0 26px }
.bx-score{
  display: grid; grid-template-columns: 170px minmax(0,1fr) 46px;
  gap: 16px; align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--bx-ln);
}
.bx-score:last-child{ border-bottom: 0 }
.bx-score:nth-child(odd){ background: var(--bx-raise) }
.bx-score__name{ font-size: 14px; font-weight: 560; color: var(--bx-t1) }
.bx-meter{
  height: 8px; border-radius: 5px;
  background: var(--bx-sink);
  border: 1px solid var(--bx-ln);
  overflow: hidden;
}
.bx-meter > span{ display: block; height: 100%; border-radius: 5px; background: var(--bx-acc) }
.bx-score__val{
  font-size: 14px; font-weight: 640; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--bx-t1);
}


/* ==========================================================================
   20. THE BOX BREATHING TIMER
   Styles only — inert until the [box_timer] shortcode lands in step 2.
   Canonical rules: rounded square, one side per phase, no CSS transition on
   the progress stroke (JS repaints it every frame).
   ========================================================================== */
.bx-box{
  --bxd: 344px;
  width: var(--bxd); height: var(--bxd);
  position: relative; display: grid; place-items: center;
  flex-shrink: 0; margin-inline: auto;
}
.bx-box--md{ --bxd: 276px }
.bx-box--sm{ --bxd: 232px }
.bx-box--xs{ --bxd: 128px }

.bx-box svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.bx-box__track{ fill: none; stroke: var(--bx-ln2); stroke-width: 3; stroke-linejoin: round }
.bx-box__arc{
  fill: none; stroke: var(--bx-acc); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.bx-box__pip{ fill: var(--bx-bg); stroke: var(--bx-ln2); stroke-width: 2 }
.bx-box__head{ fill: var(--bx-acc); stroke: var(--bx-bg); stroke-width: 3; opacity: 0; transition: opacity .2s }
.bx-box.is-live .bx-box__head{ opacity: 1 }

.bx-box__orb{
  position: absolute; width: 62%; height: 62%;
  border-radius: 15%;
  background: var(--bx-acc-sf);
  border: 1px solid color-mix(in srgb, var(--bx-acc) 20%, transparent);
  box-shadow: 0 10px 34px -14px color-mix(in srgb, var(--bx-acc) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.7);
  transform: scale(.56);
  transform-origin: center;
  will-change: transform;
}

.bx-box__readout{ position: relative; z-index: 3; text-align: center; display: grid; place-items: center }
.bx-box__phase{
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 9px;
  font-size: max(9.5px, calc(var(--bxd) * .0334));
  letter-spacing: .21em; text-transform: uppercase;
  color: var(--bx-t2); font-weight: 700; white-space: nowrap;
}
.bx-box__count{
  font-size: calc(var(--bxd) * .232);
  font-weight: 580; letter-spacing: -.05em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--bx-t1);
}
.bx-box--noreadout .bx-box__readout{ display: none }

/* Side labels sit outside their own edge and light up when active */
.bx-box__side{
  position: absolute;
  font-size: max(9px, calc(var(--bxd) * .029));
  letter-spacing: .19em; text-transform: uppercase;
  font-weight: 700; color: var(--bx-t3);
  white-space: nowrap; transition: color .25s ease;
}
.bx-box__side.is-active{ color: var(--bx-acc) }
.bx-box__side--0{ top: -2px; left: 50%; transform: translate(-50%, -100%) }
.bx-box__side--2{ bottom: -2px; left: 50%; transform: translate(-50%, 100%) }
.bx-box__side--1{ right: -12px; top: 50%; transform: translate(100%, -50%) rotate(90deg); transform-origin: left center }
.bx-box__side--3{ left: -12px; top: 50%; transform: translate(-100%, -50%) rotate(-90deg); transform-origin: right center }

/* Cycle progress dots */
.bx-cycles{ display: flex; gap: 7px; align-items: center; justify-content: center }
.bx-cycles i{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bx-ln2); display: block;
  transition: background .25s ease, box-shadow .25s ease;
}
.bx-cycles i.is-done{ background: var(--bx-acc) }
.bx-cycles i.is-now{
  background: var(--bx-acc);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--bx-acc) 18%, transparent);
}
.bx-cycles span{ font-size: 12px; color: var(--bx-t3); margin-left: 9px; font-variant-numeric: tabular-nums }

/* Player chrome around the timer */
.bx-player{
  border: 1px solid var(--bx-ln2);
  border-radius: var(--bx-r-lg);
  background: var(--bx-bg);
  box-shadow: var(--bx-sh-lg);
  overflow: hidden;
}
.bx-player__head{
  padding: 11px 18px;
  border-bottom: 1px solid var(--bx-ln);
  background: var(--bx-raise);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 650;
}
.bx-player__state{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 680;
  border-radius: 20px; padding: 3px 10px;
  background: var(--bx-sink); color: var(--bx-t3);
}
.bx-player__state.is-running{ background: var(--bx-ok-sf); color: var(--bx-ok) }
.bx-player__meta{ margin-left: auto; font-size: 12px; color: var(--bx-t3); font-variant-numeric: tabular-nums; font-weight: 400 }
.bx-player__controls{
  padding: 20px 24px;
  display: flex; gap: 9px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.bx-player__foot{
  border-top: 1px solid var(--bx-ln);
  background: var(--bx-raise);
  padding: 11px 18px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--bx-t3);
}
.bx-player__foot a{ margin-left: auto; color: var(--bx-acc); font-weight: 590; text-decoration: none }

@media (prefers-reduced-motion: reduce){
  .bx-box__orb{ transition: none !important }
}


/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .bx-cellgrid--4{ grid-template-columns: repeat(2, 1fr) }
  .bx-rail{ position: static }
  .bx-toc{ position: static }
}
@media (max-width: 768px){
  .bx-cellgrid--2,
  .bx-cellgrid--3,
  .bx-cellgrid--4,
  .bx-dd{ grid-template-columns: 1fr }
  .bx-box,
  .bx-box--md,
  .bx-box--sm{ --bxd: min(232px, 78vw) }
  .bx-dates{ margin-left: 0; text-align: left; width: 100% }
  .bx-score{ grid-template-columns: 120px minmax(0,1fr) 40px; gap: 12px }
  .entry-content{ font-size: 16px }
}

/* Print: drop decorative layers, keep the words */
@media print{
  .bx-glow::before, .bx-glow--grid::after, .bx-box, .bx-player{ display: none !important }
  .bx-note, .bx-takeaway, .bx-card{ border: 1px solid #999; background: none }
}


/* ==========================================================================
   22. TIMER SETTINGS, SUMMARY AND FACTS
   The pattern steppers, the live summary row and the facts list. Previously
   printed inline by the timer snippet.
   ========================================================================== */
.bx-setting{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--bx-ln)}
.bx-setting:last-of-type{border-bottom:0}
.bx-setting__label{font-size:13.5px;color:var(--bx-t2);flex:1}
.bx-stepper{display:flex;align-items:center;gap:2px;border:1px solid var(--bx-ln2);
  border-radius:8px;overflow:hidden;background:var(--bx-bg)}
.bx-stepper button{width:28px;height:30px;border:0;background:transparent;color:var(--bx-t2);
  cursor:pointer;font-size:15px;font-family:inherit;line-height:1;transition:background .13s,color .13s}
.bx-stepper button:hover{background:var(--bx-sink);color:var(--bx-t1)}
.bx-stepper button:focus-visible{outline:2px solid var(--bx-acc);outline-offset:-2px}
.bx-stepper__val{min-width:34px;text-align:center;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--bx-t1)}
.bx-summary{margin-top:14px;padding-top:13px;border-top:1px solid var(--bx-ln);display:flex;
  justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--bx-t3)}
.bx-summary b{color:var(--bx-t1);font-weight:620;font-variant-numeric:tabular-nums}
.bx-facts{border:1px solid var(--bx-ln);border-radius:var(--bx-r-md);overflow:hidden}
.bx-fact{display:flex;justify-content:space-between;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--bx-ln);font-size:14px}
.bx-fact:last-child{border-bottom:0}
.bx-fact:nth-child(odd){background:var(--bx-raise)}
.bx-fact span{color:var(--bx-t3)}
.bx-fact b{color:var(--bx-t1);font-weight:570;text-align:right;font-variant-numeric:tabular-nums}
.bx-timer:focus-visible{outline:2px solid var(--bx-acc);outline-offset:4px;border-radius:var(--bx-r-lg)}
/* A phase set to zero seconds never runs. On a circle it has no arc at all,
   so the label goes rather than sitting there dimmed. */
.bx-box__side.is-off{opacity:.3}
.bx-box--circle .bx-box__side.is-off{display:none}
/* Circle labels are placed by JS at the midpoint of each arc, so the
   stylesheet's four fixed positions have to get out of the way. */
.bx-box--circle .bx-box__side{right:auto;bottom:auto;transform-origin:center}
.bx-box--circle .bx-box__orb{border-radius:50%}
/* The well's breathing room is tuned for the full dial. Small embeds need less. */
.bx-well--sm{padding:26px 18px 20px;gap:16px}
.bx-well--xs{padding:12px;gap:8px;background:transparent}
.bx-well--xs::before{display:none}


/* --- Presets and option toggles ------------------------------------------ */
.bx-presets{ display: grid; grid-template-columns: 1fr 1fr; gap: 7px }
.bx-preset{
  font: inherit; font-size: 13px; font-weight: 570;
  padding: 9px 6px; border-radius: 9px; cursor: pointer; text-align: center;
  border: 1px solid var(--bx-ln2); background: var(--bx-bg); color: var(--bx-t2);
  transition: background .15s, border-color .15s, color .15s;
  font-variant-numeric: tabular-nums;
}
.bx-preset:hover{ border-color: var(--bx-t3); color: var(--bx-t1) }
.bx-preset:focus-visible{ outline: 2px solid var(--bx-acc); outline-offset: 2px }
.bx-preset small{
  display: block; font-size: 10.5px; font-weight: 500;
  opacity: .72; margin-top: 2px; letter-spacing: .01em;
}
.bx-preset[aria-pressed="true"]{
  background: var(--bx-inv); border-color: var(--bx-inv); color: var(--bx-inv-t);
}

/* Switch, not a checkbox — it takes effect immediately, there is nothing to submit */
.bx-tog{
  width: 40px; height: 23px; border-radius: 20px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--bx-ln2); background: var(--bx-sink);
  position: relative; cursor: pointer; transition: background .16s, border-color .16s;
}
.bx-tog::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--bx-bg); box-shadow: var(--bx-sh-sm); transition: left .16s;
}
.bx-tog[aria-pressed="true"]{ background: var(--bx-acc); border-color: var(--bx-acc) }
.bx-tog[aria-pressed="true"]::after{ left: 20px }
.bx-tog:focus-visible{ outline: 2px solid var(--bx-acc); outline-offset: 2px }

/* In the rail the options card is a narrow stack, one switch per row — the
   same shape as the Pattern card above it. Outside a rail there is width to
   spare, so it becomes a single row of three. */
.bx-card--options .bx-setting:last-of-type{ border-bottom: 0 }
@media (min-width: 720px){
  .bx-timer:not(.bx-shell--rail) .bx-card--options{
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 26px;
  }
  .bx-timer:not(.bx-shell--rail) .bx-card--options .bx-colhead{ grid-column: 1 / -1 }
  .bx-timer:not(.bx-shell--rail) .bx-card--options .bx-setting{ border-bottom: 0; padding: 4px 0 }
}

/* Countdown numbers off: keep the phase word, drop the digits */
.bx-box--nonum .bx-box__count{ display: none }
.bx-box--nonum .bx-box__phase{ position: static; transform: none; margin: 0 }

/* Dim the page while a session runs. Everything except the timer itself
   steps back, so there is nothing to look at but the dot. */
html.bx-dimmed body > *:not(:has(.bx-timer)){ opacity: .32; transition: opacity .5s ease }
html.bx-dimmed .bx-timer{ position: relative; z-index: 2 }
@media (prefers-reduced-motion: reduce){
  html.bx-dimmed body > *:not(:has(.bx-timer)){ transition: none }
}


/* ==========================================================================
   23. PAGE FURNITURE
   Hero, breadcrumbs, section heads, the embed band and its copy button.
   Previously printed inline by the template snippet.
   ========================================================================== */
	/* Enough room under the sticky header that the rail's own sticky offset
	   never pushes it below the breadcrumb it should line up with. */
	/* The Start button has to be on screen when the page loads — a timer you
	   have to scroll to find is a timer nobody presses. Everything above it is
	   tightened, and the dial itself gives way on a short window rather than
	   pushing the controls under the fold. */
	.bx-hero{padding:24px 0 var(--bx-band)}
	.bx-hero .bx-well{padding:26px 20px 18px;gap:18px}
	.bx-hero .bx-box{--bxd:clamp(200px, calc(100vh - 470px), 320px)}
	.bx-hero .bx-lede{margin-bottom:14px}
	.bx-hero .bx-hero__h1{margin-bottom:10px}
	/* On a short window the copy above the instrument gives way too. */
	@media (max-height: 800px){
		/* Only the top tightens on a short window. The bottom is the band
		   shared with .bx-tsec, and it sits below the fold anyway. */
		.bx-hero{padding:16px 0 var(--bx-band)}
		.bx-hero .bx-lede{font-size:16px;margin-bottom:10px}
		.bx-hero .bx-well{padding:18px 16px 14px;gap:14px}
		.bx-hero .bx-timer__before{margin-bottom:16px}
	}
	/* The heading block lives at the top of the player column, so the rail
	   starts level with the breadcrumb rather than below the title. */
	/* The hero rail is three short cards beside a tall player, and its sticky
	   offset was measuring from the container rather than the viewport — which
	   pushed it below the breadcrumb it is meant to line up with. Stickiness
	   earns its place in the article rail, not here. */
	.bx-hero .bx-rail{position:static}
	.bx-timer__before{margin-bottom:22px}
	/* The caution, sitting under the player in the hero's left column. */
	.bx-timer__after{margin-top:18px}
	.bx-timer__after > *{margin:0}
	.bx-timer__before .bx-crumb{margin-bottom:14px}
	.bx-timer__before .bx-lede{margin-bottom:0}
	.bx-timer__before .bx-hero__tags{margin-bottom:0;margin-top:16px}
/* Sections space themselves, so the shortcodes can be dropped straight into
   a hook without anyone setting container padding by hand. */
/* The band between a tool's sections. One number, used on both sides of the
   rule, so the space above the hairline and the space below it cannot drift
   apart — which is what happened when the hero's bottom padding and the
   section's top padding were set independently. */
.bx-tsec{padding:var(--bx-band) 0;border-top:1px solid var(--bx-ln)}
.bx-tsec--tight{padding:26px 0 0;border-top:0}
.bx-tsec > :last-child{margin-bottom:0}
.bx-hero__h1{margin:0 0 12px}
.bx-lede{font-size:18px;color:var(--bx-t2);max-width:62ch;margin:0 0 18px}
.bx-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  color:var(--bx-t3);margin-bottom:14px}
.bx-crumb a{color:var(--bx-t3);text-decoration:none}
.bx-crumb a:hover{color:var(--bx-acc)}
.bx-crumb i{font-style:normal;color:var(--bx-ln2)}
.bx-crumb span[aria-current]{color:var(--bx-t2)}
.bx-hero__tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 26px}
.bx-hero__rate{font-size:12.5px;color:var(--bx-t3);font-variant-numeric:tabular-nums}
.bx-tag{font-size:12px;color:var(--bx-t2);background:var(--bx-raise);border:1px solid var(--bx-ln);
  border-radius:20px;padding:3px 11px;text-decoration:none;transition:border-color .13s,color .13s}
.bx-tag:hover{border-color:var(--bx-ln2);color:var(--bx-t1)}
.bx-shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:0 0 26px}
.bx-shead h2,.bx-shead h3{margin:0}
.bx-shead__sub{margin:5px 0 0;font-size:14px;color:var(--bx-t3);max-width:50ch}
.bx-empty{color:var(--bx-t3);font-size:14.5px;padding:18px 0;max-width:70ch}
.bx-table .bx-status{margin-left:8px;vertical-align:1px}
.bx-cell__rate{color:var(--bx-t2);font-weight:600;margin-left:10px;
  padding-left:10px;border-left:1px solid var(--bx-ln)}
.bx-hero__rate b{color:var(--bx-t2);font-weight:600}
.bx-steps--tight li{padding-bottom:12px;font-size:14px}
.bx-steps--tight li:last-child{padding-bottom:0}
.bx-embedband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;
  align-items:center}
.bx-embedband .bx-code{margin:0}
/* The snippet is meant to be copied, not read as one long line. */
.bx-embedband .bx-code pre{white-space:pre-wrap;word-break:break-word}
.bx-ticks{list-style:none;padding:0;margin:0 0 22px}
.bx-ticks li{position:relative;padding-left:22px;margin:8px 0;font-size:14px;color:var(--bx-t2)}
.bx-ticks li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--bx-ok)}
.bx-copy{margin-left:auto;background:rgba(255,255,255,.08);border:0;color:#c8cdd2;
  font-family:inherit;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:680;border-radius:5px;padding:3px 9px;cursor:pointer;transition:background .13s}
.bx-copy:hover{background:rgba(255,255,255,.16);color:#fff}
.bx-copy.is-done{background:var(--bx-ok);color:#fff}
@media(max-width:860px){
  .bx-embedband{grid-template-columns:1fr;gap:26px}
  .bx-lede{font-size:16.5px}
}


/* ==========================================================================
   24. THEME ADJUSTMENTS FOR TOOL PAGES
   Tool pages carry their own vertical rhythm, so GeneratePress entry padding
   would double up on the hero.
   ========================================================================== */
/* Tool pages carry their own rhythm, so the theme's entry padding would
   double up on the hero — the mockup starts the breadcrumb just under the
   nav, not a hundred pixels below it. */
.bx-tool-page .entry-content{margin-top:0}
.bx-tool-page .site-content,
.bx-tool-page .content-area,
.bx-tool-page .site-main{ padding-top: 0; margin-top: 0 }
.bx-tool-page .entry-header{ display: none }
/* GeneratePress's "separate containers" layout pads the article and margins
   the main area. Both sit between the header and the breadcrumb, which is why
   the gap under the header stayed stubborn after zeroing .site-content. */
.bx-tool-page .inside-article{ padding-top: 0 }
.bx-tool-page.separate-containers .site-main{ margin-top: 0 }
.bx-tool-page.separate-containers .inside-article{ padding-top: 0 }
.bx-tool-page .entry-content > :first-child{ margin-top: 0 }
.bx-tool-page .bx-hero{ margin-top: 0 }
.bx-tool-page .entry-content > .bx-tsec:first-child{border-top:0}
.bx-tool-page .bx-entry{max-width:74ch}
/* The theme's separator above the content competes with the hero. */
.bx-tool-page .entry-header{margin-bottom:0}


/* ==========================================================================
   25. THE EMBED PAGE
   /bx-embed/{tool}/ — the timer alone in an iframe. It loads this same
   stylesheet through wp_head, so its handful of rules belong here too.
   ========================================================================== */
body.bx-embed-page{ margin: 0; background: var(--bx-bg); padding: 14px }
.bx-embed-page .bx-embed-wrap{ max-width: 420px; margin: 0 auto }
.bx-embed-page .bx-embed-credit{
  display: block; text-align: center; margin-top: 10px; font-size: 11.5px;
}
.bx-embed-page .bx-embed-credit a{ color: var(--bx-t3); text-decoration: none }
.bx-embed-page .bx-embed-credit a:hover{ color: var(--bx-acc) }


/* ==========================================================================
   26. FOOTER
   Five columns, four of which build themselves from published content.
   ========================================================================== */
.bx-footer{
  border-top: 1px solid var(--bx-ln);
  background: var(--bx-sink);
  padding: 52px 0 38px;
  margin-top: 64px;
}
.bx-footer__inner{ max-width: 1200px; margin: 0 auto; padding: 0 24px }
.bx-footer__cols{
  display: grid; grid-template-columns: 1.6fr repeat(4, minmax(0,1fr)); gap: 30px;
}
.bx-footer__head{
  font-size: 12px; font-weight: 660; color: var(--bx-t1); margin-bottom: 13px;
}
.bx-footer a{ display: block; font-size: 13px; color: var(--bx-t2);
  margin-bottom: 8px; text-decoration: none; transition: color .15s }
.bx-footer a:hover{ color: var(--bx-t1) }
.bx-footer__brand .bx-logo{ margin-bottom: 12px }
.bx-footer__blurb{
  color: var(--bx-t2); font-size: 13px; max-width: 30ch; margin: 0; line-height: 1.6;
}
.bx-footer__bot{
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bx-ln);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--bx-t3);
}
@media (max-width: 860px){
  .bx-footer__cols{ grid-template-columns: 1fr 1fr; gap: 26px }
  .bx-footer__brand{ grid-column: 1 / -1 }
}
@media (max-width: 520px){
  .bx-footer__cols{ grid-template-columns: 1fr }
}

/* GeneratePress's footer bar is unhooked in PHP. This is the backstop: our
   footer renders before .site-footer, so it is a sibling and unaffected. */
.bx-has-footer .site-footer,
.bx-has-footer .footer-widgets{ display: none }

/* The embed iframe has no footer and needs no top margin from one. */
.bx-embed-page .bx-footer{ display: none }


/* --------------------------------------------------------------------------
   AUTOMATIC INTERNAL LINKING

   Plugins that auto-link key phrases inside the_content (Link Whisper,
   Internal Link Juicer and friends) do not know the difference between prose
   and interface. On the homepage the timer sits inside the_content, so the
   card's own title — "4-7-8 Breathing" — was being rewritten into a blue
   underlined link to the guide. On the tool page it is rendered outside
   the_content, which is why only one of the two was affected.

   Rather than fight whichever plugin it is, chrome refuses link styling. A
   link there still works; it just stops looking like body copy.
   -------------------------------------------------------------------------- */
.bx-player__head a,
.bx-player__state a,
.bx-player__meta a,
.bx-frame__it a,
.bx-frame__h a,
.bx-cell__foot a,
.bx-colhead a,
.bx-kicker a,
.bx-status a,
.bx-faq summary a,
.bx-res__h a,
.bx-jump__h a,
.bx-cite a{
  color: inherit; text-decoration: none; border-bottom: 0; font-weight: inherit;
}


/* ==========================================================================
   27. HOMEPAGE
   Full-bleed bands with a 1200px column inside each, which is how the mockup
   is drawn: the hairline between sections runs edge to edge, the content does
   not. The bleed is done by widening the theme's containers on this page
   only — not with 100vw, which overflows by the width of a scrollbar.
   ========================================================================== */
.bx-wrap{ max-width: 1200px; margin: 0 auto; padding: 0 24px }

.bx-home-page .entry-header{ display: none }
.bx-home-page .entry-content{ margin-top: 0 }
.bx-home-page .entry-content > :first-child{ margin-top: 0 }
.bx-home-page .site-content,
.bx-home-page .content-area,
.bx-home-page .site-main{ padding: 0; margin: 0 }
.bx-home-page .inside-article{ padding: 0; border-radius: 0 }
.bx-home-page.separate-containers .site-main{ margin: 0 }
.bx-home-page.separate-containers .inside-article{ padding: 0 }
/* The theme's content column is capped; the bands are not. Their own
   .bx-wrap puts the copy back on the same 1200px measure. GeneratePress puts
   .grid-container on a different element depending on the container layout,
   so this uncaps whichever one is carrying it — the header and footer here
   are the plugin's own and use neither class. */
.bx-home-page .grid-container,
.bx-home-page .container{ max-width: none; padding-left: 0; padding-right: 0 }
.bx-home-page .site-content{ display: block }
.bx-home > :last-child{ margin-bottom: 0 }

/* --- Hero ---------------------------------------------------------------- */
.bx-home-hero{ padding: 96px 0 76px; border-bottom: 1px solid var(--bx-ln) }
.bx-home-hero__h1{
  font-size: clamp(38px, 5.3vw, 60px); line-height: 1.05; letter-spacing: -.036em;
  font-weight: 620; margin: 0 0 20px; max-width: 15ch;
}
html body .bx-home-hero__h1{ font-size: clamp(38px, 5.3vw, 60px); line-height: 1.05 }
.bx-home-hero__h1 em{ font-style: normal; color: var(--bx-t3) }
.bx-home-hero__sub{
  font-size: 18px; color: var(--bx-t2); max-width: 52ch; line-height: 1.55; margin: 0 0 30px;
}
.bx-home-hero__cta{ display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 13px }
.bx-home-hero__micro{ font-size: 12.5px; color: var(--bx-t3); margin: 0 }
.bx-badge{ margin-bottom: 26px }
a.bx-badge--link{ text-decoration: none; transition: border-color .15s }
a.bx-badge--link:hover{ border-color: var(--bx-t3); color: var(--bx-t1) }

/* --- The product frame --------------------------------------------------- */
.bx-frame{
  margin-top: 62px; border: 1px solid var(--bx-ln2); border-radius: 13px;
  background: var(--bx-bg); overflow: hidden; box-shadow: var(--bx-sh-lg);
}
.bx-frame__bar{
  height: 37px; border-bottom: 1px solid var(--bx-ln); display: flex; align-items: center;
  padding: 0 13px; gap: 7px; background: var(--bx-raise); overflow: hidden;
}
.bx-frame__dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--bx-ln2); flex-shrink: 0 }
.bx-frame__url{
  margin-left: 12px; font-size: 11.5px; color: var(--bx-t3); font-family: var(--bx-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
/* One column unless there is a sidebar to put in the other one. */
.bx-frame__body{ display: grid; grid-template-columns: minmax(0,1fr); min-height: 380px }
.bx-frame__body--split{ grid-template-columns: 200px minmax(0,1fr) }
.bx-frame__side{ border-right: 1px solid var(--bx-ln); padding: 16px 12px; background: var(--bx-raise) }
.bx-frame__h{
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--bx-t3);
  padding: 0 8px; margin: 15px 0 7px; font-weight: 660;
}
.bx-frame__h:first-child{ margin-top: 0 }
.bx-frame__it{
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 6px; font-size: 13px; color: var(--bx-t2);
}
.bx-frame__pip{ width: 5px; height: 5px; border-radius: 50%; background: var(--bx-ln2); flex-shrink: 0 }
.bx-frame__it.is-on{ background: var(--bx-bg); color: var(--bx-t1); font-weight: 540; box-shadow: var(--bx-sh-sm) }
.bx-frame__it.is-on .bx-frame__pip{ background: var(--bx-acc) }
.bx-frame__main{
  padding: 30px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
/* Inside the frame the timer is the only thing on the surface, so it drops
   the card border it wears when it sits in a page — and it drops the parts
   that only make sense on the tool page itself. A homepage window onto the
   product should be about as tall as it is wide. */
.bx-frame__main .bx-timer{ margin: 0 auto; max-width: 540px }
.bx-frame__main .bx-player{ border: 0; box-shadow: none; background: transparent }
.bx-frame__main .bx-player__head{ padding: 0 0 12px }
.bx-frame__main .bx-well{ padding: 20px 16px 14px; gap: 16px; border-radius: var(--bx-r-md) }
.bx-frame__main .bx-player__foot{ display: none }
/* The preset card becomes one row of chips — the same control, less furniture. */
.bx-frame__main .bx-card{ border: 0; background: transparent; box-shadow: none; padding: 0; margin-top: 14px }
.bx-frame__main .bx-card .bx-colhead{ display: none }
.bx-frame__main .bx-presets{ display: flex; flex-wrap: wrap; justify-content: center; gap: 7px }
.bx-frame__main .bx-preset{ padding: 5px 12px; font-size: 12.5px; border-radius: 7px }
.bx-frame__main .bx-preset small{ display: none }

/* --- Evidence band ------------------------------------------------------- */
.bx-strip{ border-bottom: 1px solid var(--bx-ln); padding: 28px 0; background: var(--bx-sink) }
.bx-strip .bx-wrap{
  display: flex; align-items: center; gap: 12px 36px; flex-wrap: wrap; justify-content: center;
}
.bx-strip__lb{
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-t3);
  font-weight: 660; width: 100%; text-align: center; margin-bottom: 2px;
}
.bx-strip__note{
  width: 100%; text-align: center; font-size: 12.5px; color: var(--bx-t3); margin-top: 4px;
}
/* Named sources, as the mockup draws them: plain type, no chip. */
.bx-cite{ font-size: 14px; color: var(--bx-t3); font-weight: 570; letter-spacing: -.012em }
/* The thin-evidence chip's surface is the same colour as this band, so on the
   strip it gets a page-coloured chip instead of vanishing. */
.bx-strip .bx-ev--thin{ background: var(--bx-bg); border: 1px solid var(--bx-ln2) }
a.bx-ev{ text-decoration: none; transition: filter .15s }
a.bx-ev:hover{ filter: brightness(.94) }

/* --- Sections ------------------------------------------------------------ */
.bx-hsec{ padding: 60px 0; border-bottom: 1px solid var(--bx-ln) }
.bx-shead__more{
  font-size: 13px; font-weight: 590; color: var(--bx-acc); text-decoration: none; white-space: nowrap;
}
.bx-shead__more:hover{ text-decoration: underline }
/* The mockup's card foot is one muted line — no rule above it, no pill.
   "Live" is the only coloured word on the card. */
.bx-cell__foot{ letter-spacing: .03em; font-weight: 540 }
.bx-cell__foot .is-live{ color: var(--bx-ok) }
.bx-cell__foot .bx-cell__rate{
  color: var(--bx-t3); font-weight: 540; border-left: 0; padding-left: 0; margin-left: 0;
  font-variant-numeric: tabular-nums;
}

/* --- Library two-up ------------------------------------------------------ */
.bx-two{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bx-ln);
  border: 1px solid var(--bx-ln); border-radius: var(--bx-r-md); overflow: hidden;
}
.bx-two--one{ grid-template-columns: 1fr }
.bx-two__col{ background: var(--bx-bg); padding: 26px 24px }
.bx-two__more{
  display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 570;
  color: var(--bx-acc); text-decoration: none;
}
.bx-two__more:hover{ text-decoration: underline }

/* --- Quote --------------------------------------------------------------- */
.bx-quote{ padding: 78px 0; background: var(--bx-sink); border-bottom: 1px solid var(--bx-ln) }
.bx-quote blockquote{
  margin: 0; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.4; letter-spacing: -.026em;
  font-weight: 480; max-width: 26ch; color: var(--bx-t1);
}
.bx-quote__att{ margin-top: 22px; font-size: 13.5px; color: var(--bx-t2) }

/* --- Closing call to action ---------------------------------------------- */
.bx-final{ padding: 96px 0; text-align: center; border-bottom: 1px solid var(--bx-ln) }
.bx-final h2{ margin: 0 0 14px }
html body .bx-final h2{ font-size: clamp(27px, 3.3vw, 36px); line-height: 1.14 }
.bx-final p{ color: var(--bx-t2); max-width: 46ch; margin: 0 auto 28px; font-size: 16.5px }

@media (max-width: 1000px){
  .bx-frame__body--split{ grid-template-columns: minmax(0,1fr) }
  .bx-frame__side{ display: none }
}
@media (max-width: 820px){
  .bx-home-hero{ padding: 52px 0 48px }
  .bx-home-hero__sub{ font-size: 16.5px }
  .bx-two{ grid-template-columns: 1fr }
  .bx-hsec{ padding: 44px 0 }
  .bx-quote, .bx-final{ padding: 56px 0 }
  .bx-frame{ margin-top: 40px }
}

/* The cell that squares off the tool grid — a real destination, styled a
   half-step back so it does not compete with the timers. */
.bx-cell--more{ background: var(--bx-raise) }
.bx-cell--more .bx-glyph{ font-size: 19px; line-height: 1 }


/* ==========================================================================
   28. THE ARTICLE
   Head, reading progress, prose measure, the mid-article timer card,
   references, the author card and Read Next.
   ========================================================================== */
.bx-article-page .entry-header{ display: none }
.bx-article-page .entry-content{ margin-top: 0 }
.bx-article-page .entry-content > :first-child{ margin-top: 0 }
.bx-article-page .site-content,
.bx-article-page .content-area,
.bx-article-page .site-main{ padding-top: 0; margin-top: 0 }
.bx-article-page .inside-article{ padding-top: 0 }
.bx-article-page.separate-containers .site-main{ margin-top: 0 }
.bx-article-page.separate-containers .inside-article{ padding-top: 0 }

/* --- Reading progress ---------------------------------------------------- */
.bx-prog{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--bx-acc); z-index: 60; transition: width .08s linear;
}

/* --- Head ---------------------------------------------------------------- */
.bx-ahead{ padding: 40px 0 34px; border-bottom: 1px solid var(--bx-ln) }
.bx-ahead__h1{
  font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.034em;
  font-weight: 620; margin: 0 0 16px; max-width: 20ch;
}
html body .bx-ahead__h1{ font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08 }
.bx-dek{ font-size: 18px; color: var(--bx-t2); max-width: 63ch; line-height: 1.55; margin: 0 0 26px }
.bx-ahead .bx-byline{ margin-top: 0 }

/* --- Prose --------------------------------------------------------------- */
.bx-shell--3{ padding: 44px 0 0 }
.bx-prose{ max-width: 74ch }
.bx-prose > h2{ margin-top: 44px }
.bx-prose > h3{ margin-top: 32px }
.bx-prose > :first-child{ margin-top: 0 }
/* An anchor jumped to from the contents must clear the sticky header. */
.bx-prose h2[id], .bx-prose h3[id]{ scroll-margin-top: 88px }
.bx-toc__list{ display: block }

/* --- The timer, mid-article ---------------------------------------------- */
.bx-embedcard{
  border: 1px solid var(--bx-ln2); border-radius: 13px; overflow: hidden;
  background: var(--bx-bg); box-shadow: var(--bx-sh-lg); margin: 34px 0;
}
.bx-embedcard__head{
  padding: 12px 18px; border-bottom: 1px solid var(--bx-ln); background: var(--bx-raise);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bx-embedcard__t{ font-size: 12.5px; font-weight: 640 }
.bx-embedcard__rt{ margin-left: auto; font-size: 12px; color: var(--bx-t3) }
.bx-embedcard .bx-timer{ padding: 22px 18px }
.bx-embedcard__foot{
  border-top: 1px solid var(--bx-ln); padding: 12px 18px; background: var(--bx-raise);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--bx-t3);
}
.bx-embedcard__foot a{ color: var(--bx-acc); font-weight: 560; margin-left: auto; text-decoration: none }
.bx-embedcard__foot a:hover{ text-decoration: underline }

/* --- Evidence table ------------------------------------------------------ */
.bx-table--claims td:first-child{ white-space: normal; width: 34% }
.bx-table--claims td:nth-child(2){ white-space: nowrap }

/* --- References ---------------------------------------------------------- */
.bx-refs{ margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--bx-ln) }
.bx-refs ol{ padding-left: 20px; margin: 0 }
.bx-refs li{ font-size: 13.5px; color: var(--bx-t3); line-height: 1.6; margin: 0 0 9px }
.bx-refs li i{ font-style: italic }
.bx-prose sup a{ text-decoration: none; color: var(--bx-acc); font-weight: 600; padding: 0 1px }

/* --- Author card --------------------------------------------------------- */
.bx-authcard{
  margin-top: 40px; border: 1px solid var(--bx-ln); border-radius: var(--bx-r-md);
  background: var(--bx-raise); padding: 24px 26px;
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}
/* --- The closing call to action ------------------------------------------
   Sits at the foot of a guide, before the references. The rail's timer is
   above the fold and scrolls away; by the time someone has read to the end
   they need the link again. */
.bx-endcta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin: 38px 0 8px;
}
.bx-endcta p{ font-size: 13.5px; color: var(--bx-t2); margin: 0; max-width: 52ch }
.bx-endcta .bx-colhead{ margin-bottom: 5px }
.bx-endcta .bx-btn{ flex-shrink: 0 }

.bx-authcard .bx-avatar{ width: 52px; height: 52px; font-size: 15px }
.bx-authcard__text{ flex: 1; min-width: 220px }
.bx-authcard__text strong{
  font-size: 15px; font-weight: 620; letter-spacing: -.014em; display: block; margin-bottom: 2px;
}
.bx-authcard__role{ font-size: 12.5px; color: var(--bx-t3); margin-bottom: 9px }
.bx-authcard p{ font-size: 14px; color: var(--bx-t2); margin: 0; line-height: 1.6 }
.bx-authcard__check{
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--bx-ln);
  font-size: 12.5px; color: var(--bx-t3);
}
/* The card's name is a block heading; the checker's name inside this line is
   not, and inheriting that turned one sentence into three lines. */
.bx-authcard__check strong{
  display: inline; margin: 0; font-size: inherit; letter-spacing: 0;
  color: var(--bx-t2); font-weight: 620;
}

/* --- The rail's mini timer ----------------------------------------------- */
.bx-minibox{ display: grid; place-items: center; gap: 12px; padding: 4px 0 12px }
.bx-minibox__more{ display: block; text-align: center; font-size: 12.5px }
.bx-minibox__lbl{
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bx-t2); font-weight: 650;
}
.bx-minibox .bx-timer{ margin: 0 }
.bx-minibox .bx-well{ background: transparent; padding: 0; gap: 10px }
.bx-minibox .bx-well::before{ display: none }

/* --- Read next ----------------------------------------------------------- */
.bx-nextsec{ padding: 52px 0 0; border-top: 1px solid var(--bx-ln); margin-top: 56px }
.bx-nextsec .bx-cell h3{ font-size: 15px }
.bx-nextsec .bx-cell .bx-colhead{ margin-bottom: 10px }
.bx-nextsec .bx-cell__foot{ color: var(--bx-acc); font-weight: 600 }

@media (max-width: 820px){
  .bx-ahead{ padding: 28px 0 26px }
  .bx-dek{ font-size: 16.5px }
  .bx-shell--3{ padding: 28px 0 0 }
  .bx-prose{ max-width: none }
}


/* ==========================================================================
   29. HUB PAGES
   Head with a stat row, sticky filter chips, the Start Here feature, the
   "which one" cards and the A–Z index.
   ========================================================================== */
.bx-hub-page .entry-header{ display: none }
.bx-hub-page .entry-content{ margin-top: 0 }
.bx-hub-page .entry-content > :first-child{ margin-top: 0 }
.bx-hub-page .site-content,
.bx-hub-page .content-area,
.bx-hub-page .site-main{ padding-top: 0; margin-top: 0 }
.bx-hub-page .inside-article{ padding-top: 0 }
.bx-hub-page.separate-containers .site-main{ margin-top: 0 }
.bx-hub-page.separate-containers .inside-article{ padding-top: 0 }

/* --- Head ---------------------------------------------------------------- */
.bx-hhead{ padding: 40px 0 0 }
.bx-hhead__h1{
  font-size: clamp(34px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.036em;
  font-weight: 620; margin: 0 0 16px; max-width: 18ch;
}
html body .bx-hhead__h1{ font-size: clamp(34px, 4.4vw, 50px); line-height: 1.06 }
.bx-hdek{ font-size: 18px; color: var(--bx-t2); max-width: 60ch; line-height: 1.55; margin: 0 0 30px }
.bx-hhead .bx-stats{ margin-bottom: 38px }

/* --- Filter chips -------------------------------------------------------- */
.bx-chipbar{
  border-top: 1px solid var(--bx-ln); border-bottom: 1px solid var(--bx-ln);
  background: var(--bx-raise); position: sticky; top: 56px; z-index: 25;
}
.bx-chipbar__inner{
  max-width: 1200px; margin: 0 auto; padding: 11px 24px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.bx-chip{
  font: inherit; font-size: 13px; font-weight: 550; padding: 6px 13px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--bx-t2);
  transition: background .15s, color .15s, border-color .15s;
}
.bx-chip:hover{ color: var(--bx-t1); background: var(--bx-bg) }
.bx-chip[aria-pressed="true"]{
  background: var(--bx-bg); color: var(--bx-t1); border-color: var(--bx-ln2);
  box-shadow: var(--bx-sh-sm); font-weight: 600;
}
.bx-chip:focus-visible{ outline: 2px solid var(--bx-acc); outline-offset: 2px }
.bx-chipbar__count{
  margin-left: auto; font-size: 12.5px; color: var(--bx-t3); font-variant-numeric: tabular-nums;
}

/* --- Start Here ---------------------------------------------------------- */
.bx-feat{
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 1px; background: var(--bx-ln);
  border: 1px solid var(--bx-ln); border-radius: 13px; overflow: hidden; box-shadow: var(--bx-sh-md);
}
.bx-feat--solo{ grid-template-columns: minmax(0,1fr) }
.bx-feat__big{
  background: var(--bx-bg); padding: 32px;
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 32px; align-items: center;
}
.bx-feat__timer .bx-timer{ margin: 0 }
.bx-feat__timer .bx-well{ background: transparent; padding: 0; gap: 12px }
.bx-feat__timer .bx-well::before{ display: none }
.bx-feat__big h3{ font-size: 24px; font-weight: 630; margin: 0 0 9px; letter-spacing: -.026em; line-height: 1.16 }
.bx-feat__big p{ font-size: 15px; color: var(--bx-t2); margin: 0 0 18px; line-height: 1.6 }
.bx-feat__row{ display: flex; gap: 9px; flex-wrap: wrap }
.bx-feat__k{
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--bx-ok); font-weight: 680; margin-bottom: 8px;
}
.bx-feat__side{ background: var(--bx-bg); display: flex; flex-direction: column }
.bx-feat__side a{
  padding: 22px 26px; border-bottom: 1px solid var(--bx-ln); flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  transition: background .16s; color: var(--bx-t1); text-decoration: none;
}
.bx-feat__side a:last-child{ border-bottom: 0 }
.bx-feat__side a:hover{ background: var(--bx-raise) }
.bx-feat__side h3{ font-size: 16px; font-weight: 620; margin: 0 0 5px; letter-spacing: -.018em }
.bx-feat__side p{ font-size: 13.5px; color: var(--bx-t2); margin: 0; line-height: 1.5 }

/* --- Which one should I use? ---------------------------------------------
   The three cards rarely carry the same number of picks, so the picks are
   pushed to the bottom of the card. Their stacks then line up along one edge
   and the ragged whitespace lands above them, in the copy, where nobody
   reads it as a mistake. */
.bx-choose .bx-cell{ padding: 28px 26px }
.bx-choose__q{ font-size: 16px; font-weight: 620; letter-spacing: -.018em; margin-bottom: 10px }
.bx-choose p{ font-size: 13.5px; color: var(--bx-t2); margin: 0; line-height: 1.58 }
/* The space above the picks is padding on the picks, not margin on the copy:
   in the card that happens to be exactly full, margin-top:auto resolves to
   zero and a margin there would be the first thing to disappear. */
.bx-choose__picks{ margin-top: auto; padding-top: 26px; display: grid; gap: 10px }
.bx-choose__pick{
  display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  border: 1px solid var(--bx-ln2); border-radius: 9px; background: var(--bx-raise);
  transition: background .15s, border-color .15s, box-shadow .15s;
  text-decoration: none;
}
.bx-choose__pick:hover{ background: var(--bx-bg); border-color: var(--bx-t3); box-shadow: var(--bx-sh-sm) }
.bx-choose__nm{ font-size: 13.5px; font-weight: 590; color: var(--bx-t1) }
.bx-choose__ar{ margin-left: auto; color: var(--bx-acc); font-size: 16px; line-height: 1 }

/* A section head dropped straight after a banded section lands on that
   section's bottom rule. Give it the same air the bands give themselves. */
.bx-hsec + .bx-shead,
.bx-strip + .bx-shead,
.bx-hsec + .bx-table,
.bx-hsec + .bx-cellgrid{ margin-top: 60px }
.bx-shead + .bx-table{ margin-bottom: 8px }

/* --- A to Z -------------------------------------------------------------- */
.bx-az{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 32px }
.bx-az a{
  display: flex; justify-content: space-between; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--bx-ln); font-size: 13.5px; color: var(--bx-t2);
  text-decoration: none; transition: color .15s, padding-left .15s;
}
.bx-az a:hover{ color: var(--bx-acc); padding-left: 4px }
.bx-az em{ font-style: normal; font-size: 11px; color: var(--bx-ok); white-space: nowrap }

@media (max-width: 1000px){
  .bx-feat{ grid-template-columns: minmax(0,1fr) }
  .bx-feat__big{ grid-template-columns: minmax(0,1fr); justify-items: start; gap: 24px }
  .bx-az{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 760px){
  .bx-az{ grid-template-columns: minmax(0,1fr) }
  .bx-chipbar{ position: static }
  .bx-hhead{ padding: 26px 0 0 }
  .bx-hdek{ font-size: 16.5px }
}

/* --- The archive, as a hub ------------------------------------------------ */
.bx-archive-hub .bx-archive-hub__body{ padding-bottom: 8px }
.bx-archive-hub .site-content,
.bx-archive-hub .content-area,
.bx-archive-hub .site-main{ padding: 0; margin: 0 }
.bx-archive-hub .page-header,
.bx-archive-hub .taxonomy-description{ display: none }


/* ==========================================================================
   30. THE ABOUT PAGE

   Same shell as every other template: a full-width head, then a two-column
   body with the contents list beside the prose. The only reason this section
   exists at all is that a Page is the one route where the theme still wants
   to open its blog sidebar, so a few of its wrappers have to be unwound.
   ========================================================================== */
.bx-ahead--about .bx-stats{ margin-top: 30px }
.bx-ahead--about{ padding-bottom: 30px }

.bx-shell--about{ padding: 44px 0 0 }
.bx-shell--about .bx-prose > h2:first-of-type{ margin-top: 0 }

/* The contents list ships hidden and the script un-hides it once it has found
   three headings to put in it. A hidden element is display:none, so without
   this the prose would be auto-placed into the 216px rail track — both before
   the script runs, and permanently on any page too short to earn a list. */
.bx-shell--about > .bx-prose{ grid-column: 2 }
.bx-shell--about:has(> [data-bx-toc][hidden]){ grid-template-columns: minmax(0,1fr) }
.bx-shell--about:has(> [data-bx-toc][hidden]) > .bx-prose{ grid-column: 1 }

/* The theme prints its own top padding above the content on a Page. On the
   About page that opened a band of empty space between the header and the
   breadcrumbs, and the head's wash began in the middle of it — so the gap and
   the "weird gradient" were the same fault seen twice. .inside-article is the
   one that actually carries the padding when GeneratePress is set to separate
   containers, which is why zeroing the outer wrappers alone did nothing. */
.bx-about-page .site-content,
.bx-about-page .content-area,
.bx-about-page .site-main,
.bx-about-page .inside-article,
.bx-about-page .site-main > article > .inside-article{ padding-top: 0 }
.bx-about-page .entry-header{ display: none }
.bx-ahead--about{ padding-top: 26px }

@media (max-width: 900px){
  .bx-shell--about{ padding-top: 28px }
  .bx-ahead--about .bx-stats{ margin-top: 22px }
}


/* ==========================================================================
   31. SEARCH AND 404

   The two pages a visitor reaches when something went wrong. They share the
   search form and the head band, so they share a section.
   ========================================================================== */

.bx-find__body{ padding-bottom: 80px }
.bx-ahead--find,
.bx-ahead--404{ padding: 40px 0 32px }

/* --- The form ------------------------------------------------------------ */
.bx-findform{ display: flex; gap: 10px; align-items: stretch; max-width: 560px; margin: 22px 0 12px }
.bx-findform__field{
  position: relative; flex: 1;
  display: flex; align-items: center;
  background: var(--bx-bg);
  border: 1px solid var(--bx-ln2);
  border-radius: var(--bx-r-sm, 10px);
  box-shadow: var(--bx-sh-sm);
  transition: border-color .15s, box-shadow .15s;
}
.bx-findform__field:focus-within{ border-color: var(--bx-acc) }
.bx-findform__icon{ display: flex; align-items: center; padding: 0 2px 0 12px; color: var(--bx-t3) }
.bx-findform input[type="search"]{
  font: inherit; font-size: 14.5px; color: var(--bx-t1);
  border: 0; background: transparent; outline: 0; box-shadow: none;
  padding: 11px 13px 11px 8px; width: 100%; min-width: 0;
}
.bx-findform input[type="search"]::placeholder{ color: var(--bx-t3) }
.bx-findform .bx-btn{ flex-shrink: 0 }

/* --- Results head -------------------------------------------------------- */
.bx-findsum{ font-size: 14px; color: var(--bx-t2); margin: 8px 0 0 }
.bx-ahead--find .bx-ahead__h1 mark{ padding: 0 6px }

.bx-tabs{ display: flex; flex-wrap: wrap; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--bx-ln) }
.bx-tab{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; margin-bottom: -1px;
  font-size: 13.5px; font-weight: 550; color: var(--bx-t2);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.bx-tab:hover{ color: var(--bx-t1) }
.bx-tab.is-on{ color: var(--bx-t1); font-weight: 640; border-bottom-color: var(--bx-t1) }
.bx-tab span{ font-size: 11.5px; color: var(--bx-t3); font-variant-numeric: tabular-nums }
.bx-tab.is-on span{ color: var(--bx-t2) }

.bx-findbody{ padding-top: 34px }

/* --- The tool jump ------------------------------------------------------- */
.bx-jump{
  border: 1px solid var(--bx-acc); background: var(--bx-acc-sf);
  border-radius: var(--bx-r-md); padding: 18px 20px; margin-bottom: 22px;
}
.bx-jump__row{ display: flex; align-items: center; justify-content: space-between; gap: 20px }
.bx-jump__h{ font-size: 17px; font-weight: 640; letter-spacing: -.02em; margin: 4px 0 5px }
.bx-jump p{ font-size: 13.5px; color: var(--bx-t2); margin: 0; max-width: 62ch }
.bx-jump .bx-btn{ flex-shrink: 0 }

/* --- Result rows --------------------------------------------------------- */
.bx-reslist{ border-top: 1px solid var(--bx-ln) }
.bx-res{
  display: block; padding: 20px 0; border-bottom: 1px solid var(--bx-ln);
  text-decoration: none; color: var(--bx-t1);
}
.bx-res:hover .bx-res__h{ color: var(--bx-acc) }
.bx-res__top{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.bx-res__path{
  font-family: var(--bx-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px; color: var(--bx-t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bx-res__h{ font-size: 17px; font-weight: 620; letter-spacing: -.022em; margin: 0 0 6px; transition: color .15s }
.bx-res__x{ font-size: 14px; color: var(--bx-t2); line-height: 1.55; margin: 0; max-width: 74ch }
.bx-res__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px;
  font-size: 11.5px; color: var(--bx-t3) }
.bx-res__score{ font-weight: 660; color: var(--bx-t2) }

/* --- The rail ------------------------------------------------------------ */
.bx-railcard{ padding: 16px 17px }
.bx-railcard p{ font-size: 13px; color: var(--bx-t2); line-height: 1.55; margin: 0 0 10px }
.bx-railchips{ display: flex; flex-wrap: wrap; gap: 7px }
.bx-railchip{
  font-size: 12.5px; color: var(--bx-t2); text-decoration: none;
  background: var(--bx-sink); border: 1px solid var(--bx-ln);
  border-radius: 20px; padding: 4px 11px; transition: color .15s, border-color .15s;
}
.bx-railchip:hover{ color: var(--bx-t1); border-color: var(--bx-ln2) }

/* --- Nothing matched ----------------------------------------------------- */
.bx-empty{ padding: 8px 0 30px; max-width: 62ch }
.bx-empty h2{ font-size: 22px; letter-spacing: -.026em; margin: 0 0 10px }
.bx-empty p{ font-size: 15px; color: var(--bx-t2); line-height: 1.6; margin: 0 }

/* --- 404 ----------------------------------------------------------------- */
/* The head band clips its own glow with overflow:hidden, and the timer card
   sits flush against that clip — so the card's shadow was being sliced off
   down its right edge. Widening the band by the shadow's reach and pulling it
   back with a matching negative margin gives the shadow room to land without
   moving anything the reader can see. */
.bx-ahead--404{ padding-left: 18px; padding-right: 18px; margin-left: -18px; margin-right: -18px }

.bx-404head{ display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start }
.bx-404head .bx-dek{ margin-bottom: 4px }
.bx-404links{ font-size: 12.5px; color: var(--bx-t3); margin: 4px 0 0 }
.bx-404links a{ font-weight: 560 }
.bx-404timer{ padding: 14px }
.bx-404timer .bx-more{ margin-top: 10px; display: inline-block }

.bx-404foot{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; margin-top: 44px }
.bx-404foot .bx-card{ padding: 20px 22px }
.bx-404foot p{ font-size: 13.5px; color: var(--bx-t2); line-height: 1.6; margin: 0 0 14px }
.bx-404foot .bx-list{ margin-top: 4px }

@media (max-width: 900px){
  .bx-404head{ grid-template-columns: minmax(0,1fr); gap: 28px }
  .bx-404foot{ grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 32px }
  .bx-jump__row{ flex-direction: column; align-items: flex-start; gap: 14px }
  .bx-findbody{ padding-top: 26px }
}
@media (max-width: 600px){
  /* The field shrinks; the button does not need its own row to fit. */
  .bx-res__path{ display: none }
  .bx-findform{ gap: 8px }
  .bx-findform .bx-btn{ padding-left: 14px; padding-right: 14px }
}


/* ==========================================================================
   32. HEADER SEARCH

   Visible, not hidden behind an icon: a search someone has to discover is a
   search nobody uses. It is kept short and it drops the submit button, because
   a full-size field plus a button in a 56px row alongside five menu items and
   a call to action is a squeeze at every width. Enter submits, which is what
   anyone typing in a header search box does anyway.
   ========================================================================== */
/* Shrinks with the row instead of stepping at a breakpoint: flex-basis is the
   width it wants, min-width the width below which it stops being a usable
   field. Between those two it just gets narrower as the menu grows. */
.bx-header__right{ min-width: 0 }
.bx-findform--header{ margin: 0; flex: 0 1 210px; min-width: 130px; max-width: 210px }
.bx-findform--header .bx-findform__field{ border-radius: 9px }
.bx-findform--header input[type="search"]{ font-size: 13.5px; padding: 7px 11px 7px 6px }
.bx-findform--header .bx-findform__icon{ padding-left: 10px }
.bx-findform--header .bx-findform__icon svg{ width: 14px; height: 14px }

.bx-findform--mobile{ margin: 0 0 14px; max-width: none }

/* Below this the five-item menu and the button need the whole row, and a field
   narrower than its own placeholder is not a feature. The menu panel picks it
   up again at 900. */
@media (max-width: 940px){
  .bx-findform--header{ display: none }
}