/* Product introduction. All layout rules are scoped to the guide. */
.guide-entry { display:inline-flex; align-items:center; gap:10px; padding:11px 17px; border:1px solid #d9dce1; border-radius:9px; background:#fff; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.guide-entry > span:first-child { color:var(--blue); font-size:18px; }
.guide-entry:hover { border-color:var(--blue); color:var(--blue); }
.guide-view { --guide-muted:#697381; --guide-line:#dfe3e8; --guide-blue:#174a9c; max-width:1320px; margin:0 auto; }
.guide-view button, .guide-view a { touch-action:manipulation; }
.guide-view button:focus-visible, .guide-view a:focus-visible, .guide-entry:focus-visible { outline:3px solid #3874d5; outline-offset:5px; }
.guide-nav { position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:66px; border-top:1px solid var(--guide-line); border-bottom:1px solid var(--guide-line); background:rgba(244,244,242,.94); backdrop-filter:blur(18px); }
.guide-nav > span { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:650; }
.guide-nav > span i { width:7px; height:7px; border-radius:50%; background:var(--guide-blue); }
.guide-nav > div { display:flex; align-items:center; gap:30px; }
.guide-nav a { padding:22px 0; color:#535d6b; text-decoration:none; font-size:12px; transition:color .18s; }
.guide-nav a small { color:#929ba8; font-size:9px; margin-right:6px; font-family:Consolas,monospace; }
.guide-nav a:hover { color:var(--guide-blue); }
.guide-eyebrow { margin:0 0 16px; font-size:10px; font-weight:650; letter-spacing:.16em; color:var(--guide-blue); }
.guide-hero { display:grid; grid-template-columns:1fr 1.08fr; align-items:center; gap:40px; min-height:550px; padding:85px 0 100px; }
.guide-hero-copy { padding-bottom:20px; }
.guide-hero-copy > .guide-eyebrow { font-size:12px; letter-spacing:.15em; margin-bottom:23px; }
.guide-hero h2 { font-size:clamp(34px,3.25vw,53px); font-weight:800; line-height:1.34; letter-spacing:-.06em; color:#182330; margin:0 0 24px; }
.guide-hero h2 > span { color:var(--guide-blue); }
.guide-lede { color:var(--guide-muted); font-size:14px; line-height:1.95; margin:0 0 30px; }
.guide-primary { display:inline-flex; align-items:center; justify-content:space-between; gap:40px; border:1px solid transparent; border-radius:9px; padding:15px 21px; background:var(--guide-blue); color:#fff; font-size:13px; font-weight:650; cursor:pointer; box-shadow:0 3px 7px #15366312; transition:background .18s,box-shadow .18s; }
.guide-primary:hover { background:#113c82; box-shadow:0 5px 15px #15366320; }
.guide-primary > span { font-size:19px; line-height:16px; }
.guide-hero-note { display:flex; align-items:center; gap:10px; margin-top:23px; font-size:10px; color:#697381; }
.guide-hero-note i { width:3px; height:3px; border-radius:50%; background:#a6aeb9; }
.guide-real-art { position:relative; margin:0; padding:25px 0 63px; min-width:0; }
.guide-art-orbit { position:absolute; inset:-20px -8px 0 15%; background:radial-gradient(ellipse,#dbe5f1 0%,#e8edf3 40%,transparent 72%); pointer-events:none; }
.guide-real-page { position:relative; padding:12px; border:1px solid #dce1e8; border-radius:11px; background:#fff; transform:rotate(-2deg); box-shadow:0 20px 45px -18px #1d33494a,0 3px 8px #1d334908; }
.guide-comic-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:8px; color:#7b8697; padding:2px 0 11px; }
.guide-comic-top b { color:var(--guide-blue); font-size:8px; letter-spacing:.06em; }
.guide-real-page > img { display:block; width:100%; height:auto; border-radius:5px; }
.guide-real-detail { position:absolute; width:42%; right:6px; bottom:3px; padding:6px; background:#fff; border:1px solid #dce1e8; border-radius:8px; transform:rotate(5deg); box-shadow:0 12px 28px -8px #1d334952; }
.guide-real-detail img { display:block; width:100%; border-radius:3px; }
/* Clear chapter boundaries, consistent titles, quieter supporting text. */
.guide-section { scroll-margin-top:90px; }
.guide-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:36px; }
.guide-section-head .guide-eyebrow { font-family:Consolas,monospace; font-size:10px; margin-bottom:13px; }
.guide-section-head h2 { color:#182330; font-size:36px; font-weight:750; line-height:1.25; letter-spacing:-.045em; margin:0; }
.guide-section-head > p { color:var(--guide-muted); font-size:13px; line-height:1.8; margin:0 0 3px; }
#guide-features { border-top:1px solid var(--guide-line); padding:64px 0 0; }
.guide-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.guide-feature { min-width:0; background:#fff; border:1px solid #e2e5e9; border-radius:15px; overflow:hidden; box-shadow:0 4px 12px #1c304004; }
.guide-feature-visual { position:relative; height:275px; padding:34px 21px 21px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #e5e7eb; }
.guide-paper-visual { background:#efece7; }
.guide-reader-visual { background:#e8edf3; }
.guide-video-visual { background:#ebece7; }
.guide-feature-visual > img { display:block; max-width:100%; box-shadow:0 12px 24px -8px #263f4f45; border:1px solid #d9dfe4; }
.guide-real-pdf { width:auto; height:225px; transform:rotate(-4deg); }
.guide-real-reader { width:100%; height:auto; max-height:225px; object-fit:contain; transform:rotate(2deg); border-radius:5px; }
.guide-real-video { width:100%; height:auto; object-fit:contain; transform:rotate(-2deg); border-radius:6px; }
.guide-format { position:absolute; top:15px; right:15px; background:#ffffffd9; border:1px solid #ffffff; border-radius:5px; padding:5px 7px; color:#566478; font:9px Consolas,monospace; letter-spacing:.07em; }
.guide-feature-copy { padding:24px; }
.guide-feature-index { display:flex; align-items:center; justify-content:space-between; color:#9099a6; font:10px Consolas,monospace; }
.guide-dot { display:inline-block; flex-shrink:0; width:8px; height:8px; }
.red-dot { background:var(--red); }
.blue-dot { background:var(--guide-blue); border-radius:50%; }
.yellow-dot { background:var(--yellow); clip-path:polygon(50% 0,100% 100%,0 100%); }
.dark-dot { background:#354254; border-radius:2px; }
.guide-feature h3 { margin:14px 0 12px; font-size:21px; font-weight:700; color:#24303f; }
.guide-feature p { color:var(--guide-muted); font-size:12px; line-height:1.95; margin:0 0 24px; }
.guide-use { display:block; border-top:1px solid #ebedf0; padding-top:16px; color:#798290; font-size:10px; }
.guide-support { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:36px 4px 0; }
.guide-support > div { position:relative; padding-left:34px; }
.guide-support > div > span { position:absolute; left:0; top:0; color:#61768e; font-size:20px; }
.guide-support h3 { color:#344252; font-size:13px; font-weight:650; margin:0 0 10px; }
.guide-support p { color:#697381; font-size:11px; line-height:1.9; margin:0; }
/* Light, illustrated steps share the surrounding chapters' left edge. */
.guide-workflow { margin:90px 0; padding:54px 0 58px; border-top:1px solid var(--guide-line); border-bottom:1px solid var(--guide-line); }
.guide-workflow .guide-section-head { margin-bottom:36px; }
.guide-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; padding:0; margin:0; list-style:none; }
.guide-steps li { grid-column:span 2; min-width:0; padding:23px; border:1px solid #e1e5eb; border-radius:13px; background:white; }
.guide-steps li:nth-child(n+4) { grid-column:span 3; }
.guide-step-heading { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.guide-step-heading > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border:1px solid #d6e0ee; border-radius:50%; background:#f3f6fb; color:var(--guide-blue); font:11px Consolas,monospace; }
.guide-steps li:last-child .guide-step-heading > span { background:#edf3ed; color:#52745a; border-color:#d8e4d9; }
.guide-steps h3 { color:#29394c; font-size:16px; line-height:1.5; font-weight:650; margin:0 0 4px; }
.guide-steps small { color:#768496; font-size:10px; line-height:1.6; }
.guide-steps p { color:var(--guide-muted); font-size:12px; line-height:1.9; margin:18px 0 0; }
.guide-step-image { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:185px; padding:12px; background:#f6f8fb; border:1px solid #e5eaf0; border-radius:8px; overflow:hidden; cursor:zoom-in; }
.guide-step-image img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; filter:drop-shadow(0 3px 5px #2439510c); }
.guide-step-image > span { position:absolute; bottom:7px; right:7px; display:grid; place-items:center; width:24px; height:24px; border:1px solid #dbe2ec; border-radius:5px; background:#fffffff0; color:#637d9d; font-size:15px; }
.guide-step-image:hover { border-color:#9bb2d1; background:#eef3f9; }
.guide-steps li:nth-child(n+4) .guide-step-image { height:245px; }
.guide-image-dialog { width:fit-content; max-width:min(1120px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid #dce3ec; border-radius:13px; background:#f8fafc; box-shadow:0 30px 100px #10233c40; overflow:auto; }
.guide-image-dialog::backdrop { background:#14223580; backdrop-filter:blur(5px); }
.guide-image-dialog header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:36px; padding:14px 18px; border-bottom:1px solid #e2e7ee; background:#fff; }
.guide-image-dialog header h2 { margin:0; font-size:16px; color:#29394c; }
.guide-image-dialog header button { width:32px; height:32px; border:1px solid #e2e7ee; border-radius:7px; background:#fff; color:#53647a; font-size:23px; cursor:pointer; }
.guide-image-dialog > img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 112px); margin:auto; object-fit:contain; }
/* Architecture remains detailed, with neutral frames and a supporting rail. */
.guide-system { background:#fff; border:1px solid var(--guide-line); border-radius:16px; overflow:hidden; box-shadow:0 5px 20px #213a4c03; }
.guide-system-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:23px 28px; border-bottom:1px solid #e5e9ee; }
.guide-system-heading b { font-size:13px; font-weight:650; color:#3b4a5f; }
.guide-system-heading > span { color:#8190a2; font-size:10px; }
.guide-system-body { display:grid; grid-template-columns:minmax(0,1fr) 245px; }
.guide-system-pipeline { padding:28px; }
.guide-system-layer { display:grid; grid-template-columns:90px minmax(0,1fr); border:1px solid #e3e7ed; border-radius:9px; overflow:hidden; }
.guide-system-label { display:flex; flex-direction:column; align-items:start; gap:9px; padding:18px 12px; border-right:1px solid #e5e9ef; background:#f7f9fb; }
.guide-system-label > span { font:10px Consolas,monospace; color:#8493a6; margin-bottom:3px; }
.guide-system-label > b { color:#3b4b60; font-size:12px; }
.guide-system-label > small { color:#8995a5; font-size:9px; line-height:1.65; }
.guide-system-content { padding:20px; min-width:0; }
.guide-system-content h3 { margin:0 0 10px; color:#36465c; font-size:13px; font-weight:650; line-height:1.7; }
.guide-system-content p { color:#657184; font-size:11px; line-height:1.95; margin:0; }
.guide-system-chips { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 4px; }
.guide-system-chips > span { color:#68798f; font-size:9px; line-height:1.6; padding:4px 7px; border:1px solid #e7ebf1; border-radius:4px; background:#f8fafc; }
.guide-system-chips + p { margin-top:12px; }
.guide-system-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 0; color:#a3b0c1; font-size:14px; }
.guide-system-link > span { font-size:9px; color:#6b798d; line-height:1.7; }
.guide-system-blue { border-color:#d5dfed; }
.guide-system-blue .guide-system-label { background:#edf2f9; }
.guide-system-blue .guide-system-content { background:#fafcff; }
.guide-capability-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.guide-capability-grid h3 { margin:9px 0 5px; font-size:12px; }
.guide-system-content .guide-system-footnote { font-size:9px; color:#6d7a8c; padding-top:14px; margin-top:18px; border-top:1px solid #ecf0f4; }
.guide-system-review { border-color:#e5dec9; }
.guide-system-review .guide-system-label { background:#faf7ee; }
.guide-review-loop { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:15px; color:#c0b393; font-size:9px; }
.guide-review-loop > b { background:#faf7ef; border-radius:4px; padding:6px 8px; color:#8a7857; font-size:9px; font-weight:500; }
.guide-output-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.guide-output-grid > div { border-top:2px solid #ce7c75; padding-top:12px; }
.guide-output-grid > div:nth-child(2) { border-color:#7b98c0; }
.guide-output-grid > div:nth-child(3) { border-color:#d6b66f; }
.guide-output-grid b { font-size:11px; color:#46556a; }
.guide-output-grid p { font-size:9px; margin-top:8px; }
.guide-system-rail { padding:28px 22px; background:#f6f8fb; border-left:1px solid #e5e9ef; }
.guide-system-rail > .guide-eyebrow { color:#8d9bad; font:9px Consolas,monospace; letter-spacing:.14em; margin-bottom:10px; }
.guide-system-rail > h3 { color:#43516a; font-size:16px; margin:0 0 27px; }
.guide-system-rail > section { padding-bottom:23px; margin-bottom:23px; border-bottom:1px solid #e4e9ef; }
.guide-system-rail > section > span { color:#8193ad; font-size:19px; }
.guide-system-rail h4 { color:#5a6980; font-size:12px; margin:9px 0; }
.guide-system-rail p { color:#69778a; font-size:11px; line-height:1.95; margin:0; }
.guide-system-boundary { padding:15px; border:1px solid #e0e6ef; border-radius:7px; background:#edf2f8; }
.guide-system-boundary > b { color:#657893; font-size:11px; }
.guide-system-boundary > p { font-size:10px; margin-top:9px; }
.guide-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:85px; padding:44px 0 16px; border-top:1px solid var(--guide-line); }
.guide-footer .guide-eyebrow { color:#97a0ad; font:9px Consolas,monospace; letter-spacing:.13em; margin-bottom:16px; }
.guide-footer h2 { color:#3b495c; font-size:23px; font-weight:650; letter-spacing:-.04em; margin:0; line-height:1.6; }
@media(min-width:1700px) {
  .guide-hero { min-height:610px; gap:60px; }
  .guide-feature-visual { height:310px; }
  .guide-real-pdf { height:260px; }
  .guide-real-reader { max-height:260px; }
}
@media(max-width:1150px) {
  .guide-hero { gap:25px; min-height:490px; padding:65px 0 85px; }
  .guide-hero h2 { font-size:36px; }
  .guide-section-head h2 { font-size:32px; }
  .guide-feature-visual { height:235px; padding:30px 15px 16px; }
  .guide-real-pdf { height:190px; }
  .guide-real-reader { max-height:190px; }
  .guide-feature-copy { padding:21px; }
  .guide-feature h3 { font-size:19px; }
  .guide-system-body { grid-template-columns:minmax(0,1fr) 210px; }
  .guide-system-pipeline { padding:20px; }
  .guide-system-layer { grid-template-columns:76px minmax(0,1fr); }
  .guide-system-label { padding:16px 10px; }
  .guide-system-content { padding:16px; }
  .guide-system-rail { padding:26px 18px; }
  .guide-output-grid { grid-template-columns:1fr; }
  .guide-output-grid > div { border-top:0; border-left:2px solid #ce7c75; padding:0 0 0 10px; }
  .guide-output-grid p { margin-top:4px; }
  .guide-output-grid p br { display:none; }
}
@media(max-width:760px) {
  .guide-nav { top:60px; }
  .guide-section { scroll-margin-top:155px; }
}
@media(max-width:800px) {
  .guide-hero { grid-template-columns:1fr; gap:25px; padding:55px 0 75px; }
  .guide-hero h2 { font-size:44px; }
  .guide-real-art { max-width:560px; width:100%; margin:0 auto; }
  .guide-nav > div { gap:20px; }
  .guide-nav a small { display:none; }
  .guide-section-head { align-items:start; flex-direction:column; gap:15px; }
  .guide-feature-grid { grid-template-columns:1fr; gap:20px; }
  .guide-feature { display:grid; grid-template-columns:42% minmax(0,1fr); }
  .guide-feature-visual { height:100%; min-height:250px; border-bottom:0; border-right:1px solid #e5e7eb; }
  .guide-feature-copy { padding:25px; }
  .guide-support { gap:22px; }
  .guide-support > div { padding-left:0; }
  .guide-support > div > span { position:static; display:block; margin-bottom:10px; }
  .guide-system-body { grid-template-columns:1fr; }
  .guide-system-rail { border-left:0; border-top:1px solid #e5e9ef; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .guide-system-rail > .guide-eyebrow, .guide-system-rail > h3, .guide-system-boundary { grid-column:1/-1; margin:0; }
  .guide-system-rail > section { margin:0; }
  .guide-footer { margin-top:65px; align-items:start; flex-direction:column; }
}
@media(max-width:500px) {
  .guide-nav { min-height:60px; gap:12px; }
  .guide-nav > span { font-size:10px; gap:6px; }
  .guide-nav > div { gap:14px; }
  .guide-nav a { font-size:11px; padding:20px 0; }
  .guide-entry { font-size:11px; padding:9px; gap:6px; }
  .guide-hero { padding:42px 0 62px; gap:15px; }
  .guide-hero h2 { font-size:35px; }
  .guide-lede { font-size:13px; }
  .guide-hero-copy { padding-bottom:0; }
  .guide-real-art { padding-top:20px; }
  .guide-real-detail { width:46%; bottom:15px; }
  #guide-features { padding-top:42px; }
  .guide-section-head h2 { font-size:30px; }
  .guide-section-head { margin-bottom:28px; }
  .guide-section-head > p { font-size:12px; }
  .guide-feature { display:block; }
  .guide-feature-visual { height:275px; border-right:0; border-bottom:1px solid #e5e7eb; }
  .guide-real-pdf { height:225px; }
  .guide-real-reader { max-height:225px; }
  .guide-support { grid-template-columns:1fr; gap:24px; }
  .guide-support > div { padding-left:33px; }
  .guide-support > div > span { position:absolute; }
  .guide-system-heading { padding:18px; align-items:start; flex-direction:column; gap:8px; }
  .guide-system-pipeline { padding:12px; }
  .guide-system-layer { grid-template-columns:1fr; }
  .guide-system-label { flex-direction:row; align-items:center; padding:11px 13px; border-right:0; border-bottom:1px solid #e5e9ef; }
  .guide-system-label > span { margin:0; }
  .guide-system-label > small { margin-left:auto; }
  .guide-system-link { align-items:start; gap:5px; }
  .guide-system-link > span { font-size:8px; }
  .guide-capability-grid, .guide-system-rail { grid-template-columns:1fr; }
  .guide-system-rail > .guide-eyebrow, .guide-system-rail > h3, .guide-system-boundary { grid-column:auto; }
  .guide-footer { padding-top:32px; margin-top:55px; }
  .guide-footer h2 { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .guide-view *, .guide-entry { transition:none; }
}

@media(max-width:1150px) {
  .guide-steps { gap:16px; }
  .guide-steps li { padding:18px; }
  .guide-step-heading { gap:10px; }
  .guide-steps h3 { font-size:14px; }
}
@media(max-width:800px) {
  .guide-workflow { margin:68px 0; padding:42px 0; }
  .guide-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guide-steps li, .guide-steps li:nth-child(n+4) { grid-column:auto; }
  .guide-steps li:last-child { grid-column:1/-1; }
  .guide-steps li:nth-child(n+4) .guide-step-image { height:185px; }
  .guide-steps li:last-child .guide-step-image { height:280px; }
}
@media(max-width:500px) {
  .guide-workflow { margin:52px 0; padding:38px 0; }
  .guide-steps { grid-template-columns:1fr; gap:18px; }
  .guide-steps h3 { font-size:16px; }
  .guide-step-image, .guide-steps li:nth-child(n+4) .guide-step-image, .guide-steps li:last-child .guide-step-image { height:215px; }
  .guide-image-dialog header { padding:11px 13px; }
}