/* Cowhides Direct Help Centre — public stylesheet.
   Palette and type follow the approved espresso / cream / gold reference. */

:root {
  --espresso: #3e2723;
  --espresso-deep: #2c1c19;
  --cream: #faf7f2;
  --ivory: #fffdf8;
  --gold: #a8871e;
  --terracotta: #c75b39;
  --sage: #4a7c59;
  --tan: #ece5da;
  /* Backgrounds for the two callout tones, at the same weight as --tan is to
     --gold, so the three read as one family rather than three decisions. */
  --sage-tint: #e4ebe2;
  --terracotta-tint: #f6e6df;
  --body: #4a3e2b;
  --line: rgba(62, 39, 35, .18);
  --quiet: rgba(74, 62, 43, .72);
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "EB Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Defensive: a failed asset or an oversized embed should not widen the page.
   clip rather than hidden so the article rail can stay sticky. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main img, .article-body img { max-width: 100%; height: auto; }

.wrap { max-width: 1300px; margin: 0 auto; padding: 0 40px; }
.narrow { max-width: 870px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 400; background: #fff; padding: 10px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* utility bar + masthead --------------------------------------------- */

.utility { background: var(--espresso); color: rgba(255, 253, 248, .8); font-size: 14px; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.utility a { color: inherit; text-decoration: none; }
.utility a:hover { color: #fff; }

.masthead { background: var(--ivory); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 26px; min-height: 76px; }

.brand { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--espresso); text-decoration: none; letter-spacing: -.2px; }
.brand em { font-style: normal; color: var(--gold); }

.masthead nav { display: flex; align-items: center; gap: 30px; font-size: 16px; }
.masthead nav a,
.masthead nav button {
  color: var(--body);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.masthead nav a:hover, .masthead nav button:hover { color: var(--espresso); }
.ask-katie-nav { display: inline-flex; align-items: center; gap: 7px; }

.katie-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(62, 39, 35, .14);
  border-radius: 50%;
  background: linear-gradient(145deg, #c8ab4e, #a8871e);
  box-shadow: 0 1px 3px rgba(62, 39, 35, .16);
  color: var(--espresso-deep);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.katie-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--ivory);
  border-radius: 50%;
  background: var(--sage);
}
.katie-avatar--nav { width: 24px; height: 24px; font-size: 14px; }
.katie-avatar--nav .katie-status { width: 7px; height: 7px; }

/* hero + search ------------------------------------------------------- */

.hero { background: var(--ivory); border-bottom: 1px solid var(--line); padding: 44px 0 56px; text-align: center; }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { font-size: 44px; font-weight: 700; letter-spacing: -.7px; line-height: 1.2; color: var(--espresso); margin: 0 0 22px; }

.help-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 790px;
  margin: 0 auto;
  padding-left: 10px;
  overflow: hidden;
  border: 1px solid var(--espresso);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(62, 39, 35, .06);
}
.help-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168, 135, 30, .14);
}
.katie-avatar--search { width: 34px; height: 34px; font-size: 19px; }
.help-search input {
  min-width: 0;
  min-height: 58px;
  padding: 19px 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--espresso);
  font: inherit;
  font-size: 16px;
}
.help-search input::placeholder { color: rgba(74, 62, 43, .5); }
.help-search button {
  align-self: stretch;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-left: 1px solid var(--espresso);
  border-radius: 0;
  background: var(--espresso);
  color: var(--ivory);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.help-search button:hover { background: var(--espresso-deep); }
.hero-assistant {
  max-width: 660px;
  margin: 14px auto 0;
  color: var(--quiet);
  font-size: 14.5px;
  line-height: 1.55;
}
.hero-assistant strong { color: var(--espresso); }

.search-results {
  max-width: 660px;
  margin: 10px auto 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: left;
}
.search-results > p { margin: 8px 10px; font-size: 14.5px; }
.search-result { display: block; padding: 11px 12px; border-radius: 3px; color: var(--espresso); text-decoration: none; }
.search-result + .search-result { border-top: 1px solid var(--line); }
.search-result:hover { background: var(--tan); }
.search-result strong { display: block; font-size: 15px; }
.search-result small { display: block; margin-top: 3px; color: var(--body); font-size: 13px; line-height: 1.45; }
.search-results button {
  margin: 4px 10px 8px;
  padding: 9px 18px;
  border: 1px solid var(--espresso);
  border-radius: 4px;
  background: var(--espresso);
  color: var(--ivory);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* section headings ---------------------------------------------------- */

.page-content { padding-top: 48px; padding-bottom: 20px; }
.page-content section { margin-bottom: 48px; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.section-heading h2 { margin: 0; color: var(--espresso); font-size: 29px; font-weight: 700; line-height: 1.3; }
.section-heading p { margin: 6px 0 0; font-size: 15.5px; }
.section-heading a { color: var(--gold); font-size: 14px; font-weight: 700; text-decoration: none; }

/* action cards -------------------------------------------------------- */

.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Nine order actions across four columns leaves one card stranded on its own
   row. Three columns divides evenly, and the extra width is welcome on labels
   that CARD_LABEL_MAX only just fits. The promo row keeps four; it holds eight. */
#orders .action-grid { grid-template-columns: repeat(3, 1fr); }
.action-card {
  display: grid;
  grid-template-columns: 40px 1fr 14px;
  align-items: center;
  gap: 16px;
  /* No minimum height: with one-line labels the content sets it, and every card
     in a row still matches because grid stretches them to the row. */
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(62, 39, 35, .08);
  color: var(--body);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.action-card:hover { border-color: var(--gold); box-shadow: 0 3px 10px rgba(62, 39, 35, .12); }
.action-icon {
  --icon-bg: var(--tan);
  --icon-border: rgba(62, 39, 35, .1);
  --icon-ink: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--icon-border);
  border-radius: 7px;
  background: var(--icon-bg);
  color: var(--icon-ink);
  box-shadow: 0 1px 2px rgba(62, 39, 35, .06);
}
.action-icon svg { width: 20px; height: 20px; display: block; }
/* Category color lives on the SVG badge rather than in emoji artwork. This
   keeps the cards crisp at every pixel density and gives the whole grid a
   polished, consistent icon style. */
.action-icon--track {
  --icon-bg: #eef6ff;
  --icon-border: #d7e9ff;
  --icon-ink: #2563a9;
}
.action-icon--delivery {
  --icon-bg: #fff0f5;
  --icon-border: #f8d9e5;
  --icon-ink: #b8326b;
}
.action-icon--edit {
  --icon-bg: #fff4e8;
  --icon-border: #f7dfc4;
  --icon-ink: #b55f17;
}
.action-icon--mail,
.action-icon--topic {
  --icon-bg: #f3f0ff;
  --icon-border: #e2dcff;
  --icon-ink: #6d55b6;
}
.action-icon--returns {
  --icon-bg: #eaf8ff;
  --icon-border: #cfeefa;
  --icon-ink: #247c9f;
}
.action-icon--problem {
  --icon-bg: #fff6df;
  --icon-border: #f4dfaa;
  --icon-ink: #b26d0f;
}
.action-icon--delivered {
  --icon-bg: #eaf8f0;
  --icon-border: #ccebd9;
  --icon-ink: #27845a;
}
.action-icon--cancel {
  --icon-bg: #fff0ed;
  --icon-border: #f5d5cf;
  --icon-ink: #bd4d3f;
}
.action-icon--question {
  --icon-bg: #f3f1ed;
  --icon-border: #e5e0d8;
  --icon-ink: #71675b;
}
.action-icon--promo {
  --icon-bg: #f1efff;
  --icon-border: #dfd9ff;
  --icon-ink: #6750b8;
}
.action-icon--gift {
  --icon-bg: #fff0f3;
  --icon-border: #f7d7de;
  --icon-ink: #b9385d;
}
.action-icon--tiers {
  --icon-bg: #ecf9f6;
  --icon-border: #cfebe4;
  --icon-ink: #237b68;
}
.action-icon--stack {
  --icon-bg: #f7f1ff;
  --icon-border: #e7daf8;
  --icon-ink: #7951a8;
}
/* A 1fr column is min-content wide by default, which would push the card out
   rather than let the label clip. */
.action-copy { min-width: 0; }
/* Titles are article titles, so they wrap rather than clip. The clamp is only
   here so one unusually long title cannot stretch a whole row. */
.action-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--espresso);
  font-size: 16px;
  line-height: 1.3;
}
/* One line, always. A wrapped label is what made this grid read as a wall of
   text, so an ellipsis is the better failure. */
.action-copy small {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.action-arrow { color: var(--gold); font-size: 18px; line-height: 1; }
.action-card.featured { border-color: rgba(168, 135, 30, .55); background: var(--ivory); }
.action-card.featured .action-icon { box-shadow: 0 1px 3px rgba(62, 39, 35, .1); }
.mini-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--gold);
  color: #fff;
  font-size: 8.5px;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* article explorer ---------------------------------------------------- */

.article-explorer { border-top: 1px solid var(--line); padding-top: 42px; }
.article-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 20px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  white-space: nowrap;
}
.article-tabs button {
  padding: 4px 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.article-tabs button:hover { color: var(--espresso); }
.article-tabs button.on { border-bottom-color: var(--gold); color: var(--espresso); font-weight: 700; }

/* Rows stretch rather than sizing to content, so every card in a row shares a
   height and their footer rules line up. */
.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.article-grid[hidden] { display: none; }
.article-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 15px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(62, 39, 35, .06);
  color: var(--body);
  text-decoration: none;
}
.article-card:hover { border-color: var(--gold); }
/* Titles run to one or two lines and summaries to one or two, which left the
   grid ragged. Reserving two lines for each keeps cards even across rows too,
   not only within a row, at the cost of a blank line on the shortest cards. */
.article-card h2, .article-card h3 {
  margin: 0 0 7px;
  min-height: 2.6em;
  color: var(--espresso);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
}
.article-card p { margin: 0 0 12px; min-height: 3em; font-size: 14px; line-height: 1.5; }
/* Sits on the bottom edge of a stretched card, so the rule is a shared
   baseline across the row instead of tracking the summary's last line. */
.article-card span {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}

/* faq accordion ------------------------------------------------------- */

.faq-explorer { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 42px; }
.faq-count {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--tan);
  color: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.article-tabs button.on .faq-count { background: var(--gold); color: var(--ivory); }

.faq-list {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(62, 39, 35, .06);
  overflow: hidden;
}
.faq-list[hidden] { display: none; }

.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  color: var(--espresso);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  flex: none;
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] > summary::after { content: '–'; }
.faq-item > summary:hover { background: var(--cream); }
.faq-item[open] > summary { background: var(--cream); }
.faq-item > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-item:target > summary { box-shadow: inset 3px 0 0 var(--gold); }

.faq-answer { padding: 2px 18px 16px; }
.faq-answer p { margin: 0 0 11px; font-size: 14px; line-height: 1.65; }
.faq-answer p:last-of-type { margin-bottom: 0; }
.faq-answer a { color: var(--gold); }
.faq-permalink {
  display: inline-block;
  margin-top: 12px;
  color: var(--quiet);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.faq-permalink:hover { color: var(--gold); }

/* empty states -------------------------------------------------------- */

.empty-state {
  padding: 28px 24px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: var(--ivory);
  text-align: center;
}
.empty-state strong { display: block; margin-bottom: 5px; color: var(--espresso); font-size: 15px; }
.empty-state p { margin: 0 0 14px; font-size: 14px; }
.empty-state p:last-child { margin-bottom: 0; }
.empty-state button {
  padding: 10px 20px;
  border: 1px solid var(--espresso);
  border-radius: 4px;
  background: var(--espresso);
  color: var(--ivory);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.empty-state button:hover { background: var(--espresso-deep); }

/* contact band + footer ----------------------------------------------- */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 52px 0 0;
  padding: 36px 40px;
  border-radius: 6px;
  background: var(--espresso);
}
.contact-copy { max-width: 680px; }
.contact h2 { margin: 0 0 8px; color: var(--ivory); font-family: var(--serif); font-size: 32px; font-weight: 500; }
.contact p { margin: 0; color: rgba(255, 253, 248, .72); font-size: 15.5px; line-height: 1.6; }
.contact-actions { display: flex; flex-shrink: 0; gap: 10px; }
.contact-actions a,
.contact-actions button {
  display: flex;
  align-items: center;
  padding: 16px 28px;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.contact-actions .contact-primary { background: var(--ivory); color: var(--espresso); }
.contact-actions .contact-primary:hover { background: #fff; }
.contact-actions .contact-primary { gap: 9px; }
.katie-avatar--button { width: 25px; height: 25px; font-size: 12px; }
.katie-avatar--button .katie-status { display: none; }
.contact-actions .contact-secondary { border: 2px solid rgba(255, 253, 248, .45); background: transparent; color: var(--ivory); }
.contact-actions .contact-secondary:hover { border-color: var(--ivory); }

.help-footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13.5px; color: var(--quiet); }
.help-footer .wrap { display: flex; justify-content: flex-start; gap: 20px; flex-wrap: wrap; }

/* article + section pages --------------------------------------------- */

.crumbs { margin-bottom: 18px; font-size: 13.5px; color: var(--quiet); }
.crumbs a { color: var(--espresso); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

.page-title { margin: 0 0 22px; color: var(--espresso); font-size: 32px; font-weight: 700; line-height: 1.2; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 48px; align-items: start; }
.article-layout article h1 { margin: 0 0 12px; color: var(--espresso); font-family: var(--serif); font-size: 38px; font-weight: 500; line-height: 1.15; }
.article-summary { margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 18px; }
.article-body p { margin: 0 0 18px; }
.article-body h2, .article-body h3, .article-body h4 { margin: 34px 0 12px; color: var(--espresso); font-size: 20px; font-weight: 700; }
.article-body h3 { font-size: 17px; }
.article-body h4 { font-size: 15.5px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body li { margin-bottom: 9px; }
/* The editor wraps list item content in a paragraph, which would otherwise take
   the 18px paragraph margin and space a tight list out like body copy. */
.article-body li > p { margin: 0; }
.article-body li > p + p { margin-top: 9px; }
.article-body a { color: var(--gold); }
.article-body code { background: var(--tan); border-radius: 3px; padding: 1px 5px; font-size: 14px; }
.article-body table { width: 100%; margin: 0 0 22px; border-collapse: collapse; font-size: 15px; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--tan); color: var(--espresso); font-weight: 700; }
.article-body img { margin: 4px 0 22px; border-radius: 6px; }
/* An aside is what a callout is stored as, from the markdown renderer and now
   from the editor's Callout node. The blockquote rule is a safety net for one
   written straight through the API, which the sanitizer still allows. */
.article-body blockquote,
.article-callout {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 5px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--tan);
}
.article-body blockquote > p:last-child,
.article-callout > p:last-child { margin-bottom: 0; }
/* `display: block` here until now, for a lead-in phrase on its own line. No
   callout in the Help Centre is written that way and every one of them bolds a
   phrase mid-sentence instead — "shipped back **within 7 days** of receiving it"
   — so the rule only ever broke a sentence across three lines. */
.article-body blockquote strong,
.article-callout strong { color: var(--espresso); }

/* The two tones. Gold is the default and says "mind this"; sage says "this is
   fine, and here is why"; terracotta is kept for the few places where the next
   thing a reader does can cost them money. Three is the whole vocabulary — a
   fourth colour stops being a signal and becomes decoration. */
.article-body .article-callout--good {
  border-left-color: var(--sage);
  background: var(--sage-tint);
}
.article-body .article-callout--alert {
  border-left-color: var(--terracotta);
  background: var(--terracotta-tint);
}

/* jump navigation ----------------------------------------------------- */

/* Built by articleOutline.js from the article's own h2s, not written by an
   author, so it can never disagree with the headings it points at. */
.article-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.article-jump a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--body);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
}
.article-jump a:hover { border-color: var(--espresso); color: var(--espresso); }
.article-jump a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* collapsible sections ------------------------------------------------ */

/* The same disclosure behaviour as .faq-item on the home page, drawn as
   separate cards rather than one joined list: an article's accordions are
   interleaved with headings and prose, so they need to read as a group of
   items under a heading rather than as one uninterrupted block. */
.article-body details.article-accordion {
  margin: 0 0 10px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.article-body details.article-accordion[open] { padding-bottom: 2px; }
.article-body details.article-accordion > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* Pulled back out to the card's edge so the whole header is the hit area,
     while the answer below keeps the card's padding. */
  margin: 0 -20px;
  padding: 16px 20px;
  border-radius: 7px;
  color: var(--espresso);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.article-body details.article-accordion > summary::-webkit-details-marker { display: none; }
.article-body details.article-accordion > summary::after {
  content: '+';
  flex: none;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.article-body details.article-accordion[open] > summary {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0;
  background: var(--cream);
}
.article-body details.article-accordion[open] > summary::after { content: '–'; }
.article-body details.article-accordion > summary:hover { background: var(--cream); }
.article-body details.article-accordion > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Arriving from a link Katie sent, or from the jump nav. */
.article-body details.article-accordion:target { border-color: var(--gold); }

/* side-by-side cards -------------------------------------------------- */

/* Two options a reader is choosing between, which stacked as prose reads as a
   recommendation followed by an afterthought. They wrap rather than squeeze:
   two 140px columns of text are worse than one readable one. */
.article-body div.article-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 24px;
}
.article-body div.article-column {
  flex: 1 1 280px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
/* One pixel comes off the padding so the heavier border does not make the
   recommended card taller than the one beside it. */
.article-body div.article-column--highlight {
  padding: 22px;
  border: 2px solid var(--sage);
}
.article-body div.article-column > :first-child { margin-top: 0; }
.article-body div.article-column > :last-child { margin-bottom: 0; }

/* A link as the page's call to action. */
.article-body a.article-cta {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 6px;
  background: var(--espresso);
  color: var(--ivory);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.article-body a.article-cta:hover { background: var(--espresso-deep); }

/* Smooth scrolling is on for the whole document, so anything the jump nav or a
   cited link can land on needs to stop clear of the top of the viewport. */
.article-body h2,
.article-body details.article-accordion { scroll-margin-top: 24px; }

/* The direct child only. This is the sibling-links rail, and as a descendant
   selector it also caught every `aside.article-callout` in the article body —
   so a callout detached from the text it belongs to and hung 24px below the top
   of the window while the prose scrolled past underneath it. Easy to miss on an
   article with one callout near the top, obvious on one with nine. */
.article-layout > aside { position: sticky; top: 24px; }
.article-layout aside h2 { margin: 0 0 12px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.article-layout aside ul { list-style: none; margin: 0 0 24px; padding: 0; }
.article-layout aside li { margin: 0; }
.article-layout aside a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--body); font-size: 14.5px; line-height: 1.4; text-decoration: none; }
.article-layout aside a:hover { background: var(--tan); }

.contact-card { padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--ivory); }
.contact-card strong { display: block; margin-bottom: 5px; color: var(--espresso); }
.contact-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.contact-card button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--espresso);
  border-radius: 4px;
  background: var(--espresso);
  color: var(--ivory);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.contact-card button:hover { background: var(--espresso-deep); }

.helpful {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 38px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ivory);
}
.helpful strong { color: var(--espresso); font-size: 16px; }
.helpful button {
  margin-left: 9px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--espresso);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.helpful button:hover { border-color: var(--espresso); }
.helpful span { margin-left: 10px; color: var(--sage); font-size: 14px; }

/* promo checker ------------------------------------------------------- */

.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.promo-tool { padding: 26px 28px; border: 2px solid var(--espresso); border-radius: 8px; background: #fff; }
.promo-tool h1 { margin: 4px 0 10px; color: var(--espresso); font-size: 28px; font-weight: 700; line-height: 1.2; }
.promo-tool > p { margin: 0; font-size: 15px; }
.promo-tool form { display: grid; gap: 18px; margin-top: 24px; }
.promo-tool label { display: block; color: var(--espresso); font-size: 15px; font-weight: 600; }
.promo-tool input, .promo-tool select {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--espresso);
  font: inherit;
  font-size: 17px;
}
.promo-tool input:focus, .promo-tool select:focus { border-color: var(--espresso); }
.promo-tool button {
  min-height: 54px;
  border: 2px solid var(--espresso);
  border-radius: 6px;
  background: var(--espresso);
  color: var(--ivory);
  font: inherit;
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
}
.promo-tool button:hover { background: var(--espresso-deep); }

.promo-result { margin-top: 20px; padding: 22px; border: 2px solid var(--gold); border-radius: 8px; background: rgba(168, 135, 30, .09); }
.promo-result strong { display: block; margin-bottom: 8px; color: var(--espresso); font-size: 19px; line-height: 1.3; }
.promo-result p { margin: 0 0 10px; }
.promo-result p:last-child { margin-bottom: 0; }
.promo-result.ok { border-color: var(--sage); background: rgba(74, 124, 89, .09); }
.promo-result.no { border-color: var(--terracotta); background: rgba(199, 91, 57, .09); }

/* responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .action-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
  #orders .action-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout, .tool-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-layout > aside { position: static; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .action-grid, .article-grid { grid-template-columns: 1fr; }
  #orders .action-grid { grid-template-columns: 1fr; }
  /* One card per row is wide enough for the whole label, and a phone is where
     someone is most likely to need the extra words. */
  .action-copy strong { display: block; overflow: visible; -webkit-line-clamp: none; line-clamp: none; }
  .action-copy small { overflow: visible; white-space: normal; text-overflow: clip; }
  /* Stacked one per row, there is no neighbour to line up with, so a reserved
     line would read as a gap rather than as alignment. */
  .article-card h2, .article-card h3, .article-card p { min-height: 0; }
  .brand { font-size: 22px; }
  .masthead nav { display: none; }
  .utility span { display: none; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  .help-search { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .hero { padding: 30px 0 36px; }
  .hero h1 { font-size: 31px; }
  .help-search input { font-size: 14px; }
  .help-search button { padding: 0 18px; }
  .hero-assistant { font-size: 12px; }
  .contact { padding: 26px 22px; }
  .contact-actions, .contact-actions button { width: 100%; }
  .contact-actions button { justify-content: center; }
  .article-layout article h1 { font-size: 30px; }
  .promo-tool { padding: 22px 18px; }
  .article-body details.article-accordion { padding: 0 16px; }
  .article-body details.article-accordion > summary { margin: 0 -16px; padding: 14px 16px; font-size: 15.5px; }
  .article-body div.article-column { padding: 19px; }
  .article-body div.article-column--highlight { padding: 18px; }
  /* A thumb-width button rather than a word-width one. */
  .article-body a.article-cta { display: block; text-align: center; }
}