/* GENERATED by packages/design-system/scripts/build-wp.mjs in lonestar-launchpad-com. Do not edit; regenerate.
   Source: build/resource-page/css/resource-page.css */
/* ===========================================================================
   LoneStar LaunchPad — Resource Page template.

   Imports the design-system tokens, then ONLY the components this page uses.
   No page imports a stylesheet named for a page it is not.
   =========================================================================== */

/* --- page-specific: layout and regions that belong to this page only --- */
/* ===========================================================================
   LoneStar LaunchPad — Resource Page TEMPLATE
   34 published posts use this. Nothing here may assume a single post's
   content: no fixed heights on content regions, every region optional
   except title and body.

   COUPLING RESOLVED Sep 2026: this page imports site-shell.css, not another
   page's stylesheet. The shell carries the locals, resets and focus rings every
   page shares; the components above are exactly the ones this page renders.

   TARGET (2026-09-28): the Figma template, docs/client-inputs/
   LoneStar_LaunchPad_Resource_Page_Template_Final.png — nine regions, each rendered
   only when the post has data for it. Type is the live scale (tokens).
   Square corners and no shadows throughout: the live template's 4px radii and
   card shadows are Kadence defaults, rejected by build direction.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   Un-tokenized locals — TOKEN GAPS for this page's Figma roles.
   --------------------------------------------------------------------------- */
:root {
  --lslp-x-rp-lede: 20px;            /* subtitle — between body and h4, no role */
  --lslp-x-rp-section: 20px;         /* "ABOUT", "Articles, Tools…" section heads */
  --lslp-x-rp-aside: 300px;          /* resource card column */
  --lslp-x-rp-label: 13px;           /* Figma small caps labels — not the live colhead */
  --lslp-x-rp-label-track: 0.19em;
  --lslp-x-rp-small: 12px;           /* Figma caption / disclaimer */
}

/* One column of 952px, as the Figma frame: header, hero, about + card, more, disclaimer. */
.lslp-rp .lslp-container {
  max-width: calc(var(--lslp-measure-content) + 2 * var(--lslp-x-section-x));
  padding-block: 0;
}
.lslp-rp {
  padding-block: var(--lslp-space-7) var(--lslp-space-8);
  /* Relative, so the Figma's small labels keep tight lines; the sitewide body line
     is a fixed 23.8px to match live's untargeted pages. */
  line-height: 1.4;
}
.lslp-rp__region { margin-top: var(--lslp-space-7); }

/* Shared small label: gold caps. Gold is the text gold on light grounds (AA). */
.lslp-rp__label {
  margin: 0;
  font-family: var(--lslp-font-sans);
  font-size: var(--lslp-x-rp-label);
  font-weight: 700;
  letter-spacing: var(--lslp-x-rp-label-track);
  text-transform: uppercase;
  color: var(--lslp-gold-on-light);
}
.lslp-rp__section-title {
  margin: 0 0 var(--lslp-space-5);
  font-family: var(--lslp-font-sans);
  font-size: var(--lslp-x-rp-section);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lslp-navy);
}
.lslp-rp__section-title--case { letter-spacing: 0.01em; text-transform: none; }

/* ===========================================================================
   R1 — Header: eyebrow · title · subtitle · byline between two hairlines
   =========================================================================== */
.lslp-rp__eyebrow {
  margin: 0 0 var(--lslp-space-4);
  font-family: var(--lslp-font-sans);
  font-size: var(--lslp-x-rp-label);
  font-weight: 700;
  letter-spacing: var(--lslp-x-rp-label-track);
  text-transform: uppercase;
  color: var(--lslp-red);
}
.lslp-rp__title {
  margin: 0;
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h1-size);
  line-height: 1.15;
  font-weight: 400;
  font-style: italic;
  color: var(--lslp-red);
}
.lslp-rp__subtitle {
  margin: var(--lslp-space-4) 0 0;
  font-size: var(--lslp-x-rp-lede);
  line-height: 1.45;
  color: var(--lslp-slate);
}
.lslp-rp__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lslp-space-2) 0;
  margin: var(--lslp-space-6) 0 0;
  padding-block: var(--lslp-space-3);
  border-block: 1px solid var(--lslp-line);
  font-size: var(--lslp-label-size);
  color: var(--lslp-slate);
}
.lslp-rp__byline > span + span::before {
  content: "|";
  margin-inline: var(--lslp-space-3);
  color: var(--lslp-line);
}
.lslp-rp__byline-strong { font-weight: 700; color: var(--lslp-ink); }
/* The Figma's two-tone H1: "[RESOURCE NAME]:" red italic, "[Short descriptive headline]" navy. */
.lslp-rp__title-line { font-style: normal; color: var(--lslp-navy); }

/* ===========================================================================
   R2 — Top boxes: What is it? · Who is it for? · Why is it useful?
   =========================================================================== */
.lslp-rp__boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--lslp-line);
  background: var(--lslp-limestone);
}
.lslp-rp__box { padding: var(--lslp-space-5); }
.lslp-rp__box + .lslp-rp__box { border-left: 1px solid var(--lslp-line); }
.lslp-rp__box dd { margin: var(--lslp-space-3) 0 0; font-size: 17px; line-height: 1.4; color: var(--lslp-navy); }

/* ===========================================================================
   R3 — Hero image (16:5, 2:1 below 768 — the ratio token steps)
   =========================================================================== */
.lslp-rp__hero { margin: 0; }
.lslp-rp__hero-img {
  display: block;
  width: 100%;
  aspect-ratio: var(--lslp-ratio-hero);
  object-fit: cover;
  border: 1px solid var(--lslp-line);
}
.lslp-rp__caption {
  margin-top: var(--lslp-space-2);
  font-size: var(--lslp-x-rp-small);
  color: var(--lslp-slate);
}

/* ===========================================================================
   R4 — About: the resource card floats right and the body wraps around it, then
   runs full width once it clears the card. Classic float, not a grid, so there is
   no empty column under the card. On mobile the card stacks FIRST (it is first in
   the source): the short summary before the long body.
   =========================================================================== */
.lslp-rp__about { display: flow-root; }   /* contains the float */
.lslp-rp__card {
  float: right;
  width: var(--lslp-x-rp-aside);
  margin: 0 0 var(--lslp-space-6) var(--lslp-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-4);
  padding: var(--lslp-space-5);
  border: 1px solid var(--lslp-gold);
  background: var(--lslp-white);
}
/* Boxed blocks (tables, quotes, figures, rules) keep clear of the card rather than
   running under it: a block formatting context sits beside a float. */
.lslp-rp__about .lslp-prose :is(table, blockquote, figure, pre, hr, .wp-block-group) { display: flow-root; }
.lslp-rp__card-logo {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  object-position: left center;
}
.lslp-rp__facts { display: grid; gap: var(--lslp-space-2); margin: 0; }
.lslp-rp__fact { display: flex; flex-wrap: wrap; gap: 0 var(--lslp-space-2); font-size: 15px; line-height: 1.45; }
.lslp-rp__fact dt { font-weight: 700; color: var(--lslp-ink); }
.lslp-rp__fact dt::after { content: ":"; }
.lslp-rp__fact dd { margin: 0; color: var(--lslp-slate); }
.lslp-rp__fact a { color: var(--lslp-navy); overflow-wrap: anywhere; }
.lslp-rp__card .lslp-tags { margin: 0; }
/* The prose component closes with its own hairline; here R8's rule does that job. */
.lslp-rp__about .lslp-prose { border-bottom: 0; padding-bottom: 0; }

/* ===========================================================================
   R5 — Leadership: named people only; a photo when there is one
   =========================================================================== */
.lslp-rp__lead::before,
.lslp-rp__features::before {
  content: "";
  display: block;
  border-top: 1px solid var(--lslp-line);
  margin-bottom: var(--lslp-space-7);
}
.lslp-rp__people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--lslp-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lslp-rp__person { display: flex; gap: var(--lslp-space-4); align-items: flex-start; }
.lslp-rp__person-photo {
  flex: none;
  width: 72px;
  height: 72px;
  border: 1px solid var(--lslp-line);
  border-radius: 50%;
  object-fit: cover;
  background: var(--lslp-cream);
}
.lslp-rp__person-text { display: grid; gap: var(--lslp-space-1); }
.lslp-rp__person-text p { margin: 0; }
.lslp-rp__person-name { font-size: 15px; font-weight: 700; color: var(--lslp-navy); }
.lslp-rp__person-role { font-size: var(--lslp-x-rp-small); color: var(--lslp-slate); }
.lslp-rp__person-bio { margin-top: var(--lslp-space-2) !important; font-size: 14px; line-height: 1.55; color: var(--lslp-slate); }

/* ===========================================================================
   R6 — Key Features: two columns, diamond markers
   =========================================================================== */
.lslp-rp__feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lslp-space-5) var(--lslp-space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lslp-rp__feature { position: relative; display: grid; gap: var(--lslp-space-1); padding-left: var(--lslp-space-5); }
.lslp-rp__feature::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 7px;
  height: 7px;
  background: var(--lslp-navy);
  transform: rotate(45deg);
}
.lslp-rp__feature-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--lslp-navy); }
.lslp-rp__feature-text { font-size: 14px; line-height: 1.5; color: var(--lslp-slate); }

/* ===========================================================================
   R7 — Benefits: a light panel, three numbered circles
   =========================================================================== */
.lslp-rp__benefits { padding: var(--lslp-space-6); background: var(--lslp-cream); border: 1px solid var(--lslp-line); }
.lslp-rp__benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lslp-space-6);
  margin: var(--lslp-space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lslp-benefit;
}
.lslp-rp__benefit { display: grid; justify-items: center; gap: var(--lslp-space-2); text-align: center; counter-increment: lslp-benefit; }
.lslp-rp__benefit::before {
  content: counter(lslp-benefit);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--lslp-space-2);
  border: 2px solid var(--lslp-gold-fill);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: var(--lslp-gold-on-light);
}
.lslp-rp__benefit-title { font-size: var(--lslp-x-rp-label); font-weight: 700; letter-spacing: var(--lslp-x-rp-label-track); text-transform: uppercase; color: var(--lslp-navy); }
.lslp-rp__benefit-text { font-size: 14px; line-height: 1.5; color: var(--lslp-slate); }

/* ===========================================================================
   R8 — Articles, Tools & Additional Resources: resource cards + Learn More
   =========================================================================== */
/* Section rules sit inside the content box (::before), so they end where the text ends. */
.lslp-rp__more::before,
.lslp-rp__disclaimer::before {
  content: "";
  display: block;
  border-top: 1px solid var(--lslp-line);
  margin-bottom: var(--lslp-space-7);
}
.lslp-rp__disclaimer::before { margin-bottom: var(--lslp-space-5); }
.lslp-rp__more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lslp-space-5);
  align-items: stretch;
}
.lslp-rp__link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-3);
  padding: var(--lslp-space-5);
  border: 1px solid var(--lslp-line);
  background: var(--lslp-white);
}
.lslp-rp__link-card:hover { border-color: var(--lslp-gold); }
.lslp-rp__link-title { margin: 0; font-family: var(--lslp-font-sans); font-size: 17px; font-weight: 700; line-height: 1.3; }
.lslp-rp__link-title a { color: var(--lslp-navy); text-decoration: none; }
.lslp-rp__link-title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.lslp-rp__link-card:focus-within { outline: 2px solid var(--lslp-navy); outline-offset: 2px; }
.lslp-rp__link-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lslp-slate); }
.lslp-rp__link-foot { margin: auto 0 0; font-size: var(--lslp-label-size); font-weight: 700; color: var(--lslp-red); }

.lslp-rp__learn {
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-3);
  padding: var(--lslp-space-5);
  border: 1px solid var(--lslp-line);
  background: var(--lslp-limestone);
}
.lslp-rp__learn-title { margin: 0; font-family: var(--lslp-font-sans); font-size: var(--lslp-x-rp-section); font-weight: 800; line-height: 1.3; color: var(--lslp-navy); }
.lslp-rp__learn-line { margin: 0; font-size: 15px; color: var(--lslp-slate); }
.lslp-rp__learn-line a { color: var(--lslp-navy); overflow-wrap: anywhere; }
.lslp-rp__learn-cta { margin-top: auto; }

/* ===========================================================================
   R9 — Disclaimer
   =========================================================================== */
.lslp-rp__disclaimer-label { margin: 0 0 var(--lslp-space-1); font-size: var(--lslp-x-rp-small); font-weight: 700; color: var(--lslp-gold-on-light); }
.lslp-rp__disclaimer-text { margin: 0; font-size: var(--lslp-x-rp-small); line-height: 1.6; color: var(--lslp-slate); }
.lslp-rp__disclaimer-text strong { color: var(--lslp-ink); }

/* ===========================================================================
   Closing band — slim navy line, above the footer
   =========================================================================== */
.lslp-closing-band { background: var(--lslp-navy); }
.lslp-closing-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lslp-space-3) var(--lslp-space-7);
  padding-block: var(--lslp-space-5);
}
.lslp-closing-band__line { margin: 0; font-size: 15px; color: var(--lslp-on-navy); }
.lslp-closing-band__star { color: var(--lslp-gold); }
.lslp-closing-band__link { font-size: 15px; font-weight: 700; color: var(--lslp-white); text-decoration: none; }
.lslp-closing-band__link:hover { text-decoration: underline; }
.lslp-closing-band__link:focus-visible { outline: 2px solid var(--lslp-gold); outline-offset: 4px; }

/* ===========================================================================
   Tablet and mobile
   =========================================================================== */
@media (max-width: 1024px) {
  .lslp-rp__benefit-list { gap: var(--lslp-space-5); }
  :root { --lslp-x-rp-aside: 260px; }
  .lslp-rp__card { margin-left: var(--lslp-space-6); }
  .lslp-rp__more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lslp-rp__learn { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .lslp-rp { padding-top: var(--lslp-space-6); }
  .lslp-rp__region { margin-top: var(--lslp-space-6); }
  .lslp-rp__card { float: none; width: auto; margin: 0 0 var(--lslp-space-6); }
  .lslp-rp__more-grid { grid-template-columns: 1fr; }
  .lslp-rp__boxes { grid-template-columns: 1fr; }
  .lslp-rp__box + .lslp-rp__box { border-left: 0; border-top: 1px solid var(--lslp-line); }
  .lslp-rp__feature-list { grid-template-columns: 1fr; }
  .lslp-rp__benefits { padding: var(--lslp-space-5); }
  .lslp-rp__benefit-list { grid-template-columns: 1fr; }
  .lslp-rp__byline { flex-direction: column; }
  .lslp-rp__byline > span + span::before { content: none; }
}

/* Phone: the card and Learn More website links get a 44px hit area without
   moving the text (padding offset by a negative margin). */
@media (max-width: 767px) {
  .lslp-rp__fact a, .lslp-rp__learn-line a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* Phone dock — the page's action in thumb reach (site.js shows/hides it). Square,
   flat, navy, above the home indicator; the page gets bottom room so the dock never
   covers the last line. Never shown on tablet or desktop. */
.lslp-rp__dock { display: none; }
@media (max-width: 767px) {
  .lslp-rp__dock:not([hidden]) {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lslp-space-4);
    padding: var(--lslp-space-3) var(--lslp-x-section-x) calc(var(--lslp-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--lslp-navy);
    border-top: 1px solid var(--lslp-on-navy-line);
  }
  .lslp-rp__dock-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--lslp-white);
  }
  .lslp-rp__dock-cta { flex: none; min-height: 44px; padding: var(--lslp-space-3) var(--lslp-space-4); }
  .lslp-rp { padding-bottom: calc(var(--lslp-space-8) + 72px); }
}