/* BgAI sales surface styles.
   Scope: body.bgai-studio. Reads tokens only; no color literals.
   See docs/BRAND-ALIGNMENT.md for the closed-loop rationale.
*/

body.bgai-studio {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  /* --w-chrome and chrome padding-inline now tokenized in
     tokens.css + heritage.css for the whole site (one canonical
     960px chrome with --pad-x horizontal padding). The earlier
     per-body overrides here are removed; behavior unchanged. */
}

body.bgai-studio p,
body.bgai-studio li {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
}

/* No bullets on sales pages. The Almanac uses prose, not lists —
   bold-word-led paragraphs in the "One. Two. Three." pattern. Where
   legacy markup still uses <ul>/<ol>, kill the disc and decimal
   markers so the content reads as prose blocks. Structural rewrites
   to prose are editorial work; this is the safety net that keeps
   bullet markers from ever appearing on a BgAI sales surface. */
body.bgai-studio main.sales-main ul,
body.bgai-studio main.sales-main ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

body.bgai-studio main.sales-main ul > li,
body.bgai-studio main.sales-main ol > li {
  margin: 0 0 var(--sp-sm);
  padding: 0;
}

/* Bold-led sentences inside a list item keep the Almanac's
   "One. Two. Three." rhythm when the leading token is bolded. */
body.bgai-studio main.sales-main ol > li > b:first-child,
body.bgai-studio main.sales-main ol > li > strong:first-child,
body.bgai-studio main.sales-main ul > li > b:first-child,
body.bgai-studio main.sales-main ul > li > strong:first-child {
  color: var(--ink);
}

/* BeargrassAI wordmark.
   Beargrass reads in ink; AI reads in barn. Both tokens shift
   between Morning and Lamplight, so the wordmark follows mode.
*/
/* The chrome wordmark is locked sitewide via heritage.css's
   .heritage-chrome .bgai-wm rule. Sales-specific overrides removed
   2026-05-01 to keep one wordmark across sales, learn, and Almanac
   chromes (the row 2 sub-nav carries section identity instead). */

body.bgai-studio main.sales-main {
  max-width: var(--w-wide);
  margin: 0 auto;
  /* Horizontal padding moves to the per-section rule so eyebrow,
     heading, and body all share one --w-read reading column with a
     single left edge. Without this, .fx-eyebrow's `margin: ... auto`
     centered the heading column inside a wider --w-wide section
     while body paragraphs ran full-width: the H2/body axis split
     Mark spotted in the 2026-04-27 review. */
  padding: var(--sp-3xl) 0 var(--sp-5xl);
}

/* Reading column for sales sections. Per the 2026-04-27 unification
   width pass, body content is widened to --w-wide so the main column
   matches the chrome width and the page reads as one unified width
   from chrome to article to footer. Pricing tiers and other multi-
   column blocks already at --w-wide are unaffected. */
body.bgai-studio main.sales-main > section,
body.bgai-studio main.sales-main > .sec-break,
body.bgai-studio main.sales-main > p.body-open {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Lead paragraph with a drop-cap. Mirrors body.page-essay .body-open
   in heritage.css and body.bgai-learn .body-open in bgai-learn.css.
   The first letter is a 4.4rem Fraunces capital in --warm; the rest
   of the paragraph reads as continuous prose so the cap has a
   sentence to anchor. Sales pages place a single body-open per page
   between the article-head and the first section. */
body.bgai-studio main.sales-main > p.body-open {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin-block: var(--sp-md) var(--sp-lg);
}
body.bgai-studio .body-open::first-letter {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 120, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: 4.4rem;
  line-height: 0.9;
  float: left;
  padding: 0.3rem 0.6rem 0 0;
  color: var(--warm);
}

/* Pricing tiers want the wider column so the two-tier grid breathes;
   keep the wrapping <section class="pricing-summary"> at --w-wide. */
body.bgai-studio main.sales-main > section.pricing-summary {
  max-width: var(--w-wide);
}

body.bgai-studio .sales-hero {
  padding: var(--sp-4xl) 0 var(--sp-xl);
}

body.bgai-studio .sales-hero .eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  margin: 0 0 var(--sp-sm);
}

body.bgai-studio .sales-hero h1 {
  font-family: var(--fraunces);
  font-size: var(--fs-disp-lg);
  line-height: 1.1;
  max-width: 28ch;
  margin: 0 0 var(--sp-md);
  color: var(--ink);
}

body.bgai-studio .sales-hero .deck {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 42rem;
  color: var(--ink-sec);
}

body.bgai-studio .pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-xl);
  margin: var(--sp-3xl) 0;
}

/* The fx-eyebrow header must span the full row so the three pillar
   divs below it form a clean 1-2-3 row. Without this, the eyebrow
   counts as a grid item and pushes one pillar to a second row (the
   2+1 collapse the 2026-04-23 PicViewer captures caught). */
body.bgai-studio .pillars > .fx-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-md);
}

@media (max-width: 780px) {
  body.bgai-studio .pillars {
    grid-template-columns: 1fr;
  }
}

body.bgai-studio .pillar h3 {
  font-family: var(--fraunces);
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-xs);
  color: var(--ink);
}

body.bgai-studio .pillar .pillar-kw {
  text-transform: uppercase;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.15em;
  color: var(--barn);
  font-weight: 600;
}

body.bgai-studio .pillar p {
  font-family: var(--serif);
  color: var(--ink-sec);
  line-height: 1.55;
}

/* Scoped to main.sales-main so the chrome Contact button (also
   class="cta", inside .heritage-cta in <header>) is not pushed
   down by margin-top or restyled with the in-body padding. The
   chrome variant is owned entirely by .heritage-cta a.cta in
   heritage.css. */
body.bgai-studio main.sales-main .cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.875rem var(--sp-lg);
  background: var(--barn);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--ui);
  font-weight: 600;
  border-radius: 2px;
  transition: filter 0.2s;
}

body.bgai-studio main.sales-main .cta:hover {
  filter: brightness(1.08);
}

body.bgai-studio main.sales-main .cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Prominent call CTA on /contact. Two-line filled barn-red button
   that reads "Call or text / 406-282-1478" with the number set in
   Fraunces at display size so the phone number is the visual
   anchor. Replaces the previous "<b>Phone or text.</b>" inline
   text per the 2026-04-27 contact rebuild. */
body.bgai-studio .cta--call {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: var(--sp-md) 0 var(--sp-lg);
  padding: 0.95rem 1.4rem 1.05rem;
  background: var(--barn);
  color: var(--paper);
  text-decoration: none;
  border-radius: 3px;
  transition: filter 0.2s;
  line-height: 1;
}
body.bgai-studio .cta--call:hover { filter: brightness(1.08); color: var(--paper); }
body.bgai-studio .cta--call__label {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}
body.bgai-studio .cta--call__num {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 600;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* Contact form. Plain stacked rows; the form, not the email
   address, is the path to writing Mark. The address never
   appears as text on the page (the API resolves it from env at
   send time). */
body.bgai-studio .contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}
body.bgai-studio .contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
body.bgai-studio .contact-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
}
@media (max-width: 600px) {
  body.bgai-studio .contact-form__row--split { grid-template-columns: 1fr; }
}
body.bgai-studio .contact-form__label {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-sec);
}
body.bgai-studio .contact-form input[type="text"],
body.bgai-studio .contact-form input[type="email"],
body.bgai-studio .contact-form input[type="tel"],
body.bgai-studio .contact-form textarea {
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.5;
  padding: 0.6rem 0.8rem;
  background: var(--paper-elev);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  width: 100%;
}
body.bgai-studio .contact-form input:focus-visible,
body.bgai-studio .contact-form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
body.bgai-studio .contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xs);
}
body.bgai-studio .contact-form__status {
  font-family: var(--ui);
  font-size: var(--fs-xs);
  color: var(--ink-sec);
  margin: 0;
}
body.bgai-studio .contact-form__status--ok    { color: var(--olive); }
body.bgai-studio .contact-form__status--error { color: var(--barn); }

/* About-page photo block. Figure inside main.sales-main; image fills
   the column with a generous aspect ratio, italic Fraunces caption
   below in --ink-ter. Used for the Mark-Beck-Sinopah photo. */
body.bgai-studio .about-photo {
  margin: var(--sp-lg) 0 var(--sp-xl);
}
body.bgai-studio .about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
body.bgai-studio .about-photo figcaption {
  margin-top: 0.6rem;
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 60;
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-ter);
  text-align: center;
}

/* Bloom Test promo: editorial section, not a card. Typographic
   framing via eyebrow + prose; no border, no radius, no card fill. */
body.bgai-studio .bloom-promo {
  margin: var(--sp-3xl) 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.bgai-studio .bloom-promo h2 {
  font-family: var(--fraunces);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-sm);
  color: var(--ink);
}

/* Pricing tiers: two plain columns separated by a vertical rule.
   No cards. Matches the Almanac's refusal of boxed components. */
body.bgai-studio .pricing-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-xl);
  margin: var(--sp-xl) 0;
}

@media (max-width: 780px) {
  body.bgai-studio .pricing-summary {
    grid-template-columns: 1fr;
  }
}

body.bgai-studio .pricing-summary .tier {
  /* flex column so the in-tier .cta gets pushed to the bottom via
     margin-top:auto. Without this, the shorter tier's CTA floated
     mid-column and the two "Read The Website / Read The Agent"
     buttons sat on different baselines (2026-04-27 review). */
  display: flex;
  flex-direction: column;
  padding: 0 0 0 var(--sp-lg);
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
}

body.bgai-studio .pricing-summary .tier:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Push the per-tier CTA to the bottom of the flex column so both
   tiers' buttons sit on the same baseline regardless of paragraph
   count. Overrides margin-top:1.5rem from the in-body .cta rule. */
body.bgai-studio .pricing-summary .tier .cta {
  margin-top: auto;
  align-self: flex-start;
}

body.bgai-studio .pricing-summary .tier__price {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 96, "wght" 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--ink);
  margin: var(--sp-xs) 0 var(--sp-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}
body.bgai-studio .pricing-summary .tier__price-num { color: var(--barn); }
body.bgai-studio .pricing-summary .tier__price-unit {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ink-ter);
  align-self: center;
}
body.bgai-studio .pricing-summary .tier__price-sep {
  color: var(--ink-ter);
  font-family: var(--ui);
  font-size: var(--fs-md);
  align-self: center;
}

body.bgai-studio .pricing-summary .tier h3 {
  font-family: var(--fraunces);
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-xs);
  color: var(--indigo);
}

body.bgai-studio .pricing-summary .tier p {
  font-family: var(--serif);
  color: var(--ink-sec);
  line-height: 1.5;
}

body.bgai-studio h2 {
  font-family: var(--fraunces);
  color: var(--ink);
}

body.bgai-studio a {
  color: var(--indigo);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}

body.bgai-studio a:hover {
  text-decoration-color: currentColor;
}

/* ----------------------------------------------------------------------
   Visual motion parity with the Almanac.
   The sales surface inherits .headline, .sheen-swell, .cover-flourish,
   .deck, .article-head, .fx-eyebrow, .sec-heading patterns so BgAI
   headlines breathe the same way Almanac essays do. Keyframes
   (sheenPan, axisSwell, pqShimmer, wmBreath) live in heritage.css
   and are globally available.
   ---------------------------------------------------------------------- */

body.bgai-studio .cover-flourish {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto 0;
  padding: 0 var(--pad-x);
  color: var(--olive);
}
body.bgai-studio .cover-flourish svg { width: 220px; height: 58px; }

body.bgai-studio .article-head {
  /* Hero hits --w-wide so the article-head, body sections, chrome,
     and footer all share one canonical column edge. The 2026-04-27
     unification width pass set this. */
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto var(--sp-md);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-lg);
  align-items: stretch;
}

body.bgai-studio .article-head .rail {
  /* Vertical rail (rotated 90deg via vertical-rl) so the rail reads
     as a marginalia tag on the left edge of the hero, not as a small
     horizontal eyebrow. Mirrors body.page-essay .rail. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--barn);
  border-right: 1px solid var(--rule);
  padding: var(--sp-xs) 0;
  align-self: stretch;
}

body.bgai-studio .headline {
  font-family: var(--display);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 22ch;
  color: var(--ink);
  margin: 0;
}

body.bgai-studio .headline.sheen-swell {
  font-family: var(--fraunces);
  background: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 40%,
    var(--warm) 50%,
    var(--ink) 60%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheenPan 8s ease-in-out infinite, axisSwell 12s ease-in-out infinite;
}

body.bgai-studio .deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 40;
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--ink-sec);
}

body.bgai-studio .fx-eyebrow {
  /* The section wrapper now owns the reading column (max-width and
     padding handled at main.sales-main > section above). The eyebrow
     header just sets vertical rhythm and aligns flush-left within
     the section, not re-centered with auto inline margins. */
  margin: 2.25rem 0 0.25rem;
  padding: 0;
}

body.bgai-studio .fx-eyebrow .eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--barn);
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}

body.bgai-studio .sec-heading {
  /* Section heading typography mirrors body.page-essay .sec-heading:
     Fraunces 500, --fs-3xl, --indigo so headings carry editorial
     color the way Almanac essays do. The arc class (.fx-build /
     .fx-pivot / .fx-settle) overrides per-phrase color via the
     unified settle cadence in heritage.css. */
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 40, "WONK" 1;
  font-size: var(--fs-3xl);
  line-height: 1.2;
  margin: 0 0 var(--sp-md);
  max-width: 32ch;
  color: var(--indigo);
}

/* Eyebrow color cued by the heading's arc class. Mirrors the
   page-essay rules at heritage.css:1044-1049 so sales pages and
   Almanac essays produce the same editorial chord (barn opens,
   indigo thinks, olive closes). */
body.bgai-studio header.fx-eyebrow:has(.fx-build)  .eyebrow         { color: var(--barn); }
body.bgai-studio header.fx-eyebrow:has(.fx-build)  .eyebrow::after  { background: color-mix(in srgb, var(--barn) 55%, transparent); }
body.bgai-studio header.fx-eyebrow:has(.fx-pivot)  .eyebrow         { color: var(--indigo); }
body.bgai-studio header.fx-eyebrow:has(.fx-pivot)  .eyebrow::after  { background: color-mix(in srgb, var(--indigo) 55%, transparent); }
body.bgai-studio header.fx-eyebrow:has(.fx-settle) .eyebrow         { color: var(--olive); }
body.bgai-studio header.fx-eyebrow:has(.fx-settle) .eyebrow::after  { background: color-mix(in srgb, var(--olive) 55%, transparent); }

/* All h2 on sales pages must be Fraunces. The review caught
   several headings ("How we start", "Common questions", "Where to
   from here") falling through to Public Sans because they sat
   outside the main editorial container. This rule covers them all. */
body.bgai-studio h2,
body.bgai-studio h3 {
  font-family: var(--fraunces);
  color: var(--ink);
}

body.bgai-studio main.sales-main > section > h2,
body.bgai-studio main.sales-main > section h2:not(.sec-heading) {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--sp-sm);
}

/* Sales-surface article body (used by the-website, the-agent, etc.). */
body.bgai-studio .article-body {
  max-width: var(--w-wide);
  margin: var(--sp-md) auto 0;
  padding: 0 var(--pad-x);
}

body.bgai-studio .article-body p,
body.bgai-studio .article-body li {
  font-family: var(--serif);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-sec);
}

body.bgai-studio .article-body h2 {
  font-family: var(--fraunces);
  color: var(--ink);
  margin-top: 2.5rem;
}

/* Legacy sales-hero maps onto article-head typography when used in isolation. */
body.bgai-studio .sales-hero > h1,
body.bgai-studio .sales-hero .headline {
  font-family: var(--fraunces);
  font-size: var(--fs-disp-lg);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 28ch;
  margin: 0 0 var(--sp-md);
}

/* ---------------------------------------------------------------------
   Bloom Test result styling. Scoped to body.bgai-studio. Reads tokens
   only. Added 2026-04-22 as a Step 10 follow-up when the Worker wired.
   --------------------------------------------------------------------- */

body.bgai-studio .bloom-results:empty { display: none; }

body.bgai-studio .bloom-result {
  max-width: var(--w-wide);
  margin: var(--sp-xl) auto;
  padding: var(--sp-lg) var(--pad-x);
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
}
body.bgai-studio .bloom-result--error { border-color: var(--barn); }

/* ============================================================
   Bloom Test URL input. Editorial pill with prefix and a real
   submit button that reads as the call to action.
   ============================================================ */
body.bgai-studio .bloom-form {
  max-width: var(--w-wide);
  margin: var(--sp-lg) auto var(--sp-md);
  padding: 0 var(--pad-x);
}
body.bgai-studio .bloom-input__label {
  display: block;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--barn);
  margin: 0 0 0.6rem;
}
body.bgai-studio .bloom-input__row {
  display: flex;
  align-items: stretch;
  background: var(--paper-elev);
  border: 1px solid rgba(35, 31, 26, 0.18);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.bgai-studio .bloom-input__row:focus-within {
  border-color: var(--barn);
  box-shadow: 0 0 0 3px rgba(166, 75, 59, 0.18);
}
body.bgai-studio .bloom-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem 0 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  color: var(--ink-ter);
  background: transparent;
  border-right: 1px solid rgba(35, 31, 26, 0.12);
  user-select: none;
}
body.bgai-studio .bloom-input__field {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 0;
  background: transparent;
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
}
body.bgai-studio .bloom-input__field::placeholder {
  color: var(--ink-ter);
  font-style: italic;
}
body.bgai-studio .bloom-input__submit {
  flex: 0 0 auto;
  padding: 0.95rem 1.5rem;
  border: 0;
  background: var(--barn);
  color: var(--paper);
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
body.bgai-studio .bloom-input__submit:hover { background: #8e3f30; }
body.bgai-studio .bloom-input__submit:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) {
  body.bgai-studio .bloom-input__row { flex-wrap: wrap; }
  body.bgai-studio .bloom-input__field { flex-basis: 60%; }
  body.bgai-studio .bloom-input__submit {
    flex: 1 1 100%;
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
}

/* ============================================================
   Bloom Test loading state. Buy-us-time pattern.
   While the /api/check round trip is in flight (~10 seconds),
   a sunrise SVG cycles in the left panel and the steps step
   through the right panel. Replaces the bloom-flower animation
   from the old beargrassai.com with the new visual identity.
   ============================================================ */
body.bgai-studio .bloom-result--loading {
  border: 0;
  padding: 0;
  background: transparent;
}
body.bgai-studio .bloom-loading {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  background: var(--paper-elev);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  min-height: 320px;
}
body.bgai-studio .bloom-loading__sunrise {
  background: #0a1024;
  position: relative;
  overflow: hidden;
}
body.bgai-studio .bloom-loading__sunrise object {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.bgai-studio .bloom-loading__panel {
  padding: var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.bgai-studio .bloom-loading__eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--barn);
  margin: 0 0 var(--sp-2xs);
}
body.bgai-studio .bloom-loading__h {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 144, "wght" 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--sp-xs);
  word-break: break-word;
}
body.bgai-studio .bloom-loading__deck {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  margin: 0 0 var(--sp-md);
  line-height: 1.5;
}
body.bgai-studio .bloom-loading__deck em { color: var(--ink); font-style: italic; }
body.bgai-studio .bloom-loading__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.bgai-studio .bloom-loading__step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--ui);
  font-size: var(--fs-sm);
  color: var(--ink-ter);
  transition: color 0.4s ease;
}
body.bgai-studio .bloom-loading__step.is-active { color: var(--ink); font-weight: 600; }
body.bgai-studio .bloom-loading__step.is-done { color: var(--ink-sec); }
body.bgai-studio .bloom-loading__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
  position: relative;
}
body.bgai-studio .bloom-loading__step.is-active .bloom-loading__dot {
  background: var(--barn);
  opacity: 1;
  animation: bloomLoadingPulse 1.6s ease-in-out infinite;
}
body.bgai-studio .bloom-loading__step.is-done .bloom-loading__dot {
  background: var(--olive);
  opacity: 1;
}
@keyframes bloomLoadingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 75, 59, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(166, 75, 59, 0); }
}
@media (max-width: 720px) {
  body.bgai-studio .bloom-loading {
    grid-template-columns: 1fr;
  }
  body.bgai-studio .bloom-loading__sunrise {
    aspect-ratio: 16/9;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.bgai-studio .bloom-loading__step.is-active .bloom-loading__dot {
    animation: none;
  }
}

body.bgai-studio .bloom-result__head { margin-bottom: 1rem; }
body.bgai-studio .bloom-result__eyebrow {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-ter);
}
body.bgai-studio .bloom-result__band {
  font-family: var(--fraunces);
  font-size: var(--fs-3xl);
  margin: var(--sp-3xs) 0 var(--sp-xs);
  color: var(--ink);
}
body.bgai-studio .bloom-result__score {
  font-family: var(--ui);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
  margin: 0;
}

body.bgai-studio .bloom-result--bloom .bloom-result__band { color: var(--olive); }
body.bgai-studio .bloom-result--bud   .bloom-result__band { color: var(--indigo); }
body.bgai-studio .bloom-result--stem  .bloom-result__band { color: var(--warm); }
body.bgai-studio .bloom-result--seed  .bloom-result__band { color: var(--barn); }

body.bgai-studio .bloom-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gap-sm);
}
body.bgai-studio .bloom-check {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  grid-template-areas:
    "marker label"
    "marker detail";
  gap: 0.15rem 0.75rem;
  padding: var(--sp-sm) 0;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
}
body.bgai-studio .bloom-check__marker {
  grid-area: marker;
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: start;
}
body.bgai-studio .bloom-check__label { grid-area: label; font-weight: 600; color: var(--ink); }
body.bgai-studio .bloom-check__detail { grid-area: detail; color: var(--ink-sec); font-size: var(--fs-sm); }
body.bgai-studio .bloom-check--ok   .bloom-check__marker { color: var(--olive); }
body.bgai-studio .bloom-check--miss .bloom-check__marker { color: var(--barn); }

body.bgai-studio .bloom-result__foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--fs-sm);
  color: var(--ink-sec);
}

/* Speed score callout (PageSpeed mobile). */
body.bgai-studio .bloom-speed {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: var(--sp-md) 0;
}
body.bgai-studio .bloom-speed__score {
  font-family: var(--fraunces);
  font-variation-settings: "opsz" 96, "wght" 600;
  font-size: var(--fs-disp-md);
  color: var(--indigo);
}
body.bgai-studio .bloom-speed__score--unavail { color: var(--ink-ter); }
body.bgai-studio .bloom-speed__label {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-ter);
}

/* Tier breakdown bars. Foundation / Social / Structured / Advanced. */
body.bgai-studio .bloom-tiers {
  display: grid;
  gap: var(--gap-sm);
  margin: var(--sp-md) 0;
}
body.bgai-studio .bloom-tier {
  display: grid;
  gap: 0.3rem;
}
body.bgai-studio .bloom-tier__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--ui);
  font-size: var(--fs-xs);
  color: var(--ink-sec);
}
body.bgai-studio .bloom-tier__name {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
body.bgai-studio .bloom-tier__bar {
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
body.bgai-studio .bloom-tier__fill {
  height: 100%;
  background: var(--indigo);
  transition: width 0.4s ease;
}

/* Priority actions block (top 5 fixes). */
body.bgai-studio .bloom-actions {
  margin: var(--sp-lg) 0;
  padding: var(--sp-md) var(--sp-md);
  border-left: 3px solid var(--barn);
  background: color-mix(in srgb, var(--barn) 6%, transparent);
}
body.bgai-studio .bloom-actions h3 {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--barn);
  margin: 0 0 var(--sp-sm);
}
body.bgai-studio .bloom-actions__list {
  margin: 0;
  padding-left: 1.25rem;
  font-family: var(--serif);
  font-size: var(--fs-sm);
  color: var(--ink);
}
body.bgai-studio .bloom-actions__list li { margin-bottom: 0.35rem; }

/* "What is already in place" collapsible block. */
body.bgai-studio .bloom-check-list-wrap summary {
  font-family: var(--ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-ter);
  cursor: pointer;
  padding: var(--sp-sm) 0;
}


/* ============================================================
   SSS hero eyebrow — anchor-word emphasis
   On product pages, the eyebrow word that "owns" the page reads
   at full color; the other two are dimmed. Indicates "you are
   here in the system" without restructuring the page hero.
   How We Build keeps all three at full weight (no anchor class).
   ============================================================ */
.sss-eyebrow--anchor-speedy .sss-eyebrow__word--safe,
.sss-eyebrow--anchor-speedy .sss-eyebrow__word--simple,
.sss-eyebrow--anchor-safe   .sss-eyebrow__word--speedy,
.sss-eyebrow--anchor-safe   .sss-eyebrow__word--simple,
.sss-eyebrow--anchor-simple .sss-eyebrow__word--speedy,
.sss-eyebrow--anchor-simple .sss-eyebrow__word--safe {
  color: var(--ink-ter);
  opacity: 0.55;
}
.sss-eyebrow--anchor-speedy .sss-eyebrow__sep:nth-of-type(2),
.sss-eyebrow--anchor-safe   .sss-eyebrow__sep,
.sss-eyebrow--anchor-simple .sss-eyebrow__sep {
  opacity: 0.55;
}