/* Practical care flow and common questions, using ServPatch brand tokens. */
.how-page .premium-kicker, .questions-intro .premium-kicker { display:flex; align-items:center; gap:10px; color:var(--sp-blue); font-size:12px; font-weight:600; line-height:1.5; }
.how-page .premium-kicker > span, .questions-intro .premium-kicker > span { display:block; width:20px; height:2px; background:var(--sp-teal-dark); }
.how-text-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--sp-blue); font-size:14px; font-weight:600; text-decoration:none; }
.how-text-link:hover { color:var(--sp-teal-dark); text-decoration:underline; text-underline-offset:5px; }
.how-page section[id], .questions-section { scroll-margin-top:108px; }
.setup-how-link { text-align:center; margin:34px 0 0; }
.questions-section { padding:88px 0; background:#fff; }
.questions-layout { display:grid; grid-template-columns:.85fr 1.4fr; gap:88px; align-items:start; }
.questions-intro h2 { margin:14px 0 18px; color:var(--sp-navy); font-size:clamp(30px,3.1vw,42px); line-height:1.14; letter-spacing:-.035em; }
.questions-intro > p { max-width:31ch; color:var(--sp-muted); font-size:16px; line-height:1.75; margin-bottom:18px; }
.questions-list { border-top:1px solid var(--sp-line); min-width:0; }
.question-item { border-bottom:1px solid var(--sp-line); }
.question-item > summary { display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none; padding:21px 0; color:var(--sp-navy); font-size:16px; font-weight:600; line-height:1.5; cursor:pointer; }
.question-item > summary::-webkit-details-marker { display:none; }
.question-item > summary::marker { content:''; }
.question-item > summary:hover, .question-item[open] > summary { color:var(--sp-blue); }
.question-item > summary:focus-visible { outline:3px solid var(--sp-teal-dark); outline-offset:4px; border-radius:4px; }
.question-symbol { position:relative; flex:0 0 18px; width:18px; height:18px; color:var(--sp-teal-dark); }
.question-symbol::before, .question-symbol::after { content:''; position:absolute; width:12px; height:1.5px; top:8px; left:3px; background:currentColor; }
.question-symbol::after { transform:rotate(90deg); }
.question-item[open] .question-symbol::after { display:none; }
.question-answer { padding:0 34px 24px 0; }
.question-answer p { margin:0; color:var(--sp-muted); font-size:15px; line-height:1.8; }
.question-answer a { color:var(--sp-blue); text-decoration:underline; text-underline-offset:3px; }
.questions-list > .how-text-link { margin-top:20px; }
.how-hero { padding:65px 0 74px; background:linear-gradient(135deg, var(--sp-ice-2), #fff 80%); }
.how-hero .crumbs { margin-bottom:32px; }
.how-hero h1 { margin:18px 0 26px; max-width:960px; font-size:clamp(42px,5.4vw,72px); line-height:1.06; letter-spacing:-.045em; color:var(--sp-navy); }
.how-hero h1 span { color:var(--sp-blue); }
.how-hero .lead { max-width:650px; margin:0; font-size:19px; line-height:1.7; color:var(--sp-muted); }
.how-hero-links { display:flex; flex-wrap:wrap; column-gap:32px; row-gap:8px; margin-top:24px; }
.how-flow-section { padding:76px 0; }
.how-section-heading h2, .how-settings h2, .how-start h2 { margin:14px 0 32px; font-size:clamp(30px,3.2vw,42px); line-height:1.13; letter-spacing:-.035em; }
.how-flow { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; margin:0; padding:0; border-top:1px solid var(--sp-line); }
.how-flow > li { display:flex; flex-direction:column; padding:32px 32px 12px 0; }
.how-flow > li + li { padding-left:32px; border-left:1px solid var(--sp-line); }
.how-flow > li:last-child { padding-right:0; }
.how-step-label { display:flex; align-items:center; gap:12px; color:var(--sp-blue); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:24px; }
.how-step-label > span { color:var(--sp-teal-dark); font-variant-numeric:tabular-nums; }
.how-flow h3 { color:var(--sp-navy); font-size:24px; line-height:1.2; letter-spacing:-.025em; margin:0 0 16px; }
.how-flow > li > p { color:var(--sp-muted); font-size:15px; line-height:1.8; margin:0 0 24px; }
.how-example { margin-top:auto; padding:20px 0 20px 16px; border-left:2px solid var(--sp-teal); }
.how-example strong { font-size:12px; color:var(--sp-blue); }
.how-example p { color:var(--sp-muted); font-size:14px; line-height:1.7; margin:8px 0 0; }
.how-flow .how-text-link { margin-top:18px; }
.how-human-note { color:var(--sp-muted); font-size:13px; line-height:1.7; padding-top:28px; margin:24px 0 0; border-top:1px solid var(--sp-line); }
.how-settings-section { padding:68px 0; background:var(--sp-ice); }
.how-settings { display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; }
.how-setting h3 { font-size:22px; letter-spacing:-.025em; margin:0 0 16px; }
.how-setting p { color:var(--sp-muted); font-size:15px; line-height:1.8; margin:0 0 14px; }
.how-start-section { padding:80px 0; }
.how-start { display:grid; grid-template-columns:1fr 1.25fr; gap:96px; }
.how-start h2 { margin-bottom:22px; }
.how-start > div > p { max-width:35ch; color:var(--sp-muted); font-size:16px; line-height:1.8; }
.how-start-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--sp-line); }
.how-start-list li { display:flex; gap:22px; border-bottom:1px solid var(--sp-line); padding:24px 0; }
.how-start-list li > span { color:var(--sp-teal-dark); font-size:14px; font-weight:600; }
.how-start-list h3 { font-size:18px; line-height:1.3; margin:0 0 10px; }
.how-start-list p { color:var(--sp-muted); font-size:15px; line-height:1.7; margin:0; }
.how-page .questions-section { background:var(--sp-ice-2); }
.how-next-section { padding:54px 0; }
.how-next { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.how-next h2 { font-size:26px; line-height:1.25; letter-spacing:-.025em; margin:0 0 12px; }
.how-next p { color:var(--sp-muted); font-size:15px; line-height:1.7; margin:0; }
.how-next .btn { white-space:nowrap; }
@media (max-width:900px) {
  .questions-layout { grid-template-columns:1fr; gap:30px; }
  .questions-intro > p { max-width:54ch; }
  .questions-intro h2 br { display:none; }
  .how-flow { grid-template-columns:1fr; }
  .how-flow > li, .how-flow > li + li { padding:28px 0; border-left:0; border-bottom:1px solid var(--sp-line); }
  .how-flow > li > p { max-width:65ch; }
  .how-example { max-width:65ch; }
  .how-settings { grid-template-columns:1fr 1fr; gap:28px; }
  .how-settings > div:first-child { grid-column:1 / -1; }
  .how-start { grid-template-columns:1fr; gap:32px; }
  .how-next { flex-direction:column; align-items:flex-start; gap:24px; }
}
@media (max-width:600px) {
  .questions-section { padding:54px 0; }
  .questions-layout { gap:24px; }
  .questions-intro > p { font-size:15px; }
  .question-item > summary { font-size:15px; padding:20px 0; gap:16px; }
  .question-answer { padding-right:0; }
  .how-hero { padding:40px 0 48px; }
  .how-hero h1 { font-size:clamp(36px,9.5vw,48px); }
  .how-hero h1 br { display:none; }
  .how-hero .lead { font-size:17px; }
  .how-hero-links { flex-direction:column; gap:0; }
  .how-flow-section, .how-start-section { padding:52px 0; }
  .how-step-label { margin-bottom:16px; }
  .how-settings-section { padding:48px 0; }
  .how-settings { grid-template-columns:1fr; }
  .how-setting { padding-top:22px; border-top:1px solid var(--sp-line); }
  .how-settings h2 { margin-bottom:0; }
  .how-next .btn { white-space:normal; text-align:center; }
}