/* Converter additions use the existing handbook palette and page structure. */
html { scroll-padding-top:calc(var(--header-height) + var(--guide-nav-height, 125px) + 16px); }
.guide-switch { display:grid; grid-template-columns:1fr 1fr; gap:26px; border-bottom:1px solid var(--line); }
.guide-switch a { display:flex; gap:16px; align-items:center; min-height:65px; padding:12px 0; color:var(--muted); border-bottom:3px solid transparent; }
.guide-switch strong { font-weight:600; font-size:15px; }
.guide-switch span { font-size:11px; }
.guide-switch a[aria-current] { color:var(--brand-deep); border-color:var(--brand-deep); }
.guide-switch a:hover { color:var(--brand-deep); }
.guide-hero-link { display:block; width:fit-content; color:#c7e4f0; font-size:12px; line-height:1.7; margin-top:22px; text-decoration:underline; text-underline-offset:4px; }
.guide-convert-cover .hero-visual { width:110%; margin-left:0; }
.guide-convert-cover .hero-visual img { mask-image:linear-gradient(to right,transparent,#000 15%,#000 85%,transparent); }
.guide-routes { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:30px 0; padding:24px 0; border-block:1px solid var(--line); }
.guide-routes strong { display:block; font-size:17px; font-weight:550; }
.guide-routes p { color:var(--muted); font-size:13px; line-height:1.7; margin-top:6px; }
.guide-routes a { display:inline-flex; gap:18px; align-items:center; min-height:44px; font-weight:600; font-size:13px; color:var(--brand-deep); text-decoration:underline; text-underline-offset:5px; }
.guide-start { margin-top:30px; color:var(--muted); font-size:14px; line-height:1.8; max-width:900px; }
.guide-start strong { color:var(--ink); }
.guide-start a, .cg-note a, .cg-export a { color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; }
.guide-end-note { margin:22px 0 55px; max-width:780px; }
.guide-convert-cover h1 { white-space:normal; }
.repair-jumps { display:flex; flex-wrap:wrap; gap:12px 24px; border-block:1px solid var(--line); padding:12px 0; }
.repair-jumps a { display:inline-flex; align-items:center; min-height:36px; font-size:13px; color:var(--brand-deep); text-decoration:underline; text-underline-offset:4px; }
.repair-example { padding-top:40px; }
.repair-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.repair-heading h3 { font-family:var(--display); font-size:27px; font-weight:500; letter-spacing:-.03em; }
.repair-heading .text-link { margin:0; }
.repair-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.repair-pair figure { background:white; border-radius:12px; overflow:hidden; }
.repair-pair .cg-status { padding:21px 23px 0; }
.repair-pair svg { width:100%; max-height:310px; padding:10px 15px; }
.repair-pair figcaption { padding:15px 23px 23px; font-size:15px; font-weight:550; }
.repair-example > p { margin-top:18px; font-size:14px; line-height:1.8; color:var(--muted); max-width:850px; }
.repair-example > .cg-note { font-size:12px; margin-top:8px; }
.repair-metal img { width:100%; height:auto; }
.cg-sheet { scroll-margin-top:0; }
@media(max-width:800px) {
  .guide-switch a { display:grid; gap:4px; }
  .guide-switch strong { font-size:13px; }
  .guide-switch span { font-size:10px; }
  .guide-convert-cover .hero-visual { width:125%; margin-left:-10%; }
}
@media(max-width:600px) {
  .guide-switch { gap:16px; }
  .guide-switch a { min-height:67px; }
  .guide-switch span { font-size:9px; }
  .guide-routes { grid-template-columns:1fr; gap:22px; }
  .guide-routes > div+div { padding-top:22px; border-top:1px solid var(--line); }
  .guide-convert-cover .hero-visual { width:calc(100% + 40px); margin:0 -20px; }
  .guide-hero-link { font-size:11px; }
  .repair-heading { align-items:flex-start; flex-direction:column; gap:12px; }
  .repair-heading h3 { font-size:25px; }
  .repair-pair { grid-template-columns:1fr; gap:18px; }
  .repair-jumps { gap:4px 20px; }
  .repair-jumps a { font-size:12px; }
}
@media print { .guide-switch, .guide-routes { display:none; } .repair-example { break-inside:avoid; } }
.cg-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.cg-journey figure { position:relative; min-width:0; }
.cg-journey figure:not(:last-child)::after { content:'→'; position:absolute; top:calc(50% - 56px); right:-25px; z-index:2; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--brand-deep); color:white; font-size:17px; }
.cg-stage { position:relative; overflow:hidden; border-radius:12px; background:white; aspect-ratio:1.22; display:flex; align-items:center; }
.cg-stage-label { position:absolute; top:18px; left:18px; z-index:1; font-size:9px; font-weight:650; letter-spacing:.08em; color:var(--brand-deep); }
.cg-stage .cg-drawing { width:100%; margin-top:25px; }
.cg-metal { background:#849ea5; }
.cg-metal .cg-stage-label { color:#173c48; background:#ffffffd9; padding:7px 9px; border-radius:4px; top:12px; left:12px; }
.cg-metal img { width:100%; height:100%; object-fit:cover; }
.cg-journey figcaption { padding:20px 2px 0; }
.cg-journey h3 { font-size:20px; }
.cg-journey figcaption p, .cg-action-row p, .cg-steps p, .cg-formats p, .cg-formats-heading p, .cg-rule-copy p, .cg-bad-grid p, .cg-pdf p, .cg-sizing p { font-size:14px; line-height:1.7; color:var(--muted); }
.cg-journey figcaption p { margin-top:8px; }
.cg-action-row { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:28px 0; margin-top:25px; border-block:1px solid var(--line); }
.cg-action-row strong { color:var(--ink); font-weight:550; }
.cg-action-row .button { flex-shrink:0; }
.cg-steps { list-style:none; margin:34px 0 45px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.cg-steps li > span { display:block; font-size:12px; color:var(--brand-mid); margin-bottom:15px; }
.cg-steps h3 { font-size:17px; margin-bottom:8px; }
.cg-steps strong { font-weight:550; color:var(--ink); }
.cg-formats-heading { margin-bottom:22px; }
.cg-formats-heading h3 { font-size:25px; margin-bottom:8px; }
.cg-formats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.cg-formats article { padding-top:20px; border-top:2px solid #bed1db; }
.cg-format-tag { display:block; font-size:9px; letter-spacing:.08em; color:var(--brand-mid); min-height:27px; line-height:1.6; }
.cg-formats h3 { font-size:24px; margin-bottom:12px; }
.cg-formats a { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-size:12px; text-decoration:underline; text-underline-offset:4px; color:var(--brand-deep); }
.cg-note, .cg-rule-copy .cg-note, .cg-sizing .cg-note { font-size:12px; line-height:1.75; color:var(--muted); }
.cg-converter > .cg-note, .cg-artwork > .cg-note { margin-top:20px; }
.cg-sheet { border-block:1px solid var(--line); margin-top:25px; scroll-margin-top:0; }
.cg-sheet summary { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; font-weight:550; list-style:none; }
.cg-sheet summary::-webkit-details-marker { display:none; }
.cg-sheet[open] summary > span:last-child { transform:rotate(45deg); }
.cg-sheet-content { padding-bottom:24px; }
.cg-sheet img { width:100%; height:auto; border-radius:10px; }
.cg-sheet figcaption { font-size:13px; line-height:1.7; color:var(--muted); margin-top:14px; }
.cg-sheet figcaption strong { display:block; color:var(--ink); }
.cg-sheet-content > p { margin-top:20px; }
.cg-artwork-rule { display:grid; grid-template-columns:1fr 1fr; background:var(--brand-mist); border-radius:14px; overflow:hidden; }
.cg-artwork-rule > figure { background:white; display:flex; flex-direction:column; justify-content:center; }
.cg-artwork-rule .cg-drawing { width:100%; }
.cg-artwork-rule figcaption { padding:8px 28px 28px; display:grid; gap:12px; }
.cg-artwork-rule figcaption strong { font-size:16px; font-weight:550; }
.cg-status { display:block; font-size:10px; font-weight:650; letter-spacing:.07em; }
.cg-good { color:#326044; }
.cg-bad { color:#91442e; }
.cg-rule-copy { padding:35px; }
.cg-rule-copy h3 { font-family:var(--display); font-size:34px; font-weight:500; letter-spacing:-.04em; margin-bottom:18px; }
.cg-rule-copy p + p { margin-top:18px; }
.cg-legend { display:grid; gap:12px; margin:22px 0; font-size:13px; }
.cg-legend > span { display:flex; gap:12px; align-items:center; }
.cg-legend i { display:block; width:21px; height:21px; flex-shrink:0; border:1px solid #8499a3; border-radius:50%; }
.cg-black { background:black; }
.cg-white { background:white; }
.cg-bad-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:23px; margin-top:30px; }
.cg-example-image { aspect-ratio:1.35; overflow:hidden; display:flex; align-items:center; background:white; border-radius:10px; }
.cg-example-image > img { width:100%; height:100%; object-fit:cover; }
.cg-example-image .cg-drawing { width:100%; }
.cg-bad-grid figcaption { padding-top:17px; }
.cg-bad-grid h3 { font-size:17px; margin:10px 0 8px; }
.cg-bad-grid p { font-size:13px; }
.cg-export { display:grid; grid-template-columns:1fr 1.5fr; gap:45px; margin:40px 0; padding:32px 0; border-block:1px solid var(--line); }
.cg-export .eyebrow, .cg-pdf .eyebrow, .cg-sizing .eyebrow { color:var(--brand-mid); margin-bottom:12px; }
.cg-export h3, .cg-pdf h3, .cg-sizing h3 { font-family:var(--display); font-size:27px; font-weight:500; line-height:1.3; letter-spacing:-.03em; }
.cg-export ul { margin:0; padding-left:18px; display:grid; gap:15px; font-size:14px; line-height:1.7; color:var(--muted); }
.cg-export strong { color:var(--ink); font-weight:550; }
.cg-export li::marker { color:var(--brand-mid); }
.cg-pdf { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px; align-items:center; }
.cg-pdf p { margin-top:14px; }
.cg-pdf-page { background:white; padding:16px; border:1px solid var(--line); border-radius:4px 24px 4px 4px; }
.cg-pdf-page > span { font-size:11px; color:var(--brand-mid); font-weight:650; }
.cg-pdf-page > img, .cg-pdf-page > svg { width:100%; aspect-ratio:1.4; object-fit:contain; margin:12px 0 0; }
.cg-pdf figcaption { margin-top:14px; }
.cg-sizing { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; margin-top:35px; padding:35px; background:var(--brand-mist); border-radius:14px; }
.cg-sizing h3 { margin-bottom:14px; }
.cg-sizing label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:12px; margin-top:25px; color:var(--brand-deep); }
.cg-sizing output { font-weight:650; font-variant-numeric:tabular-nums; }
.cg-sizing input { width:100%; min-height:44px; margin:3px 0; accent-color:var(--brand-deep); cursor:pointer; }
.cg-sizing input:focus-visible { outline:3px solid #4383a0; outline-offset:3px; }
.cg-sizing > svg { width:100%; }
@media(max-width:1000px) {
  .cg-stage-label { font-size:8px; left:12px; }
  .cg-journey h3 { font-size:17px; }
  .cg-journey figcaption p br { display:none; }
  .cg-formats, .cg-bad-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .cg-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cg-rule-copy { padding:26px; }
  .cg-rule-copy h3 { font-size:29px; }
  .cg-sizing { padding:25px; gap:20px; }
  .cg-pdf { gap:20px; }
}
@media(max-width:700px) {
  .cg-journey { grid-template-columns:1fr; gap:32px; }
  .cg-stage { aspect-ratio:1.5; }
  .cg-stage-label { font-size:10px; top:18px; left:18px; }
  .cg-stage .cg-drawing { height:100%; margin:15px 0 0; }
  .cg-metal img { object-fit:contain; }
  .cg-journey figure:not(:last-child)::after { display:none; }
  .cg-journey h3 { font-size:20px; }
  .cg-journey figcaption { padding-top:15px; }
  .cg-action-row { align-items:flex-start; flex-direction:column; gap:20px; }
  .cg-artwork-rule { grid-template-columns:1fr; }
  .cg-artwork-rule figcaption { padding-inline:22px; }
  .cg-rule-copy { padding:26px 22px; }
  .cg-bad-grid { gap:25px 16px; }
  .cg-bad-grid h3 { font-size:16px; }
  .cg-bad-grid .cg-status { font-size:9px; letter-spacing:0; }
  .cg-export { grid-template-columns:1fr; gap:22px; }
  .cg-pdf { grid-template-columns:1fr 1fr; gap:22px 16px; }
  .cg-pdf > div { grid-column:1 / -1; }
  .cg-pdf-page { padding:12px; }
  .cg-sizing { grid-template-columns:1fr; padding:26px 22px; gap:12px; }
  .cg-sizing > svg { grid-row:1; max-height:230px; }
  .cg-sheet .comparison { grid-template-columns:1fr; }
}
@media(max-width:380px) {
  .cg-formats, .cg-steps, .cg-bad-grid { grid-template-columns:1fr; }
  .cg-stage-label { font-size:9px; }
}
@media print {
  .cg-action-row .button, .cg-sizing input { display:none; }
  .cg-sheet-content { display:block; }
  .cg-journey, .cg-artwork-rule, .cg-bad-grid, .cg-sizing { break-inside:avoid; }
}