/* PeerFlow public SEO landing pages. Reuses tokens/layout from home.css. */
.seo-nav-links{display:flex;align-items:center;gap:24px;font-size:15px;color:var(--ink-soft)}
.seo-nav-links a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}

.seo-hero{padding:78px 0 86px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:56px;align-items:center}
.seo-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--live-deep)}
.seo-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live)}
.seo-hero h1{font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px;max-width:14ch;text-wrap:balance}
.seo-hero .lede{max-width:62ch;font-size:clamp(17px,2vw,20px);line-height:1.65;color:var(--ink-soft);margin:0 0 28px}
.seo-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.seo-secondary{font-weight:650;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.seo-trust{margin:18px 0 0;color:var(--ink-faint);font-size:13px}

.seo-match-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 16px 42px rgba(23,26,46,.08)}
.seo-match-card .mono{display:block;margin-bottom:18px}
.seo-person{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.seo-person:first-of-type{border-top:0;padding-top:0}
.seo-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--live-soft);color:var(--live-deep);font-weight:800;flex:0 0 auto}
.seo-person b{display:block;font-size:14.5px}
.seo-person small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:2px}
.seo-match-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.seo-match-tags span{font:600 11px/1.2 var(--mono);letter-spacing:.02em;padding:7px 9px;border-radius:999px;background:var(--live-soft);color:var(--live-deep)}

.seo-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.45)}
.seo-band-inner{padding:34px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.seo-band strong{display:block;font-size:14px;margin-bottom:4px}
.seo-band span{display:block;color:var(--ink-soft);font-size:13px;line-height:1.5}

.seo-section{padding:92px 0}
.seo-section + .seo-section{border-top:1px solid var(--line)}
.seo-section-head{max-width:760px;margin-bottom:36px}
.seo-section-head h2{font-size:clamp(28px,4vw,39px);line-height:1.12;letter-spacing:-.035em;margin:8px 0 10px;text-wrap:balance}
.seo-section-head p{margin:0;color:var(--ink-soft);font-size:16px;max-width:65ch}

.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.seo-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.seo-card .num{font:700 12px/1 var(--mono);color:var(--live-deep);letter-spacing:.05em}
.seo-card h3{font-size:18px;line-height:1.3;margin:18px 0 8px}
.seo-card p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.65}

.seo-two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.seo-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.seo-list li{position:relative;padding:16px 18px 16px 44px;background:var(--card);border:1px solid var(--line);border-radius:13px;color:var(--ink-soft);font-size:14.5px}
.seo-list li::before{content:"✓";position:absolute;left:17px;top:15px;color:var(--live-deep);font-weight:800}
.seo-note{padding:26px;border-radius:16px;background:var(--deep);color:#fff}
.seo-note h3{font-size:23px;margin:0 0 10px}
.seo-note p{margin:0;color:#CFE7DD;line-height:1.7}
.seo-note a{text-decoration:underline;text-underline-offset:4px}

.seo-faq{display:grid;gap:12px;max-width:860px}
.seo-faq details{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:0 18px}
.seo-faq summary{cursor:pointer;font-weight:700;padding:18px 28px 18px 0;position:relative;list-style:none}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:23px;color:var(--live-deep)}
.seo-faq details[open] summary::after{content:"−"}
.seo-faq details p{margin:0 0 18px;color:var(--ink-soft);max-width:70ch;line-height:1.7}

.seo-cta{margin:18px 0 92px;background:var(--deep);color:#fff;border-radius:22px;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.seo-cta h2{font-size:clamp(26px,4vw,37px);letter-spacing:-.03em;line-height:1.15;margin:0 0 8px}
.seo-cta p{margin:0;color:#CFE7DD}
.seo-cta .btn{background:#fff;color:var(--ink);box-shadow:none;flex:0 0 auto}
.seo-cta .btn:hover{background:#F3F2F6;color:var(--ink)}

@media (max-width:820px){
  .seo-nav-links a:not(.btn){display:none}
  .seo-hero{grid-template-columns:1fr;padding:52px 0 66px;gap:34px}
  .seo-hero h1{max-width:16ch}
  .seo-band-inner{grid-template-columns:1fr 1fr}
  .seo-grid{grid-template-columns:1fr}
  .seo-two{grid-template-columns:1fr}
  .seo-cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:520px){
  .seo-nav-links{gap:10px}
  .seo-nav-links .btn{padding:10px 13px;font-size:13px}
  .seo-band-inner{grid-template-columns:1fr}
  .seo-match-card{padding:20px}
  .seo-section{padding:68px 0}
  .seo-cta{padding:28px;margin-bottom:68px}
}

.seo-paths-section{padding-top:72px;padding-bottom:72px}
.seo-path-links{display:flex;flex-wrap:wrap;gap:10px;max-width:980px}
.seo-path-links a{padding:10px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;font-weight:650}
.seo-path-links a:hover{border-color:var(--live);color:var(--live-deep)}


/* ============================================================
   ARTICLES
   ============================================================
   A page type the eight landing pages are not. A landing page is scanned and
   is built out of cards and bands that can run the full width of .wrap; an
   article is read top to bottom in one column, and the cap below is the single
   biggest difference between the two.

   Everything else on an article page — nav, footer, .btn, .wrap, .seo-cta —
   is shared with the landing pages on purpose, so a guide reads as the same
   site rather than as a blog bolted onto the side of it.

   Two of these carry strategy rather than styling. .script is the takeaway:
   three literal sentences a reader can use without finishing the page, placed
   high because this kind of page earns its links from people who did not read
   to the end. .tl is the session timeline, whose blocks are read off
   assets/phases.js — so the article describes what a booking actually does
   rather than a technique borrowed from somewhere else.
   ============================================================ */
/* ---------- the column ----------
   65-70 characters. The landing pages are built out of cards and bands and can
   run the full width; an article cannot, and this is the single biggest
   difference between the two page types. */
.art{max-width:44rem;margin:0 auto}

.art-head{padding:14px 0 0}
.art-kick{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--live-deep);background:var(--live-soft);
  padding:5px 11px;border-radius:999px;margin:0 0 18px;
}
.art h1{font-size:clamp(30px,4.6vw,44px);line-height:1.13;letter-spacing:-.022em;margin:0 0 20px;text-wrap:balance}
.art-lede{font-size:19px;line-height:1.62;color:var(--ink-soft);margin:0 0 22px}
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;
  color:var(--ink-faint);border-top:1px solid var(--line);padding-top:16px;margin:0 0 40px;
}
.art-meta b{color:var(--ink-soft);font-weight:600}

/* ---------- prose ---------- */
.art h2{font-size:25px;line-height:1.25;letter-spacing:-.016em;margin:44px 0 14px;text-wrap:balance}
.art h3{font-size:18px;line-height:1.35;margin:28px 0 8px}
.art p{font-size:17px;line-height:1.72;margin:0 0 18px;color:var(--ink)}
.art p.small{font-size:15px;color:var(--ink-soft)}
.art ul,.art ol{margin:0 0 20px;padding-left:22px}
.art li{font-size:17px;line-height:1.7;margin:0 0 9px}
.art li::marker{color:var(--live)}
.art strong{font-weight:700}
.art a:not(.btn){color:var(--live-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------- the timeline ---------- */
.tl{margin:0 0 26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.tl-bar{display:flex;height:12px}
.tl-bar i{display:block}
.tl-bar i.f{background:var(--live)}
.tl-bar i.b{background:#CFEADD;background:color-mix(in srgb, var(--live) 28%, #fff)}
.tl-rows{padding:6px 0}
.tl-row{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:11px 18px;align-items:baseline}
.tl-row + .tl-row{border-top:1px solid var(--line)}
.tl-t{
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--live-deep);
  font-variant-numeric:tabular-nums;
}
.tl-row.rest .tl-t{color:var(--ink-faint)}
.tl-d b{display:block;font-size:15.5px;margin-bottom:2px}
.tl-d span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.tl-note{font-size:13.5px;color:var(--ink-faint);margin:0 0 34px;line-height:1.55}

/* ---------- the pull-out ---------- */
.art-note{
  border-left:3px solid var(--live);padding:2px 0 2px 20px;margin:0 0 26px;
}
.art-note p{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0}
.art-note p b{color:var(--ink)}

/* ---------- what goes wrong ---------- */
.art-bad{display:flex;flex-direction:column;gap:0;margin:0 0 26px}
.art-bad div{padding:15px 0;border-bottom:1px solid var(--line)}
.art-bad div:first-child{border-top:1px solid var(--line)}
.art-bad b{display:block;font-size:16.5px;margin-bottom:4px}
.art-bad span{display:block;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}

/* ---------- related ---------- */
.art-rel{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.art-rel h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.art-rel a{display:block;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;padding:9px 0}
.art-rel a:hover{color:var(--live-deep)}
.art-rel a span{display:block;font-size:14.5px;font-weight:400;color:var(--ink-soft);margin-top:2px}


/* ---------- the takeaway ----------
   The one element on the page somebody can use without reading the rest, and
   therefore the one they screenshot. It is placed high on purpose: content that
   earns links earns them from people who did not finish reading. */
.script{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:6px 0;margin:0 0 12px}
.script > div{padding:16px 22px}
.script > div + div{border-top:1px solid var(--line)}
.script .w{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--live-deep);margin-bottom:8px}
.script q{display:block;font-size:17.5px;line-height:1.6;quotes:none}
.script q b{font-weight:700;background:var(--live-soft);padding:1px 5px;margin:0 -2px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- objections ---------- */
.obj{margin:0 0 26px}
.obj > div{padding:18px 0;border-bottom:1px solid var(--line)}
.obj > div:first-child{border-top:1px solid var(--line)}
.obj h3{margin:0 0 7px;font-size:17.5px}
.obj p{font-size:16px;margin:0 0 10px}
.obj p:last-child{margin-bottom:0}

/* ---------- the mid-article call to action ----------
   Quieter than .seo-cta, because it interrupts rather than closes. */
.mid{
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--deep);color:#fff;border-radius:16px;padding:20px 24px;margin:0 0 30px;
}
.mid p{margin:0;color:#CFE7DD;font-size:16px;line-height:1.55;max-width:38ch}
.mid p b{color:#fff}
/* .btn is built for a light ground; on the dark band it needs inverting. */
.mid .btn{background:#fff;color:var(--deep)}
.mid .btn:hover{background:#CFE7DD}

/* The checklist article's takeaway. Same row treatment as .art-bad, with a
   number — and here the number means something: the list runs mechanical
   checks first, then the human ones, and that is the order to work it in. */
.checks{counter-reset:c;margin:0 0 26px}
.checks > div{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.checks > div:first-child{border-top:1px solid var(--line)}
.checks > div::before{
  counter-increment:c;content:counter(c);font-weight:700;font-size:14px;
  color:var(--live-deep);padding-top:3px;font-variant-numeric:tabular-nums;
}
.checks b{grid-column:2;display:block;font-size:16.5px;margin-bottom:4px}
.checks span{grid-column:2;display:block;font-size:15.5px;line-height:1.62;color:var(--ink-soft)}
/* The half PeerFlow already answers for you reads as settled, not as a task. */
.checks > div.done b::after{
  content:"PeerFlow checks this";float:right;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--live-deep);
  background:var(--live-soft);padding:3px 8px;border-radius:999px;margin-left:10px;
}