/*
  Audience pages: /agents, /sales/contractors/, /sales/inspection-firms/.
  Layout only. Colors, type and components come from /assets/grainwork.css.
*/

/* Hero */
.aud-hero { padding-bottom: 0; }
.aud-hero .split { align-items: end; }
.aud-hero__copy { padding-bottom: clamp(48px, 6vw, 88px); }
.aud-hero__copy .status { margin-bottom: 20px; }
/* The system's .note is a boxed callout; inside .actions it should read as a plain line. */
.actions > .note { padding: 0; border: 0; border-radius: 0; background: none; }
.aud-hero .actions .note { max-width: 34rem; }
.aud-note-lines span { display: block; }

/* Agents hero: copy on the left, the top of a real briefing on the right.
   On narrow screens the lede and actions come before the phone, so the first screen
   says what Grainwork does and which button to press. */
.aud-hero--media { padding-bottom: clamp(48px, 6vw, 88px); }
.aud-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "eyebrow media"
    "title media"
    "lede media"
    "actions media";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.aud-hero__eyebrow { grid-area: eyebrow; }
.aud-hero__title { grid-area: title; }
.aud-hero__lede { grid-area: lede; margin-top: 24px; }
.aud-hero__actions { grid-area: actions; }
.aud-phone {
  grid-area: media;
  align-self: center;
  justify-self: end;
  width: min(100%, 420px);
  margin: 0;
}
.aud-phone .phone {
  width: 100%;
  margin: 0;
  padding-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
}
.aud-phone .phone img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.aud-phone figcaption { margin: 14px 0 0; }
@media (max-width: 900px) {
  .aud-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lede" "actions" "media";
    grid-template-rows: none;
  }
  .aud-phone { justify-self: start; width: min(100%, 420px); margin-top: 36px; }
  .aud-hero__lede { margin-top: 20px; }
}
/* Very narrow screens and enlarged text: keep the headline to a few lines. */
@media (max-width: 340px) {
  .aud-hero__title { font-size: clamp(2rem, 9vw, 2.375rem); }
}
@media (max-width: 480px) {
  .aud-hero .actions .button { width: 100%; }
}

/* Numbers from one real briefing */
.aud-numbers {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-raised);
}
.aud-numbers__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.aud-numbers__list li {
  padding: clamp(24px, 3.4vw, 40px) clamp(16px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.aud-numbers__list li:first-child { border-left: 0; padding-left: 0; }
.aud-numbers__list strong {
  display: block;
  font: 560 clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)/1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--heading);
}
.aud-numbers__list span {
  display: block;
  margin-top: 10px;
  max-width: 16rem;
  color: var(--muted);
}
.aud-numbers .caption { padding: 0 0 24px; }
@media (max-width: 720px) {
  .aud-numbers__list { grid-template-columns: minmax(0, 1fr); }
  .aud-numbers__list li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .aud-numbers__list li:first-child { border-top: 0; }
  .aud-numbers__list strong { font-size: 2.25rem; }
  .aud-numbers__list span { margin-top: 0; }
}

/* A real product screen in a light window frame */
.aud-screen {
  margin: clamp(40px, 6vw, 64px) 0 0;
}
.aud-screen__frame {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.aud-screen img { width: 100%; }
.aud-screen--split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.aud-screen--split figcaption { padding-top: clamp(8px, 2vw, 32px); }
.aud-screen--split figcaption { margin: 0; }
.aud-screen--split figcaption strong {
  display: block;
  margin-bottom: 8px;
  font: 560 var(--text-h3)/1.25 var(--serif);
  color: var(--heading);
}
@media (max-width: 900px) {
  .aud-screen--split { grid-template-columns: minmax(0, 1fr); }
}

/* Use-case cards */
.aud-cases { align-items: stretch; }
.aud-cases .card > .status { align-self: flex-start; }
.aud-cases .card .aud-fact {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.aud-cases .card .aud-fact strong { color: var(--heading); }
.aud-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 0;
}
.aud-pair figure { margin: 0; }
.aud-pair img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--kraft);
}
.aud-pair figcaption {
  margin-top: 6px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--muted);
}
.aud-cases .card .caption { color: var(--faint); }
.aud-case-wide {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "text pair" "notes pair";
  gap: 20px clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 32px);
}
.aud-case-wide__text { grid-area: text; display: flex; flex-direction: column; gap: 14px; }
.aud-case-wide__text .status { align-self: flex-start; }
.aud-case-wide .aud-pair { grid-area: pair; align-self: center; gap: 14px; margin: 0; }
.aud-case-wide__notes { grid-area: notes; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 480px) {
  .aud-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .aud-case-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "pair" "notes"; }
}

/* Brand and pilot, side by side */
.aud-offer { align-items: stretch; }
.aud-offer .panel .status,
.aud-offer .card .status { align-self: flex-start; }
.aud-offer .panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.aud-offer .panel p { color: var(--muted); font-size: var(--text-lede); line-height: 1.5; max-width: 30rem; }
.aud-offer .checklist { margin-top: 4px; }
.aud-offer .actions { margin-top: auto; padding-top: 12px; }

/* Price card */
.aud-price {
  align-self: center;
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.aud-price > .status,
.aud-price > .aud-price__label { align-self: flex-start; }
.aud-price__label {
  font: 600 var(--text-eyebrow)/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.aud-price__amount {
  display: block;
  font: 560 clamp(3.25rem, 2.4rem + 3vw, 4.5rem)/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--heading);
}
.aud-price__amount small {
  display: block;
  margin-top: 10px;
  font: 600 var(--text-h4)/1.35 var(--sans);
  letter-spacing: 0;
  color: var(--ink);
}
.aud-price ul { margin: 0; padding: 0; list-style: none; }
.aud-price li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--muted); }
.aud-price li:last-child { padding-bottom: 0; }

/* Price sources: the labels contractors see on every estimate line */
.aud-sources { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.aud-sources > li {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 12px clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3vw, 32px) 0;
  border-bottom: 1px solid var(--line);
}
.aud-sources h3 { font-size: 1.375rem; }
.aud-sources p { color: var(--muted); max-width: var(--max-text); }
.aud-labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aud-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--kraft);
  font: 600 var(--text-caption)/1.25 var(--sans);
  color: var(--ink);
}
.aud-label--yours { color: var(--accent); background: var(--accent-wash); }
.aud-label--check { color: var(--ochre-text); background: var(--ochre-wash); }
@media (max-width: 720px) {
  .aud-sources > li { grid-template-columns: minmax(0, 1fr); }
}

/* FAQ column */
.aud-faq { max-width: 52rem; }

/* Closing band */
.aud-close { max-width: 46rem; }
.aud-close .actions .note { color: var(--on-dark-muted); }
.aud-close .actions { margin-top: 36px; }

@media (max-width: 900px) {
  .aud-hero .split { align-items: start; }
  .aud-hero__copy { padding-bottom: 8px; }
  .aud-price { margin-bottom: clamp(48px, 6vw, 88px); }
}

/* An h2 that sits inside a card next to a sibling section heading */
.aud-card-title { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); }

.aud-limit { margin-top: 32px; max-width: 46rem; }
.aud-close h2 + .lede { margin-top: 18px; }

/* Status pill placed after the h1, before the lede */
.aud-hero__copy .aud-hero__status { margin: 20px 0 0; }
.aud-hero__copy .aud-hero__status + .lede { margin-top: 20px; }

/* Three parallel points without step numbers */
.aud-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aud-points li { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.aud-points h3 { font-size: 1.375rem; margin-bottom: 10px; }
.aud-points p { color: var(--muted); }
@media (max-width: 900px) { .aud-points { grid-template-columns: minmax(0, 1fr); } }

/* The brand panel's limit line closes the panel, right under the explanation */
.aud-offer .panel .aud-offer__foot {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  font-size: var(--text-body);
}

/* The pilot card's line for agents who work alone */
.aud-offer .aud-solo {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}