/* Site developed and built by sitethreesixty.com */

/* ============================================================
   containers.css — Container internal layout styles
   Layout only. No colours. No media queries. No grid-column.
   ============================================================ */

/* --- Hero container --- */
/* .hero lives in home-critical.css ONLY. It is an above-fold layout
   container: if display:flex arrives with the deferred sheet, the first
   paint is display:block and the whole hero reflows on load.
   Removed from here 4 Aug 2026 (was a critical/deferred duplicate —
   zero-duplication rule). Do not re-add. */

/* --- Page banner container --- */
/* .page-banner lives in inner-critical.css ONLY — same reason as .hero.
   Removed from here 4 Aug 2026. Do not re-add. */

/* --- Card grid container --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

/* --- Text block container --- */

.text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Split content container --- */

.split-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  align-items: center;
}

/* --- CTA block container --- */

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
}

/* --- Footer grid container --- */

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}

/* --- Nav container (legacy template nav-list layout — kept for
   compatibility; the live Nav fixture's own layout is critical, above) --- */

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

/* --- Footer attribution --- */

.footer-attribution-block {
  text-align: center;
  padding-top: var(--space-lg);
  font-size: var(--font-caption);
}

/* ============================================================
   Pricing page — section containers (BLUEPRINTS/01-PRICING.md).
   Centred-text sections use flex column + align-items:center so
   centred children (.section-lead, .charter-lead, headings) never
   need margin:auto (guardrail §5 — manual auto-centring is banned;
   centring is always a container-layout property).
   ============================================================ */

.tiers {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.compare {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq,
.addons,
.fair,
.different {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tablewrap {
  width: 100%;
}

.faq-list,
.guarantee-grid,
.addon-grid,
.addon-how,
.fair-grid,
.diff-grid {
  width: 100%;
}

/* ============================================================
   FOOTER — layout only (colour lives in zones.css)
   Traditional 5-column footer, carried over from the live site and
   REBUILT to 12 West (00-FOUNDATION §8b-2, owner ruling 4 Aug 2026).
   The slim/drawer footer it replaces is scrapped — it sat outside the
   Framework and capped its own height, both of which 12 West forbids.

   Columns reflow with auto-fit/minmax, NOT a media query — Containers
   never carry breakpoints. Below the fold, so it is safe to defer.
   ============================================================ */

.footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}

/* ============================================================
   EXPLORE-MORE (businesses marquee) — layout only
   Consolidated from css/businesses-marquee.css 4 Aug 2026.
   The 640px pill-grid breakpoint is gone: the strip now reflows
   with auto-fit/minmax, so it needs no media query (Containers
   never carry breakpoints).
   ============================================================ */

.explore-more {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.explore-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

/* ============================================================
   HOME PAGE — container layout only (colour in zones.css).
   Consolidated from css/home.css 4 Aug 2026.
   The three stray breakpoints (760/800px) are folded into
   auto-fit/minmax — Containers never carry media queries.
   ============================================================ */

.proof-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.proof-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.speedo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  justify-self: center;
}

.whatyouget-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.whatyouget-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.dial-wrap { justify-self: center; }

.journey-spine {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.journey-step,
.journey-fork {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.journey-lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.journey-lane {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

.journey-closer {
  padding-left: var(--space-md);
  margin-top: var(--space-xl);   /* space AFTER step 04, before the closer (Steve, 2 Aug) */
}

.journey-links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-lg);   /* space AFTER the closer, before Explore links (Steve, 2 Aug) */
}

.pricing-teaser-head {
  text-align: center;
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.pricing-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.pricing-teaser-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pricing-teaser-cta {
  display: flex;
  justify-content: center;
}

.zone-cta .cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.zone-faq .section-label,
.zone-faq .section-heading { text-align: center; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.journey-inner > .section-label { margin-bottom: var(--space-sm); }
.journey-inner > .section-heading { margin-bottom: var(--space-xl); }

/* Marquee layout inside .zone-marquee — the component's own padding is
   zeroed because .zone-accent supplies the band and its padding. */
.zone-marquee .explore-more { padding: 0; text-align: center; }
.zone-marquee .explore-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
}

/* ============================================================
   PRICING PAGE — container layout only (colour in zones.css).
   Consolidated from css/pages/pricing.css 4 Aug 2026. Five stray
   breakpoints (480/640/760/860px) folded into auto-fit/minmax —
   Containers never carry media queries. The @container query on the
   compare table stays: it is a container query, not a viewport
   breakpoint, and it reflows the table on ITS OWN width.
   ============================================================ */

.tiers-head .section-label {
  display: block;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Tier card element (page-specific card variant — travels with this page,
   not a candidate for elements.css since its internal structure is
   pricing-specific: badge, bearing label, price display) */
.tier-card {
  display: flex;
  flex-direction: column;
}

.tier-card ul {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2.5rem;
}

.guarantee-item h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.guarantee-item h3::before {
  flex: none;
}

.section-head-center .section-label {
  display: block;
}

/* ---- FAQ accordion (Zone 5 — muted) ---- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: none;
}

/* ---- Add-ons / API & Email (Zone 6 — Chalk) ---- */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.addon-how ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ---- Fair Usage (Zone 7 — muted) ---- */
.fair-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.fair-col ul {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* ---- Need Something Different (Zone 8 — Slate, last content zone) ---- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}





@container (max-width: 640px) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td {
    display: block;
  }

  /* Tier rows: fixed-width label column, value left-aligned beside it.
       A shared label column keeps the values on one vertical line — right
       alignment made multi-line values ragged and hard to compare. */
  .compare-table td.val {
    display: grid;
    grid-template-columns: 8.5em 1fr;
    align-items: baseline;
    gap: var(--space-sm);
  }
}


/* ============================================================
   EXPLORE MANAGED — container layout only. Consolidated from
   css/pages/explore-managed.css 4 Aug 2026. Three stray breakpoints
   (560/760/860px) replaced by the shared 1000px collapse below.
   ============================================================ */

/* ============================================================
   ZONE 2 — THE DIVIDE (Slate)
   ============================================================ */
.divide {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.divide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.divide-col {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.divide-link {
  align-self: flex-start;
}

/* ============================================================
   ZONE 3 — WHAT "MANAGED" ACTUALLY MEANS (Graphite)
   ============================================================ */
.handled {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.handled-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.handled-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.handled-mark {
  flex: none;
}

.handled-lead {
  display: block;
}

.why {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ============================================================
   ZONE 5 — HOW IT GOES (Slate) — numbered 01/02/03
   ============================================================ */
.process {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.process-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.process-steps li {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ============================================================
   ZONE 6 — THE HONEST COMPARISON (Chalk)
   ============================================================ */
.compare-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.cn-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.cn-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cn-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.cn-contrast {
  align-self: center;
}

/* ============================================================
   ZONE 7 — CHARTER SCARCITY (Graphite)
   ============================================================ */
.charter-scarcity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ============================================================
   ZONE 7b — FAQ (Chalk)
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-head-center .section-label {
  display: block;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: none;
}

/* ============================================================
   ZONE 8 — THE ENQUIRY (Graphite)
   ============================================================ */
.enquiry {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.enquiry-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
}

.radio, .check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

.radio input, .check input {
  flex: none;
}

.checks {
  gap: .75rem;
}

.enquiry-submit {
  align-self: flex-start;
}

.enquiry-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
}

/* ============================================================
   ZONE 9 — CONFIRMATION (Graphite) — the small literal Level reading true
   ============================================================ */
.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.confirm-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.confirm-level .level-instrument {
  display: block;
}

.sources-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sources-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sources-list li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}


/* ============================================================
   EXPLORE CORE — container layout only. Consolidated from
   css/pages/explore-core.css 4 Aug 2026. Four stray breakpoints
   (560/760/860/1000px) → the shared 1000px collapse; the .cmp table's
   640px reflow became an @container query (it depends on the table's
   own width, not the viewport). .head-break's 720px breakpoint was REMOVED
   6 Aug 2026 (owner) — it was never approved; see CLAUDE.md Breakpoints.
   ============================================================ */

.cmp-scroll {
  container-type: inline-size;
}

.core-eyebrow {
  display: block;
}

/* ============================================================
   ZONE 3 — How same-day works (Slate). Three numbered step-cards.
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* Two-column: included-list (left) + the "what you need" dark panel (right).
   Panel is narrower and holds its shape; list takes the rest. Stacks < 860px. */
.spec-body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

/* Included checklist — Torch corner-chevron, consistent site-wide. */
.included-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.need-panel-eyebrow {
  display: block;
}

.need-panel-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.personal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* A quiet secondary link for the light (Chalk) zone — pairs with the
   primary .cta-core (defined in critical). */
.cta-quiet-dark {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

/* --- "Which one is you" self-selection fork --- */
.who-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.who-col ul {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ============================================================
   FAQ zone (SYNC-2) — accordion (reuses the site FAQ pattern).
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: none;
}

.close-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* MODULE:START sources-modal */
.sources-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sources-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.sources-modal-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* MODULE:START need-modal */
.need-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.need-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.need-group-title {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.need-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}














/* The comparison table reflows to cards on ITS OWN width — a container
   query, not a viewport breakpoint, so it works wherever the table sits and
   does not add to the site's single 1000px breakpoint. */
@container (max-width: 640px) {
  /* header row hidden; row cards self-label */
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td {
    display: block;
  }

  .cmp td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }

  /* prefix each answer with its column name */
  .cmp td::before {
    flex: 0 0 auto;
    align-self: center;
  }
}

/* ============================================================
   FIXED-COUNT GRID COLLAPSE — the ONE media query in this file
   Ruled by Steve, 4 Aug 2026.

   These grids have a fixed item count (3 tiers, 3 add-ons, 2
   guarantee columns). auto-fit cannot express that: the container
   ranges 701–1200px, so holding 3 columns at 701px needs a floor
   <=223px while preventing a 4th at 1200px needs >296px — the
   constraints contradict, so no floor value works.

   This uses the system's EXISTING 1000px breakpoint, not a new one.
   It lives here rather than in the critical files because critical
   loads FIRST: a deferred rule of equal specificity would override
   it. Load order, not specificity.
   ============================================================ */

@media (max-width: 1000px) {
  .tier-grid,
  .guarantee-grid,
  .addon-grid,
  .fair-grid,
  .diff-grid,
  .divide-grid,
  .cn-cols,
  .process-steps,
  .field-row,
  .steps-grid,
  .spec-body,
  .who-fork,
  .proof-inner,
  .whatyouget-inner,
  .journey-lanes,
  .pricing-teaser-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ARTICLE — trade lane long-form body (BRIEF-B1-TRADE-TEMPLATE.md Rev 2
   PART 1/4, Zone 2). Portable: no location prefix — any long-form copy
   page can use it.
   ============================================================ */

.article {
  display: flex;
  flex-direction: column;
}

.article-head {
  margin-bottom: var(--space-xl);
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Inline CTA — mid-article prompt (2 buttons), one per trade page */
.article-inline-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.article-inline-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ============================================================
   SHARE LINKS — component carried whole from the pre-rebuild page
   (P2). Sits above and below the article body, byte-identical.
   ============================================================ */

.share-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.share-links-icons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.share-links-link,
.share-links-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.share-links-link svg,
.share-links-btn svg {
  width: 20px;
  height: 20px;
}

.share-links-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: var(--font-caption);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
}

/* ============================================================
   ALSO-TRADES — cross-link line (Zone 3).
   ============================================================ */

.also-trades {
  text-align: center;
}

/* ============================================================
   BOOKING SHOWCASE — copy + demo link only. The 575-line screenshot
   modal is DELETED, not rebuilt (TRADE-LANE-PLAN Rev 2, "the modal is
   screenshots of the demo, embedded 15 times, beside a link to the
   working demo" — the demo link stays, the modal does not).
   ============================================================ */

.booking-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.booking-showcase-lead {
  max-width: 40ch;   /* text measure */
}

.booking-showcase-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================================
   CTA BLOCK — Zone 5. Reuses the portable .cta-block base already
   defined above (Home/Pricing) — trade-specific spacing only.
   ============================================================ */

.cta-block-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================================
   EXPLORE MORE — Zone 7 link row.
   ============================================================ */

.explore-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.explore-more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* https://www.sitethreesixty.com */