/* 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;
  --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 ul, .article-body ol { padding-left: 22px; }
.article-body li { margin-bottom: 9px; }
.article-body a { color: var(--gold); }
.article-body code { background: var(--tan); border-radius: 3px; padding: 1px 5px; font-size: 14px; }
.article-callout {
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 5px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--tan);
}
.article-callout strong { display: block; margin-bottom: 4px; color: var(--espresso); }

.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; }
}