/* v7 close: #final (S9) and footer.ft. FAQ (S10) lives in sec-faq.css. Sticky styles live in sec-sticky.css.
   Tokens and primitives only (docs/11-design-system.md "v7 · 测试报告"). Every selector is scoped to #final or footer.ft.
   #final skim: eyebrow → H2 → the split (RM? jittery red line vs RM0 calm green line) → the CTA box → 3-step stepper.
   Yellow on this screen: the countdown digits and the one button. Red only on the "直接用钱试" side, green only on "先测". */

/* ================= FINAL (ink) ================= */
#final .ds-h2 .l { display: block; }
#final .cl-top { display: grid; grid-template-columns: minmax(0, 1fr); }
#final .cl-head { margin: 0; }

/* the split: columns share rows (subgrid) so label, number, line, caption and rows sit level */
#final .cl-vs { margin-top: var(--ds-s6); grid-template-rows: repeat(5, auto); }
#final .cl-col { min-width: 0; display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
#final .ds-vs > .cl-bad { padding: var(--ds-s5) var(--ds-s4) 0 0; }
#final .ds-vs > .cl-good { padding: var(--ds-s5) 0 0 var(--ds-s4); }
#final .cl-k { margin: 0; font: 700 var(--ds-fs-small)/1.4 var(--ds-zh); color: var(--ds-text-d2); }
#final .cl-v { margin-top: var(--ds-s2); }

#final .cl-spark { position: relative; height: 56px; margin-top: var(--ds-s4); }
#final .cl-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
#final .cl-ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#final .cl-ln--dn { stroke: var(--ds-dn-d); }
#final .cl-ln--up { stroke: var(--ds-up-d); stroke-width: 2.5; }
#final .cl-base { stroke: var(--ds-line-d); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
#final .cl-end--q { position: absolute; left: calc(91.25% + 6px); top: 53.6%; transform: translateY(-50%); font: 700 16px/1 var(--ds-mono); color: var(--ds-dn-d); }
#final .cl-dot { position: absolute; left: 100%; top: 47.1%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ds-up-d); box-shadow: 0 0 0 4px rgba(48,164,108,.2); }
#final .cl-cap { margin: var(--ds-s2) 0 0; font: 400 var(--ds-fs-fine)/1.6 var(--ds-zh); color: var(--ds-mute-d); }
#final .cl-cap .ds-tag { margin-top: var(--ds-s1); }

#final .cl-rows { display: grid; gap: 0; margin: var(--ds-s4) 0 0; padding: 0; list-style: none; }
#final .cl-rows li { display: flex; align-items: flex-start; gap: var(--ds-s2); padding: 10px 0; border-top: 1px solid var(--ds-line-d); font: 700 15px/1.45 var(--ds-zh); color: var(--ds-text-d); word-break: keep-all; }
#final .cl-rows .ds-mark { width: 20px; height: 20px; margin-top: 1px; }
#final .cl-rows .ds-mark svg { width: 12px; height: 12px; }

/* draw-in once (sec-close.js adds .cl-arm only when the split starts below the screen and motion is allowed) */
html.ds-motion #final .cl-arm .cl-spark svg { clip-path: inset(0 100% 0 0); }
html.ds-motion #final .cl-arm .cl-end--q, html.ds-motion #final .cl-arm .cl-dot { opacity: 0; }
html.ds-motion #final .cl-arm.is-in .cl-spark svg { clip-path: inset(0 0 0 0); transition: clip-path var(--ds-t3) var(--ds-ease); }
html.ds-motion #final .cl-arm.is-in .cl-good .cl-spark svg { transition-delay: .15s; }
html.ds-motion #final .cl-arm.is-in .cl-end--q, html.ds-motion #final .cl-arm.is-in .cl-dot { opacity: 1; transition: opacity var(--ds-t2) var(--ds-ease) .35s; }

/* the CTA box: real countdown + gift line | the one button + note; not-for-you line under both */
#final .cl-box { display: grid; gap: var(--ds-s5); margin-top: var(--ds-s6); padding: var(--ds-s5); border-radius: var(--ds-r-l); background: var(--ds-ink-2); box-shadow: inset 0 0 0 1px var(--ds-line-d); }
#final .cl-box-l, #final .cl-box-r { min-width: 0; }
#final .cl-cd { grid-template-columns: 48px minmax(0, 1fr); gap: var(--ds-s4); align-items: center; }
#final .cl-cd[hidden] { display: none; }
#final .cl-face { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--ds-ink-3); }
#final .cl-cd-in { display: grid; gap: var(--ds-s1); min-width: 0; }
#final .cl-cd .ds-cd-n { flex-wrap: nowrap; white-space: nowrap; gap: 0; }
#final .cl-cd .ds-cd-n i { margin: 0 var(--ds-s2) 0 2px; }
#final .cl-cd .ds-cd-n i:last-child { margin-right: 0; }
#final .cl-gift { margin: var(--ds-s4) 0 0; padding-top: var(--ds-s4); border-top: 1px solid var(--ds-line-d); font: 400 var(--ds-fs-small)/1.6 var(--ds-zh); color: var(--ds-text-d2); }
#final .cl-gift b { margin-right: var(--ds-s1); font-weight: 700; color: var(--ds-text-d); }
#final .cl-cd[hidden] + .cl-gift { margin-top: 0; padding-top: 0; border-top: 0; }
#final .cl-box .ds-cta { margin: 0; gap: var(--ds-s2); }
#final .cl-box .btn { white-space: nowrap; }
#final .ds-cta-note b { color: var(--ds-text-d); }
#final .ds-cta-note .ds-nw { display: inline-block; }
#final .closed-note { margin-top: var(--ds-s2); }
#final .cl-notfor { margin: 0; padding-top: var(--ds-s4); border-top: 1px solid var(--ds-line-d); text-align: center; font: 400 var(--ds-fs-fine)/1.6 var(--ds-zh); color: var(--ds-mute-d); }

/* the only numbered steps on the page: a horizontal stepper joined by one line */
#final .cl-next { margin-top: var(--ds-s8); }
#final .cl-steps-k { margin: 0 0 var(--ds-s5); text-align: center; font: 700 var(--ds-fs-fine)/1.4 var(--ds-zh); letter-spacing: .08em; color: var(--ds-mute-d); }
#final .cl-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-s2); margin: 0; padding: 0; list-style: none; }
#final .cl-steps::before { content: ""; position: absolute; top: 16px; left: calc(100% / 6); right: calc(100% / 6); height: 1px; background: var(--ds-line-d-strong); opacity: .4; }
#final .cl-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--ds-s1); min-width: 0; text-align: center; }
#final .cl-c { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--ds-s2); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ds-line-d-strong); background: var(--ds-ink);
  font: 800 15px/1 var(--ds-num); font-variant-numeric: tabular-nums; color: var(--ds-text-d); }
#final .cl-steps li:first-child .cl-c { box-shadow: none; background: var(--ds-text-d); color: var(--ds-ink); }
#final .cl-t { font: 700 16px/1.4 var(--ds-zh); color: var(--ds-text-d); word-break: keep-all; }
#final .cl-s { font: 400 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-mute-d); word-break: keep-all; }
#final .cl-s .ds-nw { white-space: normal; }   /* columns are ~110px on phones: let the phrase wrap inside its own column */

@media (max-width: 360px) {
  #final .ds-vs > .cl-bad { padding-right: var(--ds-s2); }
  #final .ds-vs > .cl-good { padding-left: var(--ds-s2); }
  #final .cl-box { padding: var(--ds-s4); }
  #final .cl-cd { grid-template-columns: minmax(0, 1fr); }
  #final .cl-face { display: none; }
  #final .cl-t { font-size: 15px; }
}

/* v9 mobile polish: phones get a vertical stepper (circle left, title + sub right) so each sub-line keeps its phrases whole */
@media (max-width: 599px) {
  #final .cl-next { margin-top: var(--ds-s7); }
  #final .cl-steps-k { margin-bottom: var(--ds-s4); text-align: left; }
  #final .cl-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #final .cl-steps::before { display: none; }
  #final .cl-steps li { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; column-gap: var(--ds-s4); row-gap: 2px; padding-bottom: var(--ds-s5); text-align: left; }
  #final .cl-steps li:last-child { padding-bottom: 0; }
  #final .cl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 36px; bottom: 4px; width: 1px; background: var(--ds-line-d-strong); opacity: .4; }
  #final .cl-c { grid-row: 1 / 3; margin-bottom: 0; }
  #final .cl-t { padding-top: 5px; font-size: 17px; }
  #final .cl-s { font-size: var(--ds-fs-small); }
  #final .cl-s .ds-nw { white-space: nowrap; }
}
/* v9 mobile polish: the green end dot (+ ring) sat ~9px into the side gutter; pull the line in so the dot stays inside it */
@media (max-width: 959px) { #final .cl-good .cl-spark { margin-right: 9px; } }

/* ================= FOOTER (ink) ================= */
/* phones: leave room for the fixed 64px sticky bar */
body > footer.ft { padding: var(--ds-s6) 0 calc(var(--ds-sticky-h, 64px) + var(--ds-s6) + env(safe-area-inset-bottom)); background: var(--ds-ink); font: 400 var(--ds-fs-fine)/1.6 var(--ds-zh); color: var(--ds-mute-d); }
footer.ft .ft-grid { display: grid; gap: var(--ds-s5); }
footer.ft p { margin: 0; max-width: 46em; }
footer.ft .ft-brand { color: var(--ds-text-d2); }
footer.ft .ft-brand b { font: 800 15px/1.3 var(--ds-num); color: var(--ds-text-d); }
footer.ft .ft-addr { margin-top: var(--ds-s1); }
footer.ft .ft-priv:has(> a[hidden]) { display: none; }
footer.ft .ft-risk { display: grid; gap: var(--ds-s1); padding-top: var(--ds-s5); border-top: 1px solid var(--ds-line-d); }
footer.ft .ft-risk-k { margin-bottom: var(--ds-s1); font-weight: 700; color: var(--ds-text-d); }
footer.ft a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-text-d); text-underline-offset: 3px; }
footer.ft a:focus-visible { outline: 2px solid var(--ds-text-d); outline-offset: 2px; border-radius: 4px; }

/* ================= desktop ================= */
@media (min-width: 960px) {
  #final .cl-top { grid-template-columns: 5fr 7fr; column-gap: var(--ds-s9); align-items: center; }
  #final .cl-vs { margin-top: 0; }
  #final .ds-vs > .cl-bad { padding: var(--ds-s5) var(--ds-s6) 0 0; }
  #final .ds-vs > .cl-good { padding: var(--ds-s5) 0 0 var(--ds-s6); }
  #final .cl-k { font-size: 16px; }
  #final .cl-spark { height: 80px; margin-top: var(--ds-s5); }
  #final .cl-rows li { font-size: 16px; }

  #final .cl-box { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-s8); row-gap: var(--ds-s5); align-items: center; margin-top: var(--ds-s8); padding: var(--ds-s6); }
  #final .cl-cd { grid-template-columns: 56px minmax(0, 1fr); }
  #final .cl-face { width: 56px; height: 56px; }
  #final .cl-box-r { width: 380px; }
  #final .cl-box .btn { width: 100%; }
  #final .cl-notfor { grid-column: 1 / -1; text-align: left; }

  #final .cl-steps { gap: var(--ds-s5); }
  #final .cl-c { width: 40px; height: 40px; font-size: 17px; }
  #final .cl-steps::before { top: 20px; }
  #final .cl-t { font-size: 19px; }
  #final .cl-s { font-size: var(--ds-fs-small); }

  body > footer.ft { padding: var(--ds-s8) 0; }
  footer.ft .ft-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ds-s5); }
  footer.ft .ft-id { grid-column: 1 / span 5; }
  footer.ft .ft-risk { grid-column: 7 / span 6; padding-top: 0; border-top: 0; }
}

/* v7 QA fix (CRO): one yellow thing per screen. In #final the button is the yellow; the countdown digits go light. */
#final .ds-cd .ds-cd-n b { color: var(--ds-text-d); }