/* ThriveAI landing pages: /offers/ first.
 *
 * A landing page sells; an article explains. It keeps the article system's
 * colours, type and square corners, and adds what an article does not have:
 * the home page's typographic hero, a menu of offers with photos, a dark band,
 * a process diagram built from HTML so it reflows on a phone instead of
 * shrinking, and the home page's client quotes.
 *
 * The hero, buttons, section labels and quotes copy the home page's inline
 * rules so both pages render them identically. The FAQ and the form keep the
 * article column's position and width, which check-design-consistency.cjs
 * compares across pages.
 *
 * Load order: ploy.css, swiss.css, article.css, then this file.
 */

/* ------------------------------------------------------------ page grid */

.sw-page { --sw-cols: 12; --sw-gutter: 1.5rem; --sw-bl: 8px; --sw-hair: #d8d8d8; }
.sw-page > section + section { border-top: 1px solid var(--sw-hair); }
.sw-page > section { border-bottom-width: 0; }
.sw-page .section-head { margin-bottom: calc(var(--sw-bl) * 4); }
@media (max-width: 899px) {
  .sw-page > section:not(.sw-hero):not(.lp-dark) { padding-block: calc(var(--sw-bl) * 10); }
}

/* ------------------------------------------------------- hero (home copy) */

.sw-hero { padding: calc(var(--sw-bl) * 22) 0 calc(var(--sw-bl) * 16); background: #fff; }
@media (max-width: 899px) { .sw-hero { padding: calc(var(--sw-bl) * 14) 0 calc(var(--sw-bl) * 10); } }
.sw-hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--sw-gutter); }
.sw-hero-kicker {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500);
  margin-bottom: calc(var(--sw-bl) * 3);
  display: flex; align-items: center; gap: .6rem; min-height: 0;
}
.sw-hero-kicker span:first-child { color: var(--ploy-accent-primary); }
.sw-hero h1 {
  grid-column: 1 / 10;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.4rem); line-height: 1.02; letter-spacing: -.035em;
  color: #111; margin: 0 0 calc(var(--sw-bl) * 4); text-wrap: balance;
}
.sw-hero-lede {
  grid-column: 1 / 8;
  font-size: clamp(1.2rem, 1rem + .45vw, 1.28rem); line-height: 1.65;
  color: var(--ploy-neutral-primary-700); margin: 0 0 calc(var(--sw-bl) * 5);
}
.sw-hero-cta { grid-column: 1 / 10; display: flex; flex-wrap: wrap; gap: .9rem; }
@media (max-width: 899px) { .sw-hero h1, .sw-hero-lede, .sw-hero-cta { grid-column: 1 / -1; } }

.sw-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 500; min-height: 3rem; padding: .8rem 1.6rem;
  text-decoration: none; border-radius: 0; transition: opacity .18s ease;
}
.sw-btn.fill { background: var(--ploy-accent-primary); color: #fff; }
.sw-btn.fill:hover { opacity: .9; }
.sw-btn.line { border: 1px solid #111; color: #111; padding: calc(.8rem - 1px) calc(1.6rem - 1px); }
.sw-btn.line:hover { background: #111; color: #fff; }

/* The landing hero: the headline, lede and buttons in one column on the left,
   the terms card on the right. One wrapper, so a tall card cannot stretch the
   rows between the headline and the buttons. */
.lp-hero .lp-hero-main { grid-column: 1 / -1; min-width: 0; }
.lp-hero .lp-hero-main > * { grid-column: auto; }
@media (min-width: 900px) {
  .lp-hero .lp-hero-main { grid-column: 1 / 8; }
  .lp-hero .lp-terms { grid-column: 9 / 13; align-self: start; }
}
@media (max-width: 899px) { .lp-hero .lp-terms { grid-column: 1 / -1; margin-top: calc(var(--sw-bl) * 6); } }

.lp-terms { background: #111; color: #fff; padding: calc(var(--sw-bl) * 4); }
.lp-terms-label {
  display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ploy-accent-primary); margin: 0 0 calc(var(--sw-bl) * 2);
}
.lp-term {
  display: flex; align-items: baseline; gap: .5rem;
  padding: calc(var(--sw-bl) * 1.25) 0; border-bottom: 1px solid #2b2b2b;
}
.lp-term:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-term .k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: #9a9a9a; white-space: nowrap;
}
.lp-term .dots { flex: 1 1 auto; border-bottom: 1px dotted #555; transform: translateY(-.28em); min-width: 1rem; }
.lp-term .v { font-size: .92rem; line-height: 1.4; font-weight: 500; color: #fff; text-align: right; }

/* --------------------------------------------- section labels (home copy) */

/* The label is the section's H2. The heading generates no box of its own, so
   the mono label inside it renders as a bare span would. */
.sw-section-title { display: contents; }
.label-mono {
  display: inline-block !important;
  font-family: var(--mono); font-weight: 400; font-size: .75rem; line-height: 1.6;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 2px solid var(--ploy-accent-primary); padding-bottom: calc(var(--sw-bl) * 1);
}
/* Scoped to main: the dark contact block after </main> takes its label colour
   from its own markup, exactly as on the home page. */
main .label-mono { color: var(--ploy-neutral-primary-500); }

/* ------------------------------------------------------------- the menu */

.om-intro {
  max-width: 40rem; margin: 0 0 calc(var(--sw-bl) * 6);
  font-size: 1.15rem; line-height: 1.65; color: var(--ploy-neutral-primary-700);
}
.om-list { border-top: 1px solid #111; }
.om-item {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 3rem;
  padding: calc(var(--sw-bl) * 5) 0; border-bottom: 1px solid var(--sw-hair);
  color: inherit; text-decoration: none;
}
.om-shot { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f2f2f2; }
.om-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.om-item:hover .om-shot img { transform: scale(1.04); }
.om-shot.blank {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #bdbdbd; background: #fafafa;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ploy-neutral-primary-500);
}
.om-body { display: flex; flex-direction: column; min-width: 0; padding-top: calc(var(--sw-bl) * .5); }
.om-head { display: flex; align-items: baseline; gap: .9rem; }
.om-idx { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--ploy-accent-primary); }
.om-name {
  font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); line-height: 1.2; font-weight: 600; letter-spacing: -.025em;
  color: #111; text-decoration-line: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color .18s ease;
}
.om-item:hover .om-name { text-decoration-color: #111; }
.om-dots { flex: 1 1 auto; border-bottom: 1px dotted #b5b5b5; transform: translateY(-.3em); min-width: 1.5rem; }
.om-time { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #111; white-space: nowrap; }
.om-out {
  max-width: 36rem; margin: calc(var(--sw-bl) * 2) 0 0;
  font-size: 1.05rem; line-height: 1.7; color: var(--ploy-neutral-primary-700);
}
.om-spec { margin: calc(var(--sw-bl) * 3) 0 0; border-top: 1px solid var(--sw-hair); max-width: 36rem; }
.om-spec-row {
  display: flex; gap: 1rem; padding: calc(var(--sw-bl) * 1.1) 0; border-bottom: 1px solid var(--sw-hair);
  font-size: .9rem; line-height: 1.5; color: #111;
}
.om-spec-row .k {
  flex: 0 0 5.5rem; padding-top: .12rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a;
}
.om-go { margin-top: calc(var(--sw-bl) * 3); font-size: .95rem; font-weight: 500; color: var(--ploy-accent-primary); }
.om-go span { display: inline-block; transition: transform .18s ease; }
.om-item:hover .om-go span { transform: translateX(4px); }

@media (max-width: 899px) {
  .om-item { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--sw-bl) * 3); padding: calc(var(--sw-bl) * 4) 0; }
  .om-shot { aspect-ratio: 16 / 9; }
  .om-head { flex-wrap: wrap; row-gap: .3rem; }
  .om-dots { display: none; }
  .om-time { flex-basis: 100%; }
  /* The empty tile is decoration; on a phone it is a tall blank box. */
  .om-shot.blank { display: none; }
}

/* ----------------------------------------------- dark band and the diagram */

.lp-dark { background: #111; color: #fff; padding: calc(var(--sw-bl) * 15) 0; }
@media (max-width: 899px) { .lp-dark { padding: calc(var(--sw-bl) * 10) 0; } }
.lp-dark .label-mono { color: rgba(255, 255, 255, .6); }
.lp-dark-lede {
  max-width: 44rem; margin: calc(var(--sw-bl) * 4) 0 calc(var(--sw-bl) * 8);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.25; font-weight: 600; letter-spacing: -.025em;
  color: #fff;
}

/* The flow: one rule per step, an arrow in each gap. It is markup, not an
   image, so the text stays at reading size at every width. */
.fl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; }
.fl-step { position: relative; border-top: 2px solid var(--ploy-accent-primary); padding-top: calc(var(--sw-bl) * 3); }
.fl-step.after { border-top-style: dashed; }
.fl-step + .fl-step::before {
  content: '\2192'; position: absolute; left: -2.3rem; top: -.82rem;
  font-family: var(--mono); font-size: 1.5rem; line-height: 1; color: var(--ploy-accent-primary);
}
.fl-when {
  display: block; margin-bottom: calc(var(--sw-bl) * 2);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ploy-accent-primary);
}
.fl-what { display: block; margin-bottom: calc(var(--sw-bl) * 1.5); font-size: 1.3rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.fl-line { display: block; font-size: 1rem; line-height: 1.7; color: #b8b8b8; }
@media (max-width: 899px) {
  .fl { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--sw-bl) * 7); }
  .fl-step + .fl-step::before { content: '\2193'; left: 0; top: -2.6rem; }
}

/* ------------------------------------------------- client quotes (home copy) */

.tm-grid { display: grid; gap: 0; border-top: 1px solid var(--ploy-neutral-primary-s3); }
@media (min-width: 900px) { .tm-grid { grid-template-columns: 1fr 1fr; } }
.tm-col { margin: 0; display: flex; flex-direction: column; padding: 2.6rem 0 0; }
@media (min-width: 900px) {
  .tm-col { padding: 3rem 3.5rem 0 0; }
  .tm-col + .tm-col { padding: 3rem 0 0 3.5rem; border-left: 1px solid var(--ploy-neutral-primary-s3); }
}
@media (max-width: 899px) { .tm-col + .tm-col { border-top: 1px solid var(--ploy-neutral-primary-s3); margin-top: 2.6rem; } }
.tm-logo { display: block; width: auto; align-self: flex-start; margin: 0 0 1.9rem; }
.tm-col > .tm-logo { height: 43px !important; max-width: 202px; object-fit: contain; object-position: left center; }
.tm-text { margin: 0; }
.tm-text p { margin: 0 0 24px; font-size: 1rem; line-height: 1.75; color: var(--ploy-neutral-primary-700); }
.tm-by { margin-top: auto; padding-top: calc(1.8rem - 24px); }
.tm-by b { display: block; font-weight: 600; font-size: .98rem; color: var(--ploy-neutral-inverse-950); }
.tm-by span { display: block; margin-top: .15rem; font-size: .87rem; color: var(--ploy-neutral-primary-700); }

/* --------------------------------------------------- questions and the form */

/* The label sits in the 15rem rail and the content in the article column,
   the same grid as the articles and the home page's guides section. The
   column carries .article, so the FAQ and the form take the article rules
   for headings and links unchanged. */
.lp-rail { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 4rem; align-items: start; }
.lp-rail > .lp-col { max-width: 42rem; min-width: 0; }
.lp-rail .faq-section { margin-top: 0; }
@media (max-width: 1023px) {
  .lp-rail { grid-template-columns: minmax(0, 1fr); }
  .lp-rail > .section-head { margin-bottom: calc(var(--sw-bl) * 4); }
}

/* =================================================== offer pages (/offers/x/) */

/* The offer hero takes a smaller headline than the hub: an offer's name and
   promise run to two or three lines, not two words. */
.lp-offer h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 4rem); line-height: 1.05; }

.lp-photo { margin: 0; background: #f2f2f2; }
.lp-photo img { display: block; width: 100%; height: 26rem; object-fit: cover; }
@media (max-width: 899px) { .lp-photo img { height: 14rem; } }

.lp-gray { background: #f5f5f5; }

/* The rail under the workspace diagram starts well clear of its caption. */
.ws-cap + .lp-rail { margin-top: calc(var(--sw-bl) * 10); }

/* What you get: one card per deliverable, numbered. */
.lp-gets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1023px) { .lp-gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lp-gets { grid-template-columns: minmax(0, 1fr); } }
.lp-get { display: flex; flex-direction: column; gap: calc(var(--sw-bl) * 1.5); padding: calc(var(--sw-bl) * 3); background: #fff; border: 1px solid var(--sw-hair); }
.lp-get-n { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: var(--ploy-accent-primary); }
.lp-get-k { font-size: 1.1rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: #111; }
.lp-get-t { font-size: .95rem; line-height: 1.65; color: var(--ploy-neutral-primary-700); }
.lp-get-t a, .lp-need-t a, .lp-dark-note a { color: var(--ploy-accent-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The four weeks on the dark band: the end state is the step's title. */
.lp-dark-note { max-width: 46rem; margin: calc(var(--sw-bl) * 7) 0 0; font-size: .95rem; line-height: 1.7; color: #9a9a9a; }

/* What we need from you: label and sentence on one row. */
.lp-needs { border-top: 1px solid #111; }
.lp-need { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; padding: calc(var(--sw-bl) * 2.5) 0; border-bottom: 1px solid var(--sw-hair); }
.lp-need-k { font-family: var(--mono); font-size: .72rem; line-height: 1.9; letter-spacing: .14em; text-transform: uppercase; color: #111; }
.lp-need-t { font-size: 1rem; line-height: 1.7; color: var(--ploy-neutral-primary-700); }
@media (max-width: 639px) { .lp-need { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sw-bl) * .75); } }

/* ------------------------------------------------- the workspace diagram */

/* Three layers: the modules sit on one workspace, which reads the systems
   the company already runs. Markup, so it reflows on a phone. The module
   this page sells carries .is-this. The tile selectors carry .ws and the a
   so they outrank article.css's .article a:not(.btn):not(.related-card) on the
   services page, where the diagram sits in the article column. */
.lp-lead { max-width: 44rem; margin: calc(var(--sw-bl) * 4) 0 calc(var(--sw-bl) * 6); font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); line-height: 1.4; font-weight: 600; letter-spacing: -.02em; color: #111; }
.ws { --sw-bl: 8px; --sw-hair: #d8d8d8; display: grid; gap: calc(var(--sw-bl) * 1.5); }
.ws-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.ws-tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #7a7a7a; }
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: calc(var(--sw-bl) * 1.5); }
.ws .ws-tiles a.ws-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 4.25rem;
  padding: calc(var(--sw-bl) * 1.5) calc(var(--sw-bl) * 2); background: #fff; border: 1px solid #111;
  font-size: .95rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #111; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.ws .ws-tiles a.ws-tile::after { content: '\2192'; font-family: var(--mono); font-weight: 400; color: var(--ploy-accent-primary); }
.ws .ws-tiles a.ws-tile:hover { background: #111; color: #fff; }
.ws .ws-tiles a.ws-tile.is-this { background: var(--ploy-accent-primary); border-color: var(--ploy-accent-primary); color: #fff; }
/* The copper fill marks this page's module; aria-current says it to a screen reader. */
.ws .ws-tiles a.ws-tile.is-this::after { color: #fff; }
.ws .ws-tiles a.ws-tile.next { border-style: dashed; border-color: #9a9a9a; font-weight: 500; color: #555; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding: calc(var(--sw-bl) * 3); background: #111; color: #fff; }
.ws-bar.is-this { outline: 3px solid var(--ploy-accent-primary); outline-offset: -3px; }
.ws-bar-k { font-size: 1.15rem; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.ws-bar-t { font-size: .92rem; line-height: 1.6; color: #b8b8b8; }
.ws-src { display: flex; align-items: center; min-height: 3rem; padding: 0 calc(var(--sw-bl) * 2); border: 1px dashed #b5b5b5; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #555; }
.ws-cap { max-width: 46rem; margin: calc(var(--sw-bl) * 3) 0 0; font-size: .95rem; line-height: 1.7; color: var(--ploy-neutral-primary-700); }
@media (min-width: 900px) { .ws-cap { margin-left: calc(11rem + 1.5rem); } }
@media (min-width: 1100px) { .ws:not(.ws-narrow) .ws-tiles.ws-mods { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .ws-row { grid-template-columns: minmax(0, 1fr); gap: calc(var(--sw-bl) * 1); }
  .ws-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* In an article column (the services page) the diagram stacks its labels
   above each layer, as it does on a phone. */
.ws-narrow { margin: calc(var(--sw-bl) * 4) 0 0; }
.ws-narrow .ws-row { grid-template-columns: minmax(0, 1fr); gap: var(--sw-bl); }
.ws-narrow .ws-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-narrow + .ws-cap { margin-left: 0; }
@media (max-width: 639px) { .ws-narrow .ws-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }