/* Visuals: inline SVG icons, flow diagram, guardrails, proof, week illustration (audience-smb-v3) */
.ic { width:1.35rem; height:1.35rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ic-sm { width:1.05rem; height:1.05rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; margin-right:.45rem; }
.ic-lg { width:2.6rem; height:2.6rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.kicker-ic { display:flex; align-items:center; gap:.6rem; }
.kicker-ic .ic { width:1.9rem; height:1.9rem; padding:.38rem; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); color:var(--heading); stroke-width:2; }
.anchor-only { display:block; height:0; }

/* Flow diagram */
.vflow-band { padding:4.5rem 0; border-bottom:1px solid var(--line); }
.vflow-band h2 { margin-bottom:2rem; }
.vflow { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:2.75rem; counter-reset:none; }
.vf-step { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.3rem; }
.vf-step strong { color:var(--heading); font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.vf-step > span:last-child { color:var(--ink); font-size:.95rem; line-height:1.45; }
.vf-ic { display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:12px; background:var(--surface-2); color:var(--heading); margin-bottom:.5rem; }
.vf-ic .ic { width:1.6rem; height:1.6rem; }
.vf-n { position:absolute; top:1.1rem; right:1.2rem; font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.vf-step:not(:last-child)::after { content:""; position:absolute; top:50%; right:-2.15rem; width:1.5rem; height:2px; background:var(--ink-soft); }
.vf-step:not(:last-child)::before { content:""; position:absolute; top:calc(50% - 5px); right:-2.2rem; width:0; height:0; border-left:8px solid var(--ink-soft); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.vf-gate { border:2px solid var(--accent); background:linear-gradient(180deg,#1E2638 0%, var(--surface) 100%); }
.vf-gate .vf-ic { background:var(--accent); color:var(--accent-ink); }
.vf-gate .vf-n { color:var(--accent); }
.vf-note { margin-top:1.5rem; color:var(--heading); font-weight:600; }
.ex-mini { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
.ex-mini > div { border-top:2px solid var(--line); padding-top:.9rem; }
.ex-mini h3 { font-size:1rem; margin-bottom:.25rem; }
.ex-mini p { font-size:.95rem; color:var(--ink); }
@media (max-width:900px){
  .vflow { grid-template-columns:1fr 1fr; gap:1.5rem 2.75rem; }
  .vf-step:nth-child(2)::after, .vf-step:nth-child(2)::before { display:none; }
}
@media (max-width:620px){
  .vflow-band { padding:3.25rem 0; }
  .vflow { grid-template-columns:1fr; gap:1.6rem; }
  .vf-step { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:.9rem; padding:1rem 1.1rem; }
  .vf-ic { margin:0; width:2.6rem; height:2.6rem; }
  .vf-step strong { flex:1; }
  .vf-step > span:last-child { flex-basis:100%; padding-left:3.5rem; margin-top:-.35rem; }
  .vf-step:not(:last-child)::after, .vf-step:nth-child(2)::after { display:block; top:auto; bottom:-1.5rem; right:auto; left:2.35rem; width:2px; height:1.2rem; }
  .vf-step:not(:last-child)::before, .vf-step:nth-child(2)::before { display:block; top:auto; bottom:-1.65rem; right:auto; left:calc(2.35rem - 5px); border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--ink-soft); border-bottom:0; }
  .ex-mini { grid-template-columns:1fr; }
}

/* Guide picker icons and role card icons */
.rg-picker-opts a { display:inline-flex; align-items:center; }
.rg-ic { display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); color:var(--heading); margin-bottom:.55rem; }
.rg-ic .ic { width:1.15rem; height:1.15rem; }

/* Case study / proof */
.cs-line { max-width:52rem; font-size:1.1rem; }
.pstats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2rem; }
.pstat { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.35rem 1.4rem; display:flex; flex-direction:column; }
.pstat .n { font-size:clamp(2.8rem,5vw,4rem); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--heading); white-space:nowrap; }
.pstat .l { margin-top:.55rem; color:var(--heading); font-weight:500; line-height:1.35; }
.pstat .minibars { margin-top:auto; padding-top:1.6rem; height:4.6rem; margin-bottom:1.1rem; }
.pstat-ic { margin-top:auto; padding-top:1.2rem; color:var(--ink-soft); }
.people { display:flex; gap:.3rem; margin-top:auto; padding-top:1.2rem; }
.pp { width:1.6rem; height:1.9rem; fill:#3A4766; }
.pp.on { fill:var(--heading); }
.cs-pair { display:grid; grid-template-columns:1.6fr 1fr; gap:1.1rem; margin-top:1.1rem; align-items:stretch; }
.cs-pair .chart-card { margin:0; }
.gpt-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.4rem; display:flex; flex-direction:column; }
.gpt-n { font-size:clamp(2.8rem,5vw,4rem); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--heading); }
.gpt-l { margin-top:.6rem; color:var(--heading); font-weight:500; line-height:1.4; }
.dots { display:grid; grid-template-columns:repeat(9,1fr); gap:.4rem; margin-top:1.2rem; max-width:16rem; }
.dots i { display:block; aspect-ratio:1; border-radius:50%; background:#3A4766; }
.dots i.on { background:var(--heading); box-shadow:0 0 0 3px #E8EAEE33; }
.gpt-src { margin-top:auto; padding-top:1rem; font-size:.85rem; color:var(--ink-soft); }
.quote-card { position:relative; margin:1.1rem 0 0; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:2.4rem 2rem 2rem 6.5rem; }
.qmark { position:absolute; left:2rem; top:2.2rem; width:3rem; height:2.3rem; fill:var(--accent); opacity:.9; }
.quote-card blockquote { font-family:"Syne","Inter",sans-serif; font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:700; color:var(--heading); line-height:1.2; }
.quote-card figcaption { margin-top:.7rem; color:var(--ink-soft); font-size:.95rem; }
.cs-src { margin-top:1.25rem; max-width:60rem; color:var(--ink-soft); font-size:.85rem; }
.cs-band .btn { margin-top:1.25rem; }
@media (max-width:900px){ .pstats { grid-template-columns:1fr 1fr; } .cs-pair { grid-template-columns:1fr; } }
@media (max-width:520px){ .pstat { padding:1.2rem 1rem; } .pstat .n { font-size:2.5rem; } .pp { width:1.3rem; height:1.6rem; } .quote-card { padding:4.6rem 1.25rem 1.4rem; } .qmark { left:1.25rem; top:1.4rem; } .cs-band .btn { white-space:normal; line-height:1.35; } }

/* Problems: icons + week illustration */
.fc-ic { display:inline-flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem; border-radius:12px; background:var(--surface-2); color:var(--heading); margin-bottom:.9rem; }
.week { margin:2.5rem 0 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem; }
.week-title { font-weight:700; color:var(--heading); font-size:1.05rem; }
.week-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1rem; }
.week-h { font-size:.92rem; color:var(--ink-soft); margin-bottom:.7rem; }
.week-h strong { color:var(--heading); }
.week-days { display:grid; grid-template-columns:repeat(5,1fr); gap:.4rem; }
.wd { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.wd b { font-size:.72rem; font-weight:600; color:var(--ink-soft); text-align:center; }
.chip { display:block; font-size:.66rem; line-height:1.2; padding:.38rem .3rem; border-radius:6px; background:#2A3550; color:var(--heading); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.week-after .chip { background:transparent; border:1px dashed #4A587A; color:var(--ink-soft); }
.week-after .chip.ok { border:1px solid var(--heading); color:var(--heading); background:#E8EAEE14; }
.week-after .chip.free { border:0; background:transparent; }
.week-note { margin-top:.9rem; font-size:.8rem; color:var(--ink-soft); }
@media (max-width:720px){ .week-grid { grid-template-columns:1fr; } .week { padding:1.1rem; } }

/* Guardrails */
.gr3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.75rem; }
.gr-col { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.35rem; }
.gr-h { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.1rem; color:var(--heading); }
.gr-h .ic { width:2.3rem; height:2.3rem; padding:.45rem; border-radius:10px; background:var(--surface-2); }
.gr-col ul { list-style:none; margin-top:1rem; }
.gr-col li { position:relative; padding:.5rem 0 .5rem 1.6rem; border-top:1px solid var(--line); color:var(--ink); }
.gr-col li:first-child { border-top:0; }
.gr-col li::before { content:"\2713"; position:absolute; left:0; color:var(--ink-soft); font-weight:700; }
.gr-ok { border:2px solid var(--accent); }
.gr-ok .gr-h .ic { background:var(--accent); color:var(--accent-ink); }
.gr-ok li::before { content:"\25CF"; font-size:.7rem; top:.85rem; color:var(--accent); }
.gr-no li::before { content:"\2715"; color:#C97A7A; }
.gr-no .gr-h .ic { color:#E2A3A3; }
.gr-note { margin-top:1.25rem; color:var(--heading); font-weight:600; }
@media (max-width:820px){ .gr3 { grid-template-columns:1fr; } }

/* Steps with icons */
.steps-ic li::before { display:none; }
.st-ic { display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:10px; background:var(--surface-2); color:var(--heading); margin-bottom:.8rem; }
#how .steps { grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ #how .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ #how .steps { grid-template-columns:1fr; } }

/* Included list (ai-setup) */
.incl { list-style:none; margin-top:1rem; }
.incl li { display:flex; gap:.8rem; align-items:flex-start; padding:.65rem 0; border-top:1px solid var(--line); }
.incl li:first-child { border-top:0; }
.incl li .ic { margin-top:.15rem; color:var(--heading); }
.incl strong { color:var(--heading); }

/* FAQ accordion */
.faq-acc { margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; align-items:start; }
.faq-acc details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0; }
.faq-acc summary { cursor:pointer; list-style:none; padding:1rem 2.8rem 1rem 1.2rem; font-weight:700; color:var(--heading); position:relative; min-height:44px; }
.faq-acc summary::-webkit-details-marker { display:none; }
.faq-acc summary::after { content:"+"; position:absolute; right:1.1rem; top:.85rem; font-size:1.3rem; color:var(--accent); font-weight:600; }
.faq-acc details[open] summary::after { content:"\2212"; }
.faq-acc details p { padding:0 1.2rem 1.1rem; }
@media (max-width:720px){ .faq-acc { grid-template-columns:1fr; } }

/* /guides */
.gflow { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; align-items:center; }
.gflow li { display:inline-flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; color:var(--heading); font-weight:600; font-size:.92rem; }
.gflow li.gf-gate { border-color:var(--accent); }
.gflow .sep { background:none; border:0; padding:0; color:var(--ink-soft); }
.guide-row .gr-ic { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); color:var(--heading); margin-bottom:.5rem; }
.guide-row .gr-ic .ic { width:1.15rem; height:1.15rem; }
.guide-section-h.kicker-ic { text-transform:none; letter-spacing:-.01em; color:var(--heading); }
.guide-section-h.kicker-ic { gap:.8rem; }
.guide-section-h.kicker-ic .ic { width:2.6rem; height:2.6rem; padding:.55rem; border-radius:11px; }