/* =========================================================
   ThrottleReady — components
   Transcribed verbatim from design_handoff_throttleready/design_files/styles.css.
   Page-specific CSS lives in assets/css/pages/*.css and is enqueued
   conditionally; this file is everything shared.
   ========================================================= */

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo svg{display:block;flex:none;}
.logo .wm{font-family:var(--anton);text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:22px;color:var(--char);}
.logo .wm .hl{background:var(--hivis);padding:0 4px;}
.logo.on-dark .wm{color:#fff;}
.logo.on-dark .wm .hl{background:var(--hivis);color:var(--char);}
.logo--footer .wm{font-size:18px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.01em;
  padding:13px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  transition:transform .12s ease, background .15s, color .15s, border-color .15s;white-space:nowrap;
  /* .btn is used on <a> and on <button>; a button needs these or it keeps the
     user agent's cursor and background. */
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--hivis);color:var(--char);}
.btn-primary:hover{background:var(--hivis-2);}
.btn-dark{background:var(--char);color:#fff;}
.btn-dark:hover{background:var(--char-2);}
.btn-ghost{background:transparent;color:var(--char);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--char);}
.btn-ghost.on-dark{color:#fff;border-color:var(--line-d);}
.btn-ghost.on-dark:hover{border-color:#fff;}
.btn-lg{padding:17px 30px;font-size:15px;}
.btn-anton{font-family:var(--anton);text-transform:uppercase;letter-spacing:.02em;font-weight:400;}
.btn-block{width:100%;}
/* On the hi-vis CTA band the ghost button needs darker edges to stay legible.
   The mockups did this with a repeated inline style; it belongs here. */
.foot-cta .btn-ghost{border-color:#3c4a14;color:#33420f;}
.foot-cta .btn-ghost:hover{border-color:#1f2a08;}

/* ---------- Site header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--char);color:#fff;border-bottom:1px solid var(--line-d);}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;}
.site-nav{display:flex;align-items:center;gap:26px;}
.site-nav a{font-size:14px;font-weight:600;color:#C9CAD0;transition:color .15s;white-space:nowrap;}
.site-nav a:hover,.site-nav a.active{color:#fff;}
/* WordPress marks the current item itself, so .active never has to be authored. */
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current_page_item > a{color:#fff;}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px;}
.head-actions{display:flex;align-items:center;gap:12px;}
.head-actions .login{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;}
.burger{display:none;background:none;border:none;flex-direction:column;gap:5px;padding:8px;}
.burger span{width:22px;height:2px;background:#fff;display:block;}

/* ---------- Search bar ---------- */
.searchbar{display:flex;background:#fff;border-radius:var(--r);padding:7px;gap:6px;box-shadow:var(--shadow-lg);align-items:stretch;}
.searchbar .field{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 16px;min-width:0;border-radius:var(--r-sm);}
.searchbar .field:hover{background:var(--concrete);}
.searchbar .field .lab{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px;display:flex;align-items:center;gap:5px;}
.searchbar .field input,.searchbar .field select{border:none;background:none;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--char);width:100%;padding:0;outline:none;}
.searchbar .divider{width:1px;background:var(--line);align-self:stretch;margin:6px 0;}
.searchbar .search-btn{border:none;background:var(--hivis);color:var(--char);font-family:var(--anton);text-transform:uppercase;font-size:16px;letter-spacing:.02em;padding:0 30px;border-radius:var(--r-sm);display:flex;align-items:center;gap:8px;}
.searchbar .search-btn:hover{background:var(--hivis-2);}

.searchbar.compact{box-shadow:none;border:1.5px solid var(--line);padding:5px;}
.searchbar.compact .search-btn{padding:0 20px;font-size:14px;}

/* ---------- Course pill ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;padding:5px 11px;border-radius:7px;background:var(--concrete);color:var(--char);border:1px solid var(--line);white-space:nowrap;}
.pill.solid{background:var(--char);color:#fff;border-color:var(--char);}
.pill.ghost-d{background:transparent;color:#fff;border-color:var(--line-d);}

/* ---------- Cert badge ----------
   Four self-declared DVSA badges (spec §5.2). The "verified" state arrives in
   Phase 1 as a separate admin-only attribute — see the port plan §5. */
.cert{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11.5px;letter-spacing:.01em;padding:5px 10px 5px 8px;border-radius:7px;white-space:nowrap;}
.cert[title]{cursor:help;}
.cert svg{flex:none;}
.cert-cbt{background:var(--green-soft);color:#157a4f;}
.cert-das{background:var(--green);color:#fff;}
.cert-school{background:var(--char);color:var(--hivis);}
.cert-adv{background:#FFE9DF;color:#C13C0E;}
.cert.on-dark.cert-cbt{background:rgba(43,182,115,.18);color:#7fe0b3;}

/* ---------- Stars ---------- */
.stars{display:inline-flex;align-items:center;gap:2px;}
.stars svg{width:15px;height:15px;}
.rating-inline{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;}
.rating-inline .count{color:var(--muted);font-weight:600;}

/* ---------- Result card ----------
   HivePress renders a vertical tile by default; Phase 1 overrides its
   listing-view-block template to emit this markup instead. */
.rcard{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;transition:border-color .15s, box-shadow .15s, transform .12s;}
.rcard:hover{border-color:var(--char);box-shadow:var(--shadow);}
.rcard .photo{width:128px;height:128px;border-radius:var(--r);flex:none;}
.rcard .body{flex:1;min-width:0;display:flex;flex-direction:column;}
.rcard .name{font-family:var(--anton);text-transform:uppercase;font-size:21px;letter-spacing:.01em;line-height:1;}
.rcard .loc{font-size:13px;color:var(--muted);margin-top:5px;font-weight:500;}
.rcard .excerpt{font-size:13.5px;color:#43454c;margin:9px 0;line-height:1.45;}
.rcard .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto;}

/* ---------- Generic card ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);}

/* ---------- Forms ---------- */
.input,.textarea,.selectf{width:100%;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--char);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:13px 14px;outline:none;transition:border-color .15s;}
.input:focus,.textarea:focus,.selectf:focus{border-color:var(--char);}
.textarea{resize:vertical;min-height:120px;line-height:1.5;}
.flabel{font-weight:700;font-size:13px;margin-bottom:7px;display:block;}
.fhint{font-size:12px;color:var(--muted);margin-top:6px;}

/* ---------- Footer ---------- */
/* Full-bleed CTA band. Appears on 7 of 14 designed pages with different copy
   each time, so it is a template part / block pattern, NOT part of footer.php. */
.foot-cta{background:var(--hivis);}
.foot-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;padding-top:56px;padding-bottom:56px;flex-wrap:wrap;}
.foot-cta .eyebrow{color:#46571c;margin-bottom:14px;}
.foot-cta h2{font-family:var(--anton);text-transform:uppercase;font-size:clamp(30px,4.6vw,52px);margin:0 0 10px;letter-spacing:.01em;line-height:.92;color:var(--char);}
.foot-cta p{margin:0;font-size:15.5px;color:#33420f;font-weight:600;max-width:46ch;line-height:1.5;}
.foot-cta .cta-actions{display:flex;gap:12px;flex:none;flex-wrap:wrap;}
@media (max-width:760px){.foot-cta-inner{padding-top:40px;padding-bottom:40px;}.foot-cta .cta-actions{width:100%;}.foot-cta .cta-actions .btn{flex:1;}}

.site-foot{background:var(--char);color:#C9CAD0;padding:64px 0 36px;}
.site-foot a{color:#C9CAD0;font-size:14px;font-weight:500;}
.site-foot a:hover{color:#fff;}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px;}
.foot-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 16px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-blurb{font-size:13.5px;line-height:1.6;margin:16px 0 0;max-width:30ch;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-d);margin-top:48px;padding-top:24px;font-size:12.5px;color:var(--muted-2);flex-wrap:wrap;gap:12px;}

/* ---------- Mobile bottom sheet / overlay ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(21,22,26,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s;}
.sheet-backdrop.open{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;z-index:81;padding:8px 20px 28px;transform:translateY(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);max-height:88vh;overflow:auto;}
.sheet.open{transform:translateY(0);}
.sheet .grab{width:40px;height:4px;border-radius:99px;background:var(--line-2);margin:8px auto 16px;}

/* ---------- Mobile slide-in menu (shared across all pages) ---------- */
.mob-menu{position:fixed;inset:0;background:var(--char);z-index:60;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;padding:20px;}
.mob-menu.open{transform:translateX(0);}
.mob-menu .mhead{display:flex;justify-content:space-between;align-items:center;height:48px;}
.mob-menu nav{display:flex;flex-direction:column;gap:4px;margin-top:24px;}
.mob-menu nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.mob-menu nav a{font-family:var(--anton);text-transform:uppercase;font-size:30px;color:#fff;padding:12px 0;border-bottom:1px solid var(--line-d);display:block;}
.mob-menu .mactions{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.xclose{background:none;border:none;color:#fff;font-size:26px;line-height:1;cursor:pointer;}

/* ---------- Responsive: mobile ---------- */
/* header collapses to menu button earlier so it never crowds at medium widths */
@media (max-width:980px){
  .site-nav,.head-actions .desk{display:none;}
  .burger{display:flex;}
}

@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .searchbar{flex-direction:column;padding:8px;gap:4px;}
  .searchbar .divider{display:none;}
  .searchbar .field{padding:11px 14px;}
  .searchbar .search-btn{padding:15px;width:100%;justify-content:center;}
  .rcard{flex-direction:column;}
  .rcard .photo{width:100%;height:180px;}
  .hide-m{display:none !important;}
  .hide-d{display:revert;}
}

/* ---------- Legal documents ---------- */
.legal-body { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; }
.legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; }
.legal-nav__item {
	padding: 10px 12px; border-radius: 9px; font-weight: 700; font-size: 14px;
	color: var(--muted); text-decoration: none;
}
.legal-nav__item:hover { background: var(--concrete); color: var(--char); }
.legal-nav__item.is-current { background: var(--char); color: #fff; }

.legal-doc__meta {
	font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--muted); margin: 0 0 22px;
}
.legal-doc .entry-content { max-width: 72ch; }
.legal-doc .entry-content h2 {
	font-family: var(--anton); text-transform: uppercase;
	font-size: clamp(20px, 2.6vw, 26px); margin: 32px 0 10px; letter-spacing: .01em;
}
.legal-doc .entry-content p,
.legal-doc .entry-content li { font-size: 15.5px; line-height: 1.72; color: #3a3c43; }
.legal-doc .entry-content ul { padding-left: 20px; }
.legal-doc .entry-content li { margin-bottom: 8px; }

@media (max-width: 899px) {
	.legal-body { grid-template-columns: 1fr; gap: 24px; }
	.legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* Breadcrumb.
   Shared by the location pages and the article hero, both of which sit on the
   charcoal band — these colours assume a dark background. */
.breadcrumb { font-size: 12.5px; color: #8a8c93; padding: 0 0 18px; display: flex; gap: 8px; font-weight: 600; flex-wrap: wrap; }
.breadcrumb a { color: #8a8c93; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: #3a3c43; }
.breadcrumb .cur { color: #fff; }

/* Link column.
   The wrapped pill list of internal links, shared by the location pages and
   the course pages — the long tail gets crawled through it, so it is a
   component rather than one page's decoration. */
.lnk-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 14px; }
.lnk-col .ll { display: flex; flex-wrap: wrap; gap: 8px; }
.lnk-col .ll a { font-size: 13.5px; font-weight: 700; padding: 8px 13px; border-radius: 8px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--char); }
.lnk-col .ll a:hover { border-color: var(--char); }
.lnk-col .ll a .count {
	display: inline-block; margin-left: 7px; padding: 1px 7px;
	background: var(--concrete); border-radius: 99px;
	font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}
.lnk-col .ll a:hover .count { background: var(--char); color: #fff; }

/* Provider tile.
   The .feat card from the home page's featured row, reused by the course
   pages' "certified providers" grid — so it belongs here rather than in one
   page's stylesheet. Each page supplies its own grid. */
.feat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: .15s; display: block; text-decoration: none; }
.feat:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.feat .img { height: 158px; position: relative; background: var(--concrete); }
.feat .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat .ft-badge { position: absolute; top: 12px; left: 12px; background: var(--char); color: var(--hivis); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.feat .fbody { padding: 16px; }
.feat .fname { font-family: var(--anton); text-transform: uppercase; font-size: 19px; letter-spacing: .01em; color: var(--char); }
.feat .floc { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }
.feat .frow { display: flex; align-items: center; gap: 8px; margin: 11px 0; }
.feat .frow .muted { font-size: 13px; }
.feat .fpills { display: flex; gap: 6px; flex-wrap: wrap; }

/* =========================================================
   Forms
   From design_files/contact.html. The contact form is the only
   one of ours the theme styles directly — HivePress's own forms
   go through the mapping layer in hivepress.css.
   ========================================================= */

.fstack { display: flex; flex-direction: column; gap: 18px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fitem label { font-weight: 700; font-size: 13px; margin-bottom: 7px; display: block; }
.fsubmit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* .input, .textarea and .fhint are already defined above, from the Phase 0
   transcription of styles.css. Only what the contact form adds is here. */
.fhint a { color: var(--char); font-weight: 600; text-decoration: underline; }
.fsubmit .fhint { margin-top: 0; }

/* Topic chips.
   The design draws these as divs with a class toggled by script. They are
   radios here with the input visually hidden but still focusable, so the
   group works from the keyboard and submits without JavaScript. */
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { position: relative; font-weight: 700; font-size: 13px; border: 1.5px solid var(--line-2); border-radius: 8px; padding: 9px 14px; cursor: pointer; user-select: none; transition: background .12s, color .12s, border-color .12s; }
.tchip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.tchip:hover { border-color: var(--char); }
.tchip:has( input:checked ) { background: var(--char); color: #fff; border-color: var(--char); }
.tchip:has( input:focus-visible ) { outline: 2px solid var(--char); outline-offset: 2px; }

/* The honeypot. Off-screen rather than display:none — a bot that skips
   hidden fields is exactly the bot this is trying to catch. */
.tr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Notices are at the end of this file — .form-note is one of the classes
   that share the treatment. */

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

/* Course card.
   The home page's course grid and the /courses/ index render the same card,
   so it lives here. Each page keeps its own responsive column count. */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ccard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; transition: .15s; min-height: 178px; text-decoration: none; }
.ccard:hover { border-color: var(--char); transform: translateY(-3px); box-shadow: var(--shadow); }
.ccard .abbr { font-family: var(--anton); text-transform: uppercase; font-size: 30px; line-height: 1; color: var(--char); }
.ccard .cn { font-weight: 800; font-size: 14px; color: var(--char); }
.ccard .cd { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; }
.ccard .cmeta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.ccard .price { font-weight: 800; font-size: 13px; color: var(--char); }
.ccard .arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--concrete); display: flex; align-items: center; justify-content: center; transition: .15s; color: var(--char); }
.ccard:hover .arrow { background: var(--hivis); }
.ccard--dark { background: var(--char); border-color: var(--char); }
.ccard--dark .abbr, .ccard--dark .price { color: var(--hivis); }
.ccard--dark .cn { color: #fff; }
.ccard--dark .cd { color: #9A9CA2; }
.ccard--dark .arrow { background: var(--hivis); }
.ccard--dark:hover { border-color: var(--hivis); }

@media (max-width: 1080px) {
	.course-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* =========================================================
   Shared marketing components
   Used by the front page, the course pages and the four
   marketing pages, so they live here rather than in whichever
   page's stylesheet happened to need them first.
   ========================================================= */

/* Centred section header. */
.section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.section-head .sec-label { text-align: center; }
.section-head h2 { font-family: var(--anton); text-transform: uppercase; font-size: clamp(28px, 4.5vw, 44px); margin: 0 0 12px; letter-spacing: .01em; }
.section-head p { font-size: 16px; color: #43454c; margin: 0; line-height: 1.55; }

/* The counter strip. Overlaps the charcoal hero above it. */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; margin-top: -44px; position: relative; z-index: 2; }
.sb-item { background: #fff; padding: 26px 22px; text-align: center; }
.sb-item .n { font-family: var(--anton); font-size: clamp(26px, 3.4vw, 36px); line-height: 1; color: var(--char); }
.sb-item .l { font-size: 12.5px; color: var(--muted); margin-top: 7px; font-weight: 600; }

/* Numbered steps. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; position: relative; }
.step .num { font-family: var(--anton); font-size: 15px; color: var(--char); background: var(--hivis); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.step h3 { font-family: var(--anton); text-transform: uppercase; font-size: 22px; margin: 0 0 9px; letter-spacing: .01em; }
.step p { margin: 0; font-size: 14.5px; color: #43454c; line-height: 1.5; }

/* Ticked list. */
.tick-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.tick-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: #2c2e34; }
.tick-list li svg { flex: none; margin-top: 2px; color: var(--green); }


/* Accordion.
   Closed height is 0 and open is a generous cap rather than auto, because
   max-height is the only one of the two that animates. The cap is well clear
   of the longest answer; one that outgrew it would clip, which is the trade
   the design's own transition makes. */
/* The accordion. Closed height is 0 and open is a generous cap rather than
   auto, because max-height is the only one of the two that animates. The cap
   is well clear of the longest answer; an answer that outgrew it would be
   clipped, which is the trade the design's own transition makes. */
.faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 800; font-size: 16px; gap: 16px; }
.faq-q .plus { font-size: 22px; color: var(--muted); transition: transform .2s; flex: none; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { font-size: 14.5px; color: #43454c; line-height: 1.62; max-height: 0; overflow: hidden; transition: max-height .25s, margin .25s; }
.faq-item.open .faq-a { max-height: 600px; margin-top: 11px; }

@media (prefers-reduced-motion: reduce) {
	.faq-a, .faq-q .plus { transition: none; }
}



/* Split section header — label and heading left, a link right. */
.sec-head, .rel-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; gap: 20px; flex-wrap: wrap; }
.sec-head .display, .rel-head .display { font-size: clamp(30px, 5vw, 46px); margin: 0; }

@media (max-width: 900px) {
	.steps { grid-template-columns: 1fr; }
}

/* Closing prose block, and the accordion's wrapper. Both are used by more
   than one page template. */
.seo-block { max-width: 760px; }
.seo-block h2 { font-family: var(--anton); text-transform: uppercase; font-size: 30px; margin: 0 0 18px; letter-spacing: .01em; }
.seo-block p { font-size: 15.5px; line-height: 1.7; color: #43454c; margin: 0 0 16px; }
.faq { max-width: 760px; margin: 0 auto; }


/* =========================================================
   Notices
   One treatment for every success and error on the site,
   whoever emits it: HivePress's form messages, the contact
   form's own, and anything of ours that needs to say
   something went well or did not.

   The icon is a CSS background rather than markup, because
   HivePress writes its messages from JavaScript and there is
   nowhere to put an element. Each is inline SVG in a data URI
   — no request, and it inherits nothing it should not.
   ========================================================= */

.tr-notice,
.form-note {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	border: 1px solid var(--line-2);
	background: var(--paper);
	border-radius: var(--r);
	padding: 14px 16px;
	margin: 0 0 16px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--char);
}

.tr-notice::before,
.form-note::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	/* Neutral: an information mark. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343454c' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.5' r='1' fill='%2343454c' stroke='none'/%3E%3C/svg%3E");
}

/* Success. */
.tr-notice--ok,
.form-note--ok {
	background: var(--green-soft);
	border-color: #bfe6d2;
	color: var(--green-ink);
}

.tr-notice--ok::before,
.form-note--ok::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6B45' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9' stroke-width='2'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
}

/* Error. */
.tr-notice--bad,
.form-note--bad {
	background: var(--orange-soft);
	border-color: #f6cbb8;
	color: var(--orange-ink);
}

.tr-notice--bad::before,
.form-note--bad::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A3412' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* A link inside a notice should still read as a link. */
.tr-notice a,
.form-note a { color: inherit; text-decoration: underline; font-weight: 800; }

@media (prefers-contrast: more) {
	.tr-notice,
	.form-note { border-width: 2px; }
}