/* ===========================================================================
   support.text-em-all.com  --  custom stylesheet
   Rewritten 2026-08-17 to the current brand, per
   data/tea/brand-visual-guide-2026.pdf (authoritative; it overrules
   text-em-all.com/style-guide-2026 where they disagree).

   Deploy: HubSpot File Manager -> cx-site/support-site.css
   (Help Scout's head stub links it; see support_site/README.md.)

   WHAT THIS REPLACED, and why each change:

   - --color-primary / --color-secondary were #17305A, a navy that appears
     nowhere in the brand guide. It is legacy Call-Em-All. Now DEEP RIVER
     #003242, which is what the live marketing site uses.
   - --color-background was #FFFAF2 (cream). Now white.
   - --color-gray #898989 and --color-gray-light #8894A9 were not brand
     neutrals. Now STONE #5D7584 and FOG #CAD7DE.
   - Poppy was doing nav hover, collection-heading hover, sign-in hover and
     footer links. The guide reserves Poppy for "CTA buttons, emphasis in
     images", so it is now ONLY the search button. Interactive colour is
     BLUEBERRY #03819E, which the guide names for links.
   - Category cards were translucent-white-on-cream with a 50px blur shadow
     and percentage widths + float. Now solid white, one Fog hairline, CSS
     grid, and a Blueberry-ink hover border.
   - The category icon font (.category i) and the JS-injected icon spans are
     hidden: the icons were pre-rebrand CAL_Icon_* art carrying no information.
   - Decorative motifs (.bg-fill1/2/3 and the hand-drawn H1 underline
     #docsSearch img) are hidden.
   - Team photos: the .team-frame rotate(45deg) mask and float layout are
     replaced with a round photo that cross-fades to a second shot on hover.
   - Most Popular Articles (.articleList) is numbered by a CSS counter, since
     Help Scout exposes no view counts.

   STILL SET IN HELP SCOUT'S ADMIN, not here: Docs > Design injects an inline
   <style> with body background #FFFAF2, text #17305A and accent #FF4A29. It
   loads BEFORE this file, so these rules win on equal specificity and the page
   is correct either way -- but the tidy fix is to update those three values in
   Help Scout's theme settings to #FFFFFF / #003242 / #FF4A29 so the two stop
   disagreeing. Nothing here depends on that.
   =========================================================================== */

/* ---------- brand faces ---------- */
@font-face {
  font-display: swap;
  font-family: Feijoa-Display;
  src: url(https://www.text-em-all.com/hubfs/Fonts%20-%20CLEAN%20X%20TEXT-EM-ALL/Feijoa-Display.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: Circular-Bold;
  src: url(https://www.text-em-all.com/hubfs/Fonts%20-%20CLEAN%20X%20TEXT-EM-ALL/Circular-Bold.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: Circular-Book;
  src: url(https://www.text-em-all.com/hubfs/Fonts%20-%20CLEAN%20X%20TEXT-EM-ALL/Circular-Book.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: Feijoa-Medium-Italic;
  src: url(https://www.text-em-all.com/hubfs/Fonts%20-%20CLEAN%20X%20TEXT-EM-ALL/Feijoa-MediumItalic.woff) format("woff");
}
/* Register Circular-Bold as the 700 weight of Circular-Book so <strong>/<b>
   actually render bold. Merged in from the old Help Scout head <style> block. */
@font-face {
  font-display: swap;
  font-family: Circular-Book;
  font-weight: 700;
  src: url(https://www.text-em-all.com/hubfs/Fonts%20-%20CLEAN%20X%20TEXT-EM-ALL/Circular-Bold.woff) format("woff");
}

:root {
  /* Primary palette */
  --poppy: #ff4a29;            /* CTA buttons only, per the guide */
  --poppy-ink: #e33f20;        /* CTA hover */
  --deep-river: #003242;
  --steady-stream: #9adbe3;
  --steady-wash: #eaf7fa;      /* Steady Stream lightened, for tinted panels */
  --terracotta: #fab06e;

  /* Secondary palette */
  --blueberry: #03819e;        /* links */
  --blueberry-ink: #026379;    /* link hover + card hover border */
  --sunlight: #ffd084;
  --pink-salt: #ffd5cc;

  /* Neutral palette (use sparingly) */
  --stone: #5d7584;            /* secondary text */
  --fog: #cad7de;              /* borders, inactive */
  --cloud: #e8eff2;            /* soft fills */
  --white: #fff;
  --tint: #f6fafb;             /* section wash */

  /* Legacy aliases, repointed. Kept so any rule or inline style still
     referencing them resolves to a correct colour. */
  --color-primary: var(--deep-river);
  --color-secondary: var(--deep-river);
  --color-accent: var(--poppy);
  --color-background: var(--white);
  --color-white: var(--white);
  --color-gray: var(--stone);
  --color-gray-light: var(--fog);

  --font-display: "Feijoa-Display", Georgia, serif;
  --font-heading: "Circular-Bold", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Circular-Book", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-quote: "Feijoa-Medium-Italic", Georgia, serif;

  --base-font-size: 17px;      /* style guide: body copy is 17px */
  --line-height-tight: 1.14;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  --spacing-xs: 0.875rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.25rem;

  --radius: 8px;               /* style guide: always 8px */
  --sec-pad: 50px;             /* style guide: 50px / 25px / 0 only */
}

/* ---------- base ---------- */
body {
  --text-size-80: clamp(0.625rem, 0.55rem + 0.2vw, 0.75rem);
  --text-size-90: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-size-100: clamp(0.875rem, 0.85rem + 0.3vw, 1.0625rem);
  --text-size-200: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  --text-size-300: clamp(1.25rem, 1.15rem + 0.6vw, 1.625rem);
  --text-size-400: clamp(1.5rem, 1.35rem + 0.9vw, 2rem);
  --text-size-500: clamp(1.75rem, 1.5rem + 1.4vw, 2.5rem);
  --text-size-600: clamp(2rem, 1.7rem + 1.8vw, 3.125rem);
  --text-size-700: clamp(2.25rem, 1.9rem + 2.2vw, 3.75rem);
  background: var(--white);
  color: var(--deep-river);
  font-family: var(--font-body);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
  padding-top: 0;
}
@media (min-width: 1280px) and (max-width: 1600px) {
  body {
    --text-size-80: 0.7rem;  --text-size-90: 0.825rem; --text-size-100: 1rem;
    --text-size-200: 1.25rem; --text-size-300: 1.5rem; --text-size-400: 1.75rem;
    --text-size-500: 2.125rem; --text-size-600: 2.5rem; --text-size-700: 2.875rem;
  }
  .h1, .h2, h1, h2 { margin-bottom: var(--spacing-xs); margin-top: var(--spacing-lg); }
  .h3, .h4, .h5, .h6, h3, h4, h5, h6 { margin-bottom: var(--spacing-xs); margin-top: var(--spacing-xs); }
}

/* Links: Blueberry, with a colour-shift hover and no underline-on-hover. */
a { color: var(--blueberry); font-weight: 400; }
a:hover, a:focus { color: var(--blueberry-ink); }
:focus-visible { outline: 2px solid var(--blueberry); outline-offset: 3px; }

/* ---------- typography ---------- */
.h1, .h2, h1, h2 {
  font-family: var(--font-display);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
  margin-top: var(--spacing-xl);
  text-wrap: balance;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: var(--deep-river) !important;
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
}
.h3, .h4, .h5, .h6, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-normal);
  margin-top: var(--spacing-sm);
}
.h1, h1 { font-size: var(--text-size-700); }
.h2, h2 { font-size: var(--text-size-600); }
.h3, h3 { font-size: var(--text-size-300); }
.h4, h4 { font-size: var(--text-size-200); }
.h5, h5 { font-size: var(--text-size-100); }
.h6, h6 {
  font-size: var(--text-size-90);
  letter-spacing: 1px;          /* guide: +5.25% tracking on all caps */
  text-transform: uppercase;
  color: var(--stone) !important;
}
p { font-family: var(--font-body); margin-bottom: var(--spacing-sm); margin-top: var(--spacing-sm); }
small, tiny { font-size: var(--text-size-90); }
strong { font-weight: 700; }
#fullArticle strong { color: var(--deep-river); }
.nowrap { white-space: nowrap; }
.text-size-80 { font-size: var(--text-size-80); }
.text-size-90 { font-size: var(--text-size-90); }
.text-size-100 { font-size: var(--text-size-100); }
.text-size-200 { font-size: var(--text-size-200); }
.text-size-300 { font-size: var(--text-size-300); }
.text-size-400 { font-size: var(--text-size-400); }
.text-size-500 { font-size: var(--text-size-500); }
.text-size-600 { font-size: var(--text-size-600); }
.text-size-700 { font-size: var(--text-size-700); }

.container-fluid { max-width: 1280px; }

/* ---------- header ---------- */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--fog);
  position: fixed;
  width: 100%;
  z-index: 100;
}
.navbar .caret { display: none !important; }
.navbar .navbar-inner {
  background: transparent;
  box-shadow: none;
  padding-top: 12px;
  padding-bottom: 12px;
}
.navbar .brand {
  font-size: 0; margin-left: 12px; opacity: 1; padding: 0;
  transition: opacity 0.2s ease-out;
}
.navbar .brand img { padding-top: 6px; width: 170px; }
.navbar .brand:hover { opacity: 0.7; }
/* Help Scout puts EVERY public collection in the top nav. At three collections
   that was fine; at twelve it is unusable (Ron, 2026-08-17). Collection links are
   hidden by DEFAULT and support-site.js re-shows only the ones listed in
   support-home.json -> navKeep, by collection name or number. Default-hide is the
   point: a collection added later stays out of the nav until someone chooses to put
   it there. Support Home, Contact and Sign in are not collection links, so they are
   unaffected by construction. Verified against the live header, which is
   <header id="mainNav" class="navbar">, so this selector and the script's
   #mainNav .nav li resolve to the same elements. */
.navbar .nav li:has(> a[href*="/collection/"]):not(.hs-nav) { display: none; }
.navbar .nav #contact-us { display: none; }
.navbar .nav #signin { padding-right: 10px; }
.navbar .nav li a {
  color: var(--deep-river);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  padding: 0 18px;
  transition: color 0.15s ease-out;
}
/* was Poppy; interactive colour is Blueberry */
.navbar .nav li a:hover,
.navbar .nav li.active a,
.navbar .nav li.active a:hover,
.navbar .nav li.active a:focus { color: var(--blueberry-ink); }
@media (min-width: 769px) { .navbar .nav { top: 4px; } }

.sticky {
  background-color: var(--white);
  box-shadow: 0 2px 10px rgba(0, 50, 66, 0.07);
  position: fixed; top: 0; width: 100%;
}
.header-padding { padding: 30px; }

/* Sign in = the guide's secondary CTA: Deep River text, white fill, Deep River border */
#signInLink {
  border: 2px solid var(--deep-river);
  border-radius: var(--radius);
  color: var(--deep-river);
  font-family: var(--font-heading);
  padding: 4px 22px;
  transition: background 0.15s ease, color 0.15s ease;
}
#signInLink:hover {
  background: var(--deep-river);
  border-color: var(--deep-river);
  color: var(--white);
}

/* ---------- search hero: the one Deep River band ---------- */
#docsSearch {
  background: var(--deep-river);
  display: grid;
  padding: 4.25em 0 3.5em;
  place-items: center;
}
#docsSearch h1 {
  color: var(--white) !important;
  font-family: var(--font-display);
  font-size: var(--text-size-600);
  margin: 0 0 26px;
}
#docsSearch > div,
#docsSearch div {
  padding-bottom: 0;
  position: static;
  width: min(720px, calc(100vw - 48px));   /* replaces the fixed-px + 4 media queries */
  z-index: 0;
}
#docsSearch #searchBar { position: relative; }
#docsSearch #searchBar .search-query {
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  height: auto;
  padding: 15px 18px;
  width: 100%;
  box-sizing: border-box;
}
#docsSearch #searchBar button {
  background: var(--poppy);          /* the one Poppy use: a primary CTA */
  border: none;
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  padding: 15px 26px;
  text-shadow: none;
  top: auto;
  transition: background 0.15s ease;
}
#docsSearch #searchBar button:hover { background: var(--poppy-ink); }
.search-footer {
  color: var(--fog);
  font-size: var(--text-size-100);
  margin-bottom: 0;
  text-align: center;
}
.search-footer a { color: var(--white); }
.search-footer a:hover { color: var(--steady-stream); }
#serp-dd { position: absolute !important; width: 100% !important; z-index: 99 !important; }

/* The three quick links the JS injects under the search box. */
.hs-quicklinks {
  color: var(--fog);
  font-size: var(--text-size-90);
  margin: 16px 0 0;
  text-align: center;
}
.hs-quicklinks a {
  color: var(--white);
  margin: 0 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hs-quicklinks a:hover { color: var(--steady-stream); }

/* ---------- motifs and icons: removed ----------
   Kept as hiding rules rather than deleted so the page is correct even if a
   stale cached copy of support-site.js still injects them. */
body [class*="bg-fill"],
#docsSearch img,
.category-list .category i,
.category-list .category > span:first-child,
.cat-icon { display: none !important; }

/* ---------- collections ----------
   IMPORTANT, and the thing that was wrong until 2026-08-17: the approved mockup
   makes the CARD a COLLECTION, with its categories as rows inside. Help Scout's
   markup nests them that way already:

     <section class="collection-category">          <- the card
       <h2><a>Manage Your Account</a></h2>          <- the card title
       <section class="category-list">              <- the rows
         <a class="category"><h3>Getting Started</h3>
            <p></p>                                 <- category description
            <p class="article-count">6 articles</p>
         </a>

   The first version of this file styled each .category as its own card, which is
   a different layout from the one everybody reviewed. Corrected here: the
   collection is the card and each category is a single row inside it. No JS is
   needed for the structure, only for the header row and the card blurb.
   -------------------------------------------------------------------------- */
.collection-category {
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  margin: 0 0 18px;
  padding: 22px;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.collection-category:hover {
  border-color: var(--blueberry-ink);
  box-shadow: 0 6px 20px rgba(0, 50, 66, 0.1);
  transform: translateY(-2px);
}
/* the card title, not a page-level section heading any more */
.collection-category h2 {
  font-family: var(--font-heading);
  font-size: var(--text-size-200);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 6px;
  padding-left: 0;
}
.collection-category h2 a { color: var(--deep-river); }
.collection-category:hover h2 a { color: var(--blueberry-ink); }

/* One-line blurb under the card title. Help Scout does NOT render a collection
   description on the homepage, so support-site.js injects this from
   support-home.json (collections.<slug>.blurb). */
.hs-collection-blurb {
  color: var(--stone);
  font-size: var(--text-size-90);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Header row above the counts. Injected by support-site.js because a single CSS
   pseudo-element cannot hold two independently aligned labels. "Topic" rather
   than "Category": Category is Help Scout's word, not the customer's. */
.hs-listhead {
  align-items: baseline;
  border-bottom: 1px solid var(--fog);
  color: var(--stone);
  display: flex;
  font-family: var(--font-heading);
  font-size: 10.5px;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin: 0 0 2px;
  padding-bottom: 7px;
  text-transform: uppercase;
}

/* the category rows */
.category-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
/* The doubled selector is load-bearing, not redundant.
   Help Scout's own stylesheet lays categories out as centred inline-block TILES, and
   it adds a `.two-col` class to .category-list when a collection has exactly two
   categories:

       .category-list .category          { width: 29% }
       .category-list.two-col .category  { width: 45.65% }   <- three classes

   That second rule is specificity (0,3,0) and beats a plain
   `.category-list .category { width: auto }` at (0,2,0), no matter that our sheet
   loads later. The visible result, which Ron caught on 2026-08-17: every collection
   with 3+ categories got full-width rows, while Plans & pricing, Billing & payments,
   Contacts & groups, Inbox and Mobile app - all two-category collections - rendered
   at 45.65% width, so their topic names wrapped to two and three lines inside a
   half-width row. Measured 168.297px against a 369px list, which is 45.65% exactly.
   Matching their selector shape puts us at equal specificity and later in the
   cascade, which is enough; no !important needed. Re-check this if Help Scout ever
   ships a one-col or three-col modifier - today `two-col` is the only one. */
.category-list .category,
.category-list.two-col .category {
  align-items: baseline;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cloud);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 0;
  padding: 9px 2px;
  transition: color 0.12s ease;
  width: auto;
}
.category-list .category:last-child { border-bottom: 0; }
.category-list .category:hover { background: transparent; box-shadow: none; transform: none; }
.category-list .category h3 {
  color: var(--deep-river);
  font-family: var(--font-body);
  font-size: var(--text-size-90);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}
.category-list .category:hover h3 { color: var(--blueberry-ink); }
/* The per-category description would make every row two lines tall. The blurb
   that belongs here is the COLLECTION's, above. */
.category-list .category > p:not(.article-count) { display: none; }
/* Help Scout writes "6 articles" with the word included, so the number is already
   labelled; the header row above just makes the column explicit. */
.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--stone);
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-size-90);
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}
.category-list .category:hover .article-count { color: var(--blueberry); }

/* The collection cards laid out as a grid, HOMEPAGE ONLY.
   Two things to know about this selector, both learned the hard way:

   1. It targets #contentArea directly, NOT #contentArea .row-fluid. The homepage
      has no .row-fluid at all -- collection sections are direct children of
      #contentArea. .row-fluid exists only on category and article pages, where it
      wraps main-content + sidebar, so an earlier version of this rule both missed
      the homepage entirely AND would have collapsed those two layouts.
   2. auto-fit, not a fixed column count. Today there are two real collections;
      after the IA restructure there will be eleven. auto-fit stretches to fill
      with two and wraps to three or four with eleven, without leaving an empty
      track either way.

   .hs-home is added to <body> by support-site.js when #docsSearch is present. */
.hs-home #contentArea {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* THE RAGGED-GRID BUG, root-caused 2026-08-17. Do not remove these two lines.
   #contentArea carries Help Scout's Bootstrap-era `clearfix`, whose whole mechanism
   is a pair of pseudo-elements:

       .clearfix:before, .clearfix:after { display: table; content: "" }

   Harmless on the float layout it was written for. But ::before and ::after on a GRID
   container are GRID ITEMS, so each one silently claimed a full column track - measured
   at 414.656px, one exact column. ::before took cell 1 of row 1 and shoved every card
   one position along, which is why the first row rendered with an empty first cell and
   the whole grid looked offset by one. ::after quietly claimed a cell at the end too.

   It is invisible to element-level debugging: enumerating #contentArea.children shows
   nothing in that cell, because the occupant is not a child. What exposed it was
   getComputedStyle(el, "::before") reporting a column-width box.
   `content: none` removes the boxes outright; the grid needs no clearing. */
.hs-home #contentArea::before,
.hs-home #contentArea::after { content: none; }
/* Everything that is not a collection card has to span the whole row.
   Written as "not a card" rather than as a list of the known non-cards. The old
   version enumerated #noResults, footer, .hs-popular and .hs-fullwidth, which is an
   allowlist: anything Help Scout adds to #contentArea that nobody predicted claims a
   single cell instead, and silently shunts every card one position along. Ron hit
   exactly that on 2026-08-17 - the first row rendered with an empty first cell and
   the whole grid offset by one - and it did not reproduce for either of us on a
   reload, which is the signature of a transient extra child rather than a bad
   selector. This form cannot be outflanked by a child we have not seen.
   .hs-fullwidth still needs naming because it IS a .collection-category. */
.hs-home #contentArea > *:not(.collection-category),
.hs-home #contentArea > .hs-fullwidth { grid-column: 1 / -1; }

/* An empty collection section would still claim a cell and read as a hole in the
   grid. Help Scout hides empty collections on the homepage, but a collection whose
   only articles are unpublished is not empty by its reckoning and is by ours. */
.hs-home .collection-category:not(.hs-fullwidth):not(:has(.category-list .category)) {
  display: none;
}

.collection-category { margin: 0 0 18px; }
.hs-home .collection-category { margin: 0; }

/* The Contact Us collection is replaced by the contact + team fragment, which has
   its own internal layout and is not a browsable card. support-site.js tags it
   .hs-fullwidth; strip the card chrome so it reads as a section, not a tile. */
.hs-fullwidth {
  border: 0;
  border-radius: 0;
  padding: 22px 0 0;
}
.hs-fullwidth:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}
.hs-fullwidth > h2 {
  font-family: var(--font-display);
  font-size: var(--text-size-500);
  margin: 0 0 8px;
}

/* ---------- Most Popular Articles: ranked, no view counts ----------
   Help Scout maintains this list and exposes no counts, so a rank is the only
   figure that stays true without a manual refresh. Numbers come from a counter. */
.articleList { list-style: none; margin: 0; padding: 0; }
.articleList li { border-bottom: 1px solid var(--fog); margin: 0; }
/* Ranks belong ONLY to the curated homepage list. A category listing can be
   re-sorted by the visitor (Sort A-Z / Popularity / Last Updated), so numbering
   it would state an order that is not true after the first sort. */
.hs-popular .articleList { counter-reset: hsrank; }
.hs-popular .articleList li { counter-increment: hsrank; }

/* On the HOMEPAGE only, the injected list runs in two columns filled DOWN, so it
   reads 1-4 on the left and 5-8 on the right (Kaitlyn, 2026-08-17). CSS columns
   rather than grid on purpose: a 2-column grid fills row-by-row and would put the
   odd numbers down the left, and column-count stays correct if the list length
   changes in support-home.json. Help Scout's own Most Popular Articles list on
   collection pages is left single-column, which is why this is scoped. */
.hs-popular .articleList { column-count: 2; column-gap: 34px; }
.hs-popular .articleList li { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 700px) { .hs-popular .articleList { column-count: 1; } }

/* the injected section's own heading + lede */
.hs-popular { padding-bottom: var(--sec-pad); }
.hs-popular h2 {
  font-family: var(--font-display);
  font-size: var(--text-size-500);
  font-weight: 400;
  margin: 0 0 8px;
}
.hs-popular-lede { color: var(--stone); font-size: var(--text-size-100); margin: 0 0 20px; }
.articleList a {
  align-items: baseline;
  color: var(--blueberry) !important;
  display: flex;
  font-size: var(--text-size-100);
  gap: 14px;
  padding: 13px 2px;
  text-decoration: none;
}
.hs-popular .articleList a::before {
  color: var(--stone);
  content: counter(hsrank);
  flex: none;
  font-family: var(--font-heading);
  font-size: var(--text-size-90);
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
}
.articleList a:hover { color: var(--blueberry-ink) !important; }
.hs-popular .articleList a:hover::before { color: var(--blueberry); }
.articleList a i, .articleList a .icon-article-doc { display: none; }

/* ---------- Contact Us fragment: contact details + the team ---------- */
/* The fragment stacks: contact details as a full-width band, then the team at full
   width beneath it. It used to be `grid-template-columns: 300px 1fr`, contact info
   in a fixed 300px rail with the team squeezed into what was left, and that produced
   the two things Ron flagged on 2026-08-17:

     - 300px is not enough for a label and an address on one line, so
       "Support & product: support@text-em-all.com" broke mid-token as
       "support@text-em-" / "all.com". The fragment now puts each label on its own
       line above its address, so an address always starts at the left margin.
     - the team grid is 5 across. Inside the leftover ~1fr that is ~140px a photo;
       full width it is ~210px, which is the size everybody reviewed on the mockup.

   The reviewed mockup had these as two separate full-width sections for exactly this
   reason. It also ordered them team-then-contact; kept as contact-then-team here so
   the "How to reach us" h2 that Help Scout renders above the fragment still labels
   the block directly under it. Swap with `order` on the two children if that reads
   better once it is live. */
section.contact-us {
  color: var(--stone);
  display: grid;
  font-size: var(--text-size-100);
  gap: 44px;
  grid-template-columns: 1fr;
  line-height: var(--line-height-relaxed);
  padding-bottom: var(--sec-pad);
}
/* Three explicit columns, NOT repeat(auto-fit, minmax(260px, 1fr)).
   auto-fit only collapses tracks that are genuinely empty, and the heading above
   spans 1 / -1 - which means no track is ever empty, so auto-fit kept a fourth
   294px track alive with nothing in it and left the right quarter of the band blank.
   The block count here is fixed at three, so there is nothing for auto-fit to solve. */
section.contact-us .contact-info {
  align-items: start;
  display: grid;
  gap: 20px 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  section.contact-us .contact-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  section.contact-us .contact-info { grid-template-columns: minmax(0, 1fr); }
}
/* Section-level headings INSIDE the fragment. Both "Our Texas-based team" and "How to
   reach us" are sections in the reviewed mockup (h2.sec-title, display face, --t-500),
   not labels. The team heading shipped as a plain <h3>, which `section.contact-us h3`
   below then styles as a 14px uppercase field label - so it read as a sibling of CALL
   US and EMAIL US rather than as the title of the block. Same treatment as
   `.hs-popular h2` so the three section headings down the page match each other. */
section.contact-us .hs-section-title {
  color: var(--deep-river);
  font-family: var(--font-display);
  font-size: var(--text-size-500);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 8px;
  text-transform: none;
  text-wrap: balance;
}
section.contact-us .hs-eyebrow {
  color: var(--stone);
  font-family: var(--font-body);
  font-size: var(--text-size-90);
  font-weight: 700;
  letter-spacing: 0.11em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
section.contact-us .hs-section-lede {
  color: var(--stone);
  font-size: var(--text-size-100);
  margin: 0 0 30px;
  max-width: 62ch;
}
/* The band's heading spans the row rather than taking a column of its own. The
   reviewed mockup put it in column one, which worked there because the band was a
   full-bleed Deep River panel with a lede beside it; dropped into an auto-fit track
   here it lands in ~260px and wraps to "How to" / "reach us". Spanning also makes it
   consistent with the page's other two section headings - "Our most read articles"
   and "Our Texas-based team" both sit full width above their content. */
section.contact-us .contact-info > .hs-section-title {
  grid-column: 1 / -1;
  margin: 0 0 6px;
}
section.contact-us .reach-block { min-width: 0; }
/* A second heading inside the emergency block, so "Connect with us" can share a
   column instead of being a column of its own. Four groups across three tracks left
   the icons alone in track 3 with a void beside them. */
section.contact-us .reach-sub { margin-top: 22px; }
/* Labels above their address. An address is one unbreakable token ~26 characters
   long, so "Compliance & escalations: compliance@text-em-all.com" cannot share a
   line at this column width - it breaks mid-address, which is what it did in the
   300px rail. Above, not beside, and small enough not to read as another heading. */
section.contact-us .reach-label {
  color: var(--stone);
  display: block;
  font-size: var(--text-size-80);
  line-height: 1.4;
}
section.contact-us .reach-phone {
  font-size: var(--text-size-200);
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}
/* The band closes the page's white run, so it needs a boundary of its own. A
   hairline rather than a filled panel: the reviewed mockup put this content in a
   Deep River band, which is still the better answer, but flipping the whole block to
   a dark panel is a bigger visual call than a spacing fix and should be seen first. */
section.contact-us .contact-info {
  border-top: 1px solid var(--fog);
  padding-top: 26px;
}
/* Long addresses must never break mid-token; if a column really is too narrow,
   overflow the box rather than hyphenating an email into nonsense. */
section.contact-us a[href^="mailto:"] { overflow-wrap: normal; word-break: keep-all; }
section.contact-us h3 {
  color: var(--deep-river);
  font-family: var(--font-heading);
  font-size: var(--text-size-90);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.3em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
section.contact-us .contact-info { flex: none; margin: 0; min-width: 0; width: auto; }
section.contact-us .contact-info p { margin: 0 0 var(--spacing-sm); }
section.contact-us .support-team { flex: none; width: auto; }
section.contact-us hr {
  border: 0;
  border-top: 1px solid var(--fog);
  margin: var(--spacing-md) 0;
}

/* The five icons come from three different sources at three different intrinsic
   sizes (24x24 flat icons, a 512px YouTube logo, a 512px Instagram glyph), and
   height:22px + width:auto let each keep its own aspect ratio and padding, so the
   row read as five mismatched squares. A fixed square box with object-fit:contain
   makes them line up whatever the source is, which also retires the -6px nudge that
   was compensating for one of them by hand. */
.connect-with-us-social { display: flex; gap: 12px; align-items: center; }
.connect-with-us-social a { color: var(--stone); margin: 0; }
.connect-with-us-social a:hover { text-decoration: none; }
.connect-with-us-social a span { display: block; transition: opacity 0.2s ease-out; }
.connect-with-us-social a:hover span { opacity: 0.65; }
.connect-with-us-social img {
  display: block;
  height: 22px;
  object-fit: contain;
  width: 22px;
}
/* NOTE: two of these five are hotlinked from iconfinder.com, inherited from the old
   production page. They are outside our control and will break silently if that host
   moves them. Worth re-hosting on /hubfs alongside the other three. */

/* ---------- the team ----------
   Replaces .team-frame (a rotate(45deg) white square masking a floated image)
   with a round photo that cross-fades to a second shot on hover or focus. */
section.team-pictures {
  display: grid;
  gap: 26px 18px;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
}
@media (max-width: 1100px) { section.team-pictures { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { section.team-pictures { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { section.team-pictures { grid-template-columns: repeat(2, 1fr); } }

section.team-pictures .feature-box-team {
  height: auto;
  list-style: none;
  margin: 0;
  text-align: center;
}
section.team-pictures .feature-box-team .box-content { width: auto; }

/* the photo */
section.team-pictures .team-shot {
  aspect-ratio: 1;
  background: var(--cloud);
  border-radius: 50%;
  display: block;
  margin: 0 auto 12px;
  max-width: 128px;
  outline: 3px solid transparent;
  outline-offset: 3px;
  overflow: hidden;
  position: relative;
  transition: outline-color 0.16s ease;
  width: 100%;
}
section.team-pictures .team-shot img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
section.team-pictures .team-shot img.hover-shot { opacity: 0; transition: opacity 0.18s ease; }
.feature-box-team:hover .team-shot img.hover-shot,
.feature-box-team:focus-within .team-shot img.hover-shot { opacity: 1; }
.feature-box-team:hover .team-shot { outline-color: var(--steady-stream); }

section.team-pictures .feature-box-team .box-title {
  color: var(--deep-river);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  padding-top: 0;
  position: static;
}
section.team-pictures .feature-box-team .team-title {
  color: var(--stone);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 2px 0 0;
  position: static;
  text-transform: none;
}
.nickname { color: var(--blueberry); font-weight: 400; }

/* ===========================================================================
   CATEGORY PAGE and ARTICLE PAGE
   Both share the same shell:
     #contentArea > .row-fluid > (#main-content.span9 + #sidebar.span3)
   with the content inside .contentWrapper. On the old cream page that wrapper
   read as a card by contrast alone; on white it needs a real border.
   =========================================================================== */

#main-content { margin-top: 24px; }

.contentWrapper {
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  padding: 34px 38px;
}
@media (max-width: 640px) { .contentWrapper { padding: 22px 20px; } }
.contentWrapper h1 { font-family: var(--font-display); font-weight: 400; }

/* ---------- sidebar ---------- */
#sidebar { margin-top: 24px; }

/* The sidebar search is the SAME #searchBar id as the hero, distinguished only
   by .sm. Unscoped, it inherited the hero's 18px input and full Poppy CTA
   button, which would have put a large orange button in the sidebar. */
#searchBar.sm { position: relative; }
#searchBar.sm .search-query {
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  box-sizing: border-box;
  color: var(--deep-river);
  font-family: var(--font-body);
  font-size: 15px;
  height: auto;
  padding: 10px 36px 10px 12px;
  width: 100%;
}
#searchBar.sm .search-query:focus { border-color: var(--blueberry); outline: none; }
#searchBar.sm button {
  background: none;
  border: 0;
  color: var(--stone);
  padding: 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
#searchBar.sm button:hover { background: none; color: var(--blueberry); }

#sidebar h3 {
  color: var(--stone) !important;
  font-family: var(--font-heading);
  font-size: var(--text-size-90);
  font-weight: 400;
  letter-spacing: 1px;
  margin: 28px 0 10px;
  text-transform: uppercase;
}
#sidebar .nav-list { margin: 0; padding: 0; }
#sidebar .nav-list li { list-style: none; margin: 0; }
#sidebar .nav-list li a {
  background: none;
  color: var(--stone);
  display: block;
  font-size: 15px;
  padding: 7px 0;
  text-shadow: none;
}
#sidebar .nav-list li a:hover { background: none; color: var(--blueberry-ink); }
#sidebar .nav-list li.active > a {
  background: none;
  color: var(--deep-river);
  font-family: var(--font-heading);
}
#sidebar .nav-list .icon-arrow { color: var(--stone); font-size: 11px; margin-left: 4px; }

/* ---------- category page ---------- */
#categoryHead { margin: 0 0 6px; position: relative; }
#categoryHead h1 {
  font-family: var(--font-display);
  font-size: var(--text-size-500);
  margin: 0 0 6px;
  padding-right: 190px;              /* clears the sort control */
}
/* The category DESCRIPTION renders here. Worth filling in per category: the
   homepage row layout hides it, but this page shows it. */
#categoryHead .descrip {
  color: var(--stone);
  font-size: var(--text-size-100);
  margin: 0 0 18px;
  max-width: 62ch;
}
#categoryHead .descrip:empty { display: none; margin: 0; }
#categoryHead .sort { position: absolute; right: 0; top: 4px; }
#categoryHead .sort select, #sortBy {
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  color: var(--deep-river);
  font-family: var(--font-body);
  font-size: 14px;
  height: auto;
  padding: 8px 10px;
  width: auto;
}
#sortBy:focus { border-color: var(--blueberry); outline: none; }
@media (max-width: 640px) {
  #categoryHead h1 { padding-right: 0; }
  #categoryHead .sort { margin-bottom: 14px; position: static; }
}

/* ---------- article page ---------- */
#fullArticle .title {
  font-family: var(--font-display);
  font-size: var(--text-size-500);
  line-height: 1.14;
  margin: 0 0 6px;
  padding-right: 40px;               /* clears the print icon */
}
#fullArticle .printArticle { color: var(--fog); }
#fullArticle .printArticle:hover { color: var(--blueberry); }

#fullArticle blockquote, #fullArticle dd, #fullArticle div, #fullArticle li,
#fullArticle ol, #fullArticle p, #fullArticle table, #fullArticle ul {
  color: var(--deep-river);
  font-size: 17px;
  letter-spacing: 0;
}
#fullArticle h2 {
  font-family: var(--font-display);
  font-size: var(--text-size-400);
  line-height: 1.2;
  margin: 1.7em 0 0.5em;
}
#fullArticle h3 {
  font-family: var(--font-heading);
  font-size: var(--text-size-200);
  line-height: 1.3;
  margin: 1.5em 0 0.4em;
}
#fullArticle h4 {
  font-family: var(--font-heading);
  font-size: var(--text-size-100);
  font-weight: 400;
  line-height: 1.35;
  margin: 1.3em 0 0.35em;
}
#fullArticle li { margin-bottom: 0.4em; }
#fullArticle li::marker { color: var(--stone); }
#fullArticle img { border: 1px solid var(--fog); border-radius: var(--radius); padding: 0; }
#fullArticle blockquote {
  border-left: 3px solid var(--steady-stream);
  color: var(--stone);
  font-family: var(--font-quote);
  margin: 1.6em 0;
  padding: 2px 0 2px 18px;
}
#fullArticle hr { border: 0; border-top: 1px solid var(--fog); margin: 2em 0; }

/* Help Scout's admin theme sets .contentWrapper a and #fullArticle strong a to
   Poppy in its inline block. Matching selectors here, loaded later, so article
   links land on Blueberry like every other link on the site. */
.contentWrapper a { color: var(--blueberry); }
.contentWrapper a:hover { color: var(--blueberry-ink); }
#fullArticle strong a, #fullArticle a strong { color: var(--blueberry); }
#fullArticle strong { color: var(--deep-river); }

#fullArticle .index-list {
  background: var(--tint);
  border-left: 3px solid var(--steady-stream);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2.2em 0;
  padding: 16px 18px;
}
#fullArticle .index-list ul { column-count: 2; margin: 0; padding: 0; width: 100%; }
#fullArticle .index-list li { line-height: 30px; list-style: none; width: 100%; }
@media (max-width: 640px) { #fullArticle .index-list ul { column-count: 1; } }
h3:target:before { content: ""; display: block; height: 70px; margin-top: -55px; }

/* ---------- article ratings ---------- */
.articleRatings {
  background: var(--tint);
  border: 1px solid var(--fog);
  border-radius: var(--radius);
  margin: 2.4em 0 0;
  padding: 16px 18px;
  text-align: center;
}
.articleRatings-question {
  color: var(--stone) !important;
  font-family: var(--font-heading);
  font-size: var(--text-size-90) !important;
  margin: 0 0 10px;
}
.articleRatings-actions { display: flex; gap: 10px; justify-content: center; }
.rating-face {
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.14s ease, opacity 0.14s ease;
}
.rating-face:hover { filter: none; opacity: 1; }
.articleRatings-feedback-message, .articleRatings-failure {
  color: var(--stone);
  font-size: var(--text-size-90);
}

/* ---------- article foot + related ---------- */
.articleFoot {
  align-items: baseline;
  border-top: 1px solid var(--fog);
  color: var(--stone);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-size-90);
  gap: 12px;
  justify-content: space-between;
  margin-top: 2em;
  padding-top: 14px;
}
.articleFoot p, .articleFoot em, .articleFoot i {
  color: var(--stone);
  font-size: var(--text-size-90);
  font-style: normal;
  margin: 0;
}

.related { margin-top: 26px; }
.related h3, .related h4 {
  color: var(--stone) !important;
  font-family: var(--font-heading);
  font-size: var(--text-size-90);
  letter-spacing: 1px;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.contentWrapper.withRelated { padding-bottom: 30px; }

/* The repeated document glyph in every article-list row carries no information,
   so it is hidden on category pages and in Related Articles, as on the homepage. */
.articleList a i, .articleList a .icon-article-doc, .related .icon-article-doc { display: none; }

/* ---------- misc ---------- */
#contactUsPhone { float: left; margin-left: -125px; margin-top: 10px; }
.form-actions .btn { float: right; }
.form-actions .btn-primary {
  background: var(--poppy);
  border: 1px solid var(--poppy);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 17px;
  padding: 16px 24px;
  text-shadow: none;
}
.form-actions .btn-primary:hover { background: var(--poppy-ink); border-color: var(--poppy-ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}