/* ==========================================================================
   Program pages (Accelerator, Co-sell Advisory)
   Shared hero layout, offer card, and phase timeline.
   Loaded only on those two pages.
   ========================================================================== */

/* ---- Hero: copy left, offer card right ---- */
.p-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 52px; align-items: center; }
@media (max-width: 900px) { .p-hero { grid-template-columns: 1fr; gap: 36px; } }

/* ---- Offer / spec card ---- */
.side-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--crimson);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); position: relative;
}
.side-card .sc-tag {
  position: absolute; top: -11px; right: 18px; background: var(--navy); color: #fff;
  font-family: var(--head); font-weight: 700; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}
.sc-label {
  font-family: var(--head); font-weight: 700; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crimson); margin: 0 0 8px;
}
.sc-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.sc-price b { font-family: var(--head); font-weight: 800; font-size: 2.7rem; color: var(--navy); line-height: 1; }
.sc-price span { font-family: var(--head); font-weight: 700; color: var(--muted); font-size: .9rem; }
.sc-sub { margin: 0 0 18px; font-size: .9rem; color: var(--muted); }

.sc-list { list-style: none; padding: 0; margin: 0 0 22px; }
.sc-list li {
  position: relative; padding: 10px 0 10px 28px; font-size: .93rem;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.sc-list li:last-child { border-bottom: 0; }
/* Check mark drawn in CSS so there is no icon font or image to load */
.sc-list li:before {
  content: ""; position: absolute; left: 4px; top: 17px;
  width: 6px; height: 11px; border: solid var(--crimson);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sc-foot { margin: 14px 0 0; font-size: .76rem; color: var(--muted); text-align: center; }

/* Second door on the offer card: for the buyer who is already decided and
   should not have to wait a week for a calendar slot.

   It must never compete with the diagnostic call above it, so it is a text
   link and not a button. The hairline above it is doing the real work: it
   separates this from .sc-foot, which is fine print ABOUT the call. Without
   the rule the two read as one paragraph and the enrol option disappears. */
.sc-alt {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center; font-size: .88rem; color: var(--muted);
}
/* Padding on an INLINE element grows the hit area without moving the line box,
   so this buys a thumb-sized target on mobile at zero visual cost. It is the
   highest-value link on the page and it was 17px tall. */
.sc-alt a { font-family: var(--head); font-weight: 700; padding: 9px 3px; }
/* The refund terms sit with the link, not in the FAQ accordion three clicks
   away. Someone enrolling without a call has had no chance to ask. */
.sc-terms { margin: 7px 0 0; text-align: center; font-size: .72rem; color: var(--muted); line-height: 1.5; }

/* Spec rows for the engagement card (no price shown) */
.sc-spec { list-style: none; padding: 0; margin: 0 0 22px; }
.sc-spec li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.sc-spec li:last-child { border-bottom: 0; }
.sc-spec .k { color: var(--muted); }
.sc-spec .v { font-family: var(--head); font-weight: 700; color: var(--navy); text-align: right; }

/* ---- Phase timeline ---- */
.timeline {
  position: relative; list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
/* Connector.
   This used to be a single bar on the <ol>, inset by a percentage: left 10%
   right 10%, and 12%/12% for the four-phase variant. Percentages have no
   relationship to where the dots actually are, so at 1280px the dots sat at
   9, 282, 556 and 829 while the bar ran 129 to 943. It began 120px past the
   first dot, leaving it visibly unattached, and overran the last one by 114px
   into empty space.

   Each item now draws its own segment from its own dot centre to the next
   one, so the join is exact at any width and cannot drift again. A dot is
   18px at left:0, so its centre is 9px in; the next centre is one column plus
   one gap further along, which is what the width calc says. The last item
   draws nothing, since there is nothing to its right. */
.tl-item { position: relative; padding-top: 36px; }
.tl-item:after {
  content: ""; position: absolute; top: 8px; left: 9px; z-index: 0;
  width: calc(100% + 30px);          /* one column plus the 30px base gap */
  height: 2px; background: var(--line);
}
.tl-item:last-child:after { display: none; }
.tl-item:before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--crimson); box-sizing: border-box;
}
.tl-when {
  font-family: var(--head); font-weight: 800; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--crimson); display: block; margin-bottom: 6px;
}
.tl-item h3 { font-size: 1.08rem; margin: 0 0 8px; }
.tl-item p { margin: 0; color: var(--muted); font-size: .95rem; }


/* Four-phase variant, used on the Accelerator. Co-sell still runs three
   phases, so this is a modifier rather than a change to the base rule. */
.timeline.four { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.timeline.four .tl-item:after { width: calc(100% + 22px); }   /* its own gap */

/* Four across gets cramped well before three does, so it breaks to 2x2
   earlier. The connector only reads as a timeline on a single row, so once
   the phases wrap it goes. Must stay above the 780px block: same specificity,
   so the later rule is the one that wins on a phone. */
@media (max-width: 1040px) {
  .timeline.four { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .timeline.four .tl-item:after { display: none; }
}

@media (max-width: 780px) {
  .timeline, .timeline.four { grid-template-columns: 1fr; gap: 26px; }
  .tl-item:after { display: none; }
  .tl-item { padding-top: 0; padding-left: 34px; }
  .tl-item:before { top: 4px; }
}

/* ---- Outcome strip ---- */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.outcomes.two { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
.outcome { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.outcome .o-num { font-family: var(--head); font-weight: 800; font-size: 2.1rem; color: var(--navy); line-height: 1; }
/* Word-based outcomes ("Zero to regular") need their own size. At 2.1rem they
   wrap badly in a two-up card and stop reading as a single headline value. */
.outcome .o-num.is-text { font-size: 1.5rem; line-height: 1.15; }
.outcome p { margin: 8px 0 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 780px) { .outcomes, .outcomes.two { grid-template-columns: 1fr; } }

/* The FAQ accordion moved to site.css when the homepage started using it too.
   It is loaded on every page now, so it does not belong in a two-page file. */

/* ---- Before / after ---- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.ba-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; }
.ba-col.is-after { border-color: var(--crimson); border-width: 2px; }
.ba-head {
  font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 14px; color: var(--muted);
}
.ba-col.is-after .ba-head { color: var(--crimson); }
.ba-col ul { list-style: none; padding: 0; margin: 0; }
.ba-col li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.ba-col li:last-child { border-bottom: 0; }
.ba-col li:before {
  content: ""; position: absolute; left: 4px; top: 18px; width: 10px; height: 2px; background: #c2c5d4;
}
.ba-col.is-after li:before {
  top: 16px; width: 6px; height: 11px; background: none;
  border: solid var(--crimson); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (max-width: 780px) { .ba { grid-template-columns: 1fr; } }


/* ==========================================================================
   SIX ASSETS JOURNEY  (/accelerator)
   Rebuilt from Rob's Claude Design artboard, 2026-08-19. The export was a
   524KB React bundle with thirteen embedded woff2 files; this reproduces the
   design in the site's own type stacks and locked palette, with no webfonts,
   no framework and no JS.
   ========================================================================== */

/* Full-bleed navy band. Sits outside .wrap so the dark runs edge to edge, and
   re-constrains its own content with a nested .wrap. */
.journey {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  padding: 46px 0 40px;
  margin-top: 40px;
}

/* Seven tracks: a rail either side of five asset columns. The rails are the
   narrative bookends, "a live deal" in and "you attached" out. */
.jrn {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(120px, .9fr) repeat(5, 1fr) minmax(132px, 1fr);
  column-gap: 0;
}

.jrn-step { position: relative; padding: 0 16px 0 16px; border-left: 1px solid rgba(255,255,255,.16); }
.jrn-step:first-of-type { border-left: 0; }

/* The seller's action, above the spine. Gold, tracked, uppercase. */
.jrn-act {
  display: block; font-family: var(--head); font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px; min-height: 2.2em;
}

/* The numbered node. The spine is drawn as a border on the node row rather
   than a separate element, so nothing can drift out of alignment. */
.jrn-node {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--scarlet); color: #fff;
  font-family: var(--head); font-weight: 800; font-size: 1rem;
  position: relative; z-index: 1; margin-bottom: 18px;
}
.jrn-step:before {
  content: ""; position: absolute; left: 0; right: 0; top: 22px;
  height: 1px; background: rgba(255,255,255,.22); z-index: 0;
}

.jrn-step h3 {
  font-family: var(--head); font-weight: 800; font-size: 1rem; line-height: 1.25;
  color: #fff; margin: 0 0 7px;
}
.jrn-step p { margin: 0 0 10px; font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.6); }

/* Which fortnight builds it. This is the line that lets the eight-week
   timeline above stop repeating itself. */
.jrn-when {
  display: inline-block; font-family: var(--head); font-weight: 700;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(216,117,56,.9); border: 1px solid rgba(216,117,56,.35);
  border-radius: 999px; padding: 3px 9px;
}

/* The two rails. */
.jrn-rail { display: flex; flex-direction: column; align-items: flex-start; }
.jrn-rail-end { align-items: flex-end; text-align: right; padding-left: 18px; }
.jrn-cap {
  font-family: var(--head); font-weight: 700; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin-bottom: 14px; min-height: 2.2em;
}
.jrn-rail-end .jrn-cap { color: var(--gold); }
.jrn-chip {
  font-family: var(--head); font-weight: 800; font-size: .95rem; color: #fff;
  background: var(--navy); border: 1px solid rgba(255,255,255,.28);
  border-left: 3px solid #fff; border-radius: 4px; padding: 11px 15px;
  margin-right: 18px;
}
.jrn-chip.is-won { background: var(--scarlet); border-color: var(--scarlet); border-left-color: var(--scarlet); margin: 0 0 0 0; }

/* Asset 06. Deliberately not a sixth column: it runs under the other five. */
.jrn-under {
  display: flex; align-items: center; gap: 22px;
  margin-top: 34px; padding: 20px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(216,117,56,.35); border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.jrn-under > div { flex: 1; }
.jrn-under h3 { font-family: var(--head); font-weight: 800; font-size: 1.1rem; color: #fff; margin: 0 0 5px; }
.jrn-under p { margin: 0 0 10px; font-size: .9rem; line-height: 1.45; color: rgba(255,255,255,.65); }
.jrn-node.is-six { background: none; color: var(--gold); font-size: 1.6rem; width: auto; height: auto; margin: 0; }
.jrn-runs {
  flex-shrink: 0; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(216,117,56,.85); line-height: 1.5;
}

.jrn-foot {
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--head); font-weight: 800; font-size: 1.15rem; color: #fff;
}

/* ---- Responsive ----
   The seven-track journey cannot survive a phone. Two steps down: drop the
   rails first, then stack entirely. */
@media (max-width: 900px) {
  .jrn { grid-template-columns: repeat(5, 1fr); }
  .jrn-rail { display: none; }          /* bookends are decoration, not content */
  .jrn-act { font-size: .64rem; }
  .jrn-step { padding: 0 10px; }
  .jrn-step h3 { font-size: .9rem; }
  .jrn-step p { font-size: .8rem; }
  .jrn-node { width: 38px; height: 38px; font-size: .9rem; }
  .jrn-step:before { top: 19px; }
}

@media (max-width: 600px) {
  .journey { padding: 34px 0 30px; }
  .jrn { grid-template-columns: 1fr; row-gap: 26px; }
  .jrn-step {
    border-left: 3px solid rgba(255,255,255,.16); border-radius: 0;
    padding: 0 0 0 18px;
  }
  .jrn-step:first-of-type { border-left: 3px solid rgba(255,255,255,.16); }
  .jrn-step:before { display: none; }   /* the spine is the left border now */
  .jrn-act { margin-bottom: 8px; min-height: 0; }
  .jrn-node { width: 34px; height: 34px; font-size: .85rem; margin-bottom: 10px; }
  .jrn-step h3 { font-size: 1rem; }
  .jrn-step p { font-size: .86rem; }
  .jrn-under { flex-direction: column; align-items: flex-start; gap: 12px; }
  .jrn-runs { text-align: left; }
  .jrn-foot { font-size: 1.02rem; }
}