/* ==========================================================================
   Site-specific overrides on the DSAThemes base. Loaded after the theme CSS
   in templates/layout.php. Keep this file small: one section per page/area,
   with the reason for each override. See BUILD-LOG (UI fixes) for context.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pricing (#pricing-1): neat, aligned 4-up cards.
   The theme demo shows three uniform cards; our four plans have different
   content (waitlist email forms, varying title/blurb lengths), so without
   these rules the cards render ragged: titles wrap, CTAs sit at different
   heights, feature lists start on different lines.
   -------------------------------------------------------------------------- */

/* Cards stretch to equal height per row */
#pricing-1 .pricing-1-wrapper .col { display: flex; }
#pricing-1 .pricing-1-wrapper .p-table { width: 100%; }

/* Platform count carries the full list in a CSS-only tooltip (hover or
   keyboard focus; the CSP has no inline JS, so no bootstrap tooltip init).
   No underline on the term: a dotted border exposes the digit glyph's side
   bearing and makes the row look misaligned next to plain rows. A small
   circled "i" after the text signals the tooltip instead. */
#pricing-1 .has-tip {
  position: relative;
  cursor: help;
}

/* The theme nudges every span inside a feature row 5px left and 2px up
   (.pricing-features li p span, sized for the removed check icons). Reset it
   so the tooltip term's first glyph sits flush with the plain rows. */
#pricing-1 .pricing-features li p span {
  top: 0;
  right: 0;
}

#pricing-1 .tip-mark {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  background-color: #d7dbe0;
  border-radius: 50%;
  color: #3d4451;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  line-height: 15px;
  text-align: center;
  vertical-align: 6%;
}

#pricing-1 .has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  background-color: #353f4f;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  padding: 8px 14px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 20;
}

#pricing-1 .has-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #353f4f;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 20;
}

#pricing-1 .has-tip:hover::after,
#pricing-1 .has-tip:focus::after,
#pricing-1 .has-tip:hover::before,
#pricing-1 .has-tip:focus::before {
  opacity: 1;
  visibility: visible;
}

/* Fixed-height price and CTA slots so every card's feature list starts on
   the same line (only when cards sit side by side). Heights measured from
   the tallest variant: two-line blurb; email input + button + note. */
@media (min-width: 768px) {
  #pricing-1 .price p { min-height: 52px; }
  #pricing-1 .pt-cta { min-height: 121px; }
}

/* The intro and bottom notice span the full container (their columns are
   col-12 in the template); the theme squeezes .pricing-notice p to 84% */
#pricing-1 .pricing-notice p { padding: 0; }

/* --------------------------------------------------------------------------
   Public pages (.pub content inside the theme shell; see
   templates/public/layout.php). app.css/public.css keep styling the content;
   these rules scale the page header to the theme's type scale and fix what
   bootstrap (now loaded on these pages) overrides underneath.
   -------------------------------------------------------------------------- */

.pub h1 {
  font-size: 2.75rem;
  font-weight: 700;
  margin: 10px 0 14px;
}

.pub .lead {
  font-weight: 400;   /* bootstrap's .lead sets 300 */
  font-size: 1.25rem;
}

.pub .card h2 {
  font-weight: 700;
}

/* bootstrap's .card is display:flex, which stretches children (e.g. the CTA
   button) to full width; public cards are plain app.css blocks */
.pub .card {
  display: block;
}

.pub .pub-cta { padding: 40px 22px; }

.pub .pub-cta .btn { margin-top: 6px; }

/* Static-page header auth swap (header-auth.js + the aivis_in login marker):
   .nav-authed items ship hidden and unhide when the marker cookie is present */
.nav-hidden { display: none !important; }

/* ---- 2026-08-15: real product screenshots (homepage section + /demo page).
   One grid, both surfaces; site.css is loaded by the marketing AND public
   layouts. Images are 2x captures from a live demo project. */
.product-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 30px;
  align-items: start;
}
.product-shots figure { margin: 0; }
.product-shots img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(23, 38, 74, 0.12);
  background: #fff;
}
.product-shots figcaption {
  font-size: 15px;
  color: #666f7d;
  line-height: 1.5;
  margin-top: 10px;
  /* centered captions (his 2026-08-16 ask); /demo shares this class,
     so the parity pair stays identical */
  text-align: center;
}

/* Demo CTA under the homepage screenshot grid (his 2026-08-16 ask) */
.product-shots-cta { text-align: center; margin: 44px 0 0; }
@media (max-width: 768px) {
  .product-shots { grid-template-columns: 1fr; gap: 24px; }
}
/* Shots open the FULL uncut capture in a scrollable modal
   (product-shots.js binds .shot-link; the hidden .shot-modal divs
   hold the big images, loaded on first open via data-src) */
.product-shots a.shot-link { display: block; cursor: zoom-in; }
.shot-modal {
  position: relative;
  background: #fff;
  max-width: min(1180px, 94vw);
  margin: 20px auto;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 10px;
  padding: 10px;
}
.shot-modal img { width: 100%; height: auto; display: block; }

/* ---- 2026-08-15 live-demo banner (seat dashboards + all demo data pages)
   ONE banner design across the live demo (his call): stacked rows, full-width
   text, link(s) underneath. NO accent decorations (CLAUDE.md rule). The
   .seat-strip variant sits inside the public pages' .pub container. */
.seat-wrap { max-width: 1180px; margin: 16px auto 0; padding: 0 22px; }
.seat-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: #eaf2fe;
  border: 1px solid #c7dbf9;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3c4657;
}
.seat-bar.seat-strip { margin: 0 0 18px; }
.seat-bar .seat-text strong { color: var(--brand-deep, #124a9e); }
.seat-bar a { color: var(--brand, #185abd); }
.seat-bar a:hover { color: var(--brand-deep, #124a9e); }
.seat-bar .seat-cta { font-weight: 700; }
.seat-bar .seat-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.seat-bar .seat-links a { font-weight: 700; }

/* ---- 2026-08-16 homepage hero: signup CTA + live-demo button side by side.
   The theme's .btns-group is inline-block based; flex + gap keeps the pair
   on one row at >=1200 (padding trimmed there: the two buttons at theme
   padding are 565px vs the 542px text column) and wraps cleanly below.
   Margins zeroed so the theme/responsive first-child margins don't stack
   with the gap. */
#hero-1 .btns-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
#hero-1 .btns-group .btn { margin: 0; }
@media (min-width: 1200px) {
  #hero-1 .btns-group .btn { padding-left: 1.35rem; padding-right: 1.35rem; }
}
@media (max-width: 767.98px) {
  #hero-1 .btns-group { justify-content: center; }
}

/* ---- 2026-08-16 hero image flush with the purple band (his ask: the band
   stretched 100px past the image bottom, the theme's #hero-1
   padding-bottom). The image column bottom-pins itself so the fit holds
   even at widths where the text column is the taller one; display:block
   kills the inline baseline gap under the img. Both hero-capable PNGs are
   content-flush at their bottom edge (alpha-trim verified), so no
   transparent slack reopens the gap. */
#hero-1 { padding-bottom: 0; }
#hero-1 .row > div:last-child { align-self: flex-end; }
#hero-1 .hero-1-img { margin-bottom: 0; }
#hero-1 .hero-1-img img { display: block; margin: 0 auto; }

/* ---- 2026-08-16 persona router cards (homepage) + /for/{persona} pages.
   Card language mirrors .product-shots (white, #e3e7f0 hairline, radius 12,
   soft shadow). NO accent decorations (standing rule). .ph-rect = the blank
   image placeholder, now only the FALLBACK for personas configured without
   card_image/page_image (his real images landed 2026-08-16). */
.persona-cards { row-gap: 26px; }
.persona-cards .col { display: flex; }
.persona-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  padding: 30px 28px 26px;
  box-shadow: 0 10px 26px rgba(23, 38, 74, 0.07);
  display: flex;
  flex-direction: column;
  text-align: left;
}
.persona-card h3 { margin-bottom: 12px; }
.persona-card p { margin-bottom: 16px; }
.persona-card .persona-card-link { margin: auto 0 0; font-weight: 700; }
.persona-more { text-align: center; margin: 36px 0 0; }
/* The router line's demo link must read as a link (his 2026-08-16 catch) */
.persona-more a, .persona-more a:hover { text-decoration: underline; }

.ph-rect {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #eef1f7;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
}

/* How-It-Works keeps its 1-2-3 numbering; the theme's disc markers on top
   of the numbers read as double bullets (his 2026-08-16 catch). Scoped to
   the section id: the other simple-lists keep their discs. */
#lnk-1 .simple-list { list-style: none; margin-left: 0; }

/* Persona cards carry a wide image slot on top */
.persona-card .ph-rect { aspect-ratio: 16 / 9; margin-bottom: 18px; }
.persona-card .persona-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #e3e7f0;
  border-radius: 8px;
  margin-bottom: 18px;
  display: block;
}
.persona-card .persona-card-link { margin-top: auto; }

/* The /for/{persona} "what you get" image (4:3, full-bleed photo) */
.persona-shot {
  width: 100%;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  display: block;
}

/* ---- 2026-08-16 LLM provider logo panel (homepage Mentions section).
   Replaces the stock img-03 on his instruction: the recognizable marks of
   the five platforms the plans name, in their official colors, as white
   tiles in the product-shots card language. The slow one-tile-at-a-time
   lift below is OWNER-REQUESTED for this panel only (his image round;
   the standing no-animations rule keeps binding everywhere else) and it
   echoes the section copy: each platform gets asked, in turn. Off under
   prefers-reduced-motion. */
.llm-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  padding: 10px 0;
}
.llm-tile {
  flex: 0 1 160px;
  min-width: 132px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3e7f0;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(23, 38, 74, 0.07);
  padding: 28px 10px 20px;
  text-align: center;
  animation: llm-poll 10s ease-in-out infinite;
}
.llm-tile:nth-child(2) { animation-delay: 2s; }
.llm-tile:nth-child(3) { animation-delay: 4s; }
.llm-tile:nth-child(4) { animation-delay: 6s; }
.llm-tile:nth-child(5) { animation-delay: 8s; }
.llm-tile svg { width: 54px; height: 54px; display: block; margin: 0 auto 14px; }
.llm-tile span {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: #6c757d;
  display: block;
}
@keyframes llm-poll {
  0%, 16%, 100% { transform: none; box-shadow: 0 10px 26px rgba(23, 38, 74, 0.07); }
  6% { transform: translateY(-8px); box-shadow: 0 16px 32px rgba(23, 38, 74, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .llm-tile { animation: none; }
}

/* Persona hero: match the pricing page's 180px heading offset (the
   transparent header sits over the section; bare pt-100 put the h1 at
   100px, measured). Steps down with the theme's section scale. */
.persona-hero { padding-top: 180px; }
@media (max-width: 1199.98px) { .persona-hero { padding-top: 150px; } }
@media (max-width: 767.98px) { .persona-hero { padding-top: 120px; } }

.persona-hero .btns-group { margin-top: 8px; }
.persona-pain h3 { margin-bottom: 12px; }
.persona-pain { padding-right: 10px; }
.persona-pain-row { row-gap: 26px; }
.persona-demo-band {
  text-align: center;
  padding: 60px 8%;
}
.persona-demo-band p { margin: 16px auto 26px; max-width: 46em; }
.persona-cta {
  text-align: center;
  padding: 70px 8%;
}
.persona-cta h2 { color: #fff; }
.persona-cta p { margin: 14px 0 24px; }

/* ---- 2026-08-20 hero kicker (his ask: the literal "Is your business in the
   answers?" as the headline, the premise sentence smaller on its own single
   line above it). It stays INSIDE the h2 so the heading still reads as one
   thought. Sizes PROBED on the live page: the question at s-30 is one line in
   the 542px text column at 1200-1366 and at 992-1199 (s-32+ wraps to two);
   the kicker at 1.25rem holds one line at 1200+ (23px), 992-1199 (20px) and
   768-991 (17px); phones (root 16px, ~344px line) need the 1rem step or a
   390px screen wraps it. */
#hero-1 .hero-kicker {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}
@media (max-width: 575.98px) {
  #hero-1 .hero-kicker { font-size: 1rem; }
}

/* ---- 2026-08-20 persona card buttons = first-person self-select labels,
   centered (his ask: "I run an agency", so the click is a self-selection).
   One line at every width >= 768 by PROBE: the theme's btn-sm padding
   (1.4rem at 992-1199, 1.35rem at 768-991) wraps the two longer labels in
   the 238px / 162px card link areas, so the side padding steps down there;
   label font and colors stay the theme's. */
.persona-card .persona-card-link { text-align: center; }
@media (max-width: 1199.98px) {
  .persona-card .persona-card-link .btn { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 991.98px) {
  .persona-card .persona-card-link .btn { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ---- 2026-08-20 auth pages (site.css now loads on the auth shell too, the
   FOURTH shell). The theme's stock planet art (login-wrapper.jpg) gives way to
   the site purple; the signup brand panel carries REAL proof (SignupProof): a
   real answer with the brands named + platform counts. No fake scarcity (his
   rule, 2026-08-20). Login/forgot/reset keep the plain panel on the same
   purple. */
#login .register-page-wrapper {
  background: linear-gradient(160deg, #5b2fcf 0%, #7a3fe3 55%, #8f5ff0 100%);
}
#login.signup-page .register-page-wrapper > .row { align-items: center; }
#login.signup-page .register-page-txt { padding: 54px 52px 42px; }
#login.signup-page .register-page-txt img { margin-bottom: 32px; }
#login.signup-page .register-page-txt h2 { margin-bottom: 10px; }
#login.signup-page .register-page-txt p.proof-sub { margin: 0 0 22px; }
.proof-stats { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 12px 18px; }
.proof-stats li { flex: 1 1 0; min-width: 0; }
.proof-stats b { display: block; font-size: 1.45rem; line-height: 1.1; font-weight: 700; }
.proof-stats span { display: block; font-size: 0.8rem; line-height: 1.3; margin-top: 4px; opacity: 0.92; }
#login.signup-page .register-page-copyright { position: static; margin-top: 28px; }
@media (min-width: 992px) and (max-width: 1199.95px) {
  #login.signup-page .register-page-txt { padding: 44px 38px 36px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #login.signup-page .register-page-txt { padding: 38px 28px 30px; }
  .proof-stats { gap: 10px 12px; }
  .proof-stats b { font-size: 1.3rem; }
}
/* signup form side */
.signup-proof-line { margin: 0 0 16px; }
.signup-after { text-align: center; margin: 12px 0 0; line-height: 1.5; }