:root{
  --green:#8BC53F;--green-dark:#6FA32A;--green-soft:#E8F5D0;
  --blue:#1B4F9C;--navy:#0A1F44;--blue-mid:#2A6BB5;
  --white:#fff;--paper:#F6F4F0;--paper-2:#EFECE6;
  --gray-50:#F7F9FC;--gray-100:#EEF2F7;--gray-200:#D8E0EA;
  --gray-500:#6B7A90;--gray-700:#3A4658;--gray-900:#1A2332;
  --red:#E11D2E;--red-dark:#C41626;
  --radius:14px;--max:1120px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
  --font-en:"Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --shadow:0 12px 40px rgba(10,31,68,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--gray-900);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,select,textarea,input{font:inherit}
.container{width:min(100% - 2.2rem,var(--max));margin-inline:auto}

.nav{position:sticky;top:0;z-index:40;background:rgba(246,244,240,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(10,31,68,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.7rem}
.logo-mark{width:34px;height:34px;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1.15}
.logo-text strong{font-family:var(--font-en);font-size:1.02rem;font-weight:800;color:var(--navy)}
.logo-text span{font-size:.68rem;color:var(--gray-500)}
.nav-links{display:flex;align-items:center;gap:1.05rem;font-size:.88rem;font-weight:600;color:var(--gray-700)}
.nav-consult{background:#E11D2E;color:#fff!important;padding:.42rem .95rem;border-radius:999px;font-weight:800;box-shadow:0 4px 12px rgba(225,29,46,.35)}

.hero{background:var(--paper);color:var(--navy);padding:3.2rem 0 2.6rem}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:2.4rem;align-items:start}
.hero-copy{padding-top:.2rem}
.hero-kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#3d5a12;background:var(--green-soft);border:1px solid rgba(139,197,63,.45);padding:.32rem .8rem;border-radius:999px}
.hero-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero h1{margin-top:1rem;font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.35rem);font-weight:700;letter-spacing:.01em;line-height:1.18}
.hero .lead{margin-top:1rem;max-width:38rem;color:var(--gray-700);font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.35rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem 1.35rem;border-radius:999px;font-weight:800;font-size:.92rem;border:0;cursor:pointer;background:none;color:inherit}
.btn-red{background:#E11D2E;color:#fff;box-shadow:0 8px 24px rgba(225,29,46,.28)}
.btn-red:hover{background:#C41626}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid rgba(10,31,68,.22)}
.btn-ghost-dark{background:#fff;color:var(--navy);border:1px solid var(--gray-200)}
.btn-sm{padding:.5rem .95rem;font-size:.84rem;margin-top:.6rem}

.metrics{display:flex;flex-wrap:wrap;gap:0;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid rgba(10,31,68,.1);list-style:none}
.metrics li{flex:1;min-width:5.5rem;padding-right:1rem}
.metrics b{display:block;font-family:var(--serif);font-size:1.7rem;line-height:1.1;font-weight:700;color:var(--navy)}
.metrics span{display:block;margin-top:.25rem;font-size:.78rem;color:var(--gray-500)}

.hero-fig{margin:0;background:#fff;border:1px solid rgba(10,31,68,.08);padding:.7rem .7rem 0;box-shadow:var(--shadow)}
.hero-fig img{width:100%;aspect-ratio:1;object-fit:cover;background:#f3f5f8}
.hero-fig figcaption{font-size:.75rem;color:var(--gray-500);padding:.7rem .15rem .85rem}

.sec{padding:4.2rem 0 1.2rem}
.sec-head{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;margin-bottom:2rem}
.label-line{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--gray-500)}
.label-line.light{color:rgba(255,255,255,.55)}
.sec-title{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.45rem);line-height:1.2;font-weight:700;color:var(--navy);margin-top:.45rem}
.sec-note{max-width:22rem;font-size:.92rem;color:var(--gray-500);line-height:1.7;padding-bottom:.2rem}

.levels{display:grid;gap:0;border-top:1px solid rgba(10,31,68,.1)}
.level{display:grid;grid-template-columns:5.2rem 1fr;gap:1.2rem;padding:1.5rem 0;border-bottom:1px solid rgba(10,31,68,.1)}
.level .num{font-family:var(--serif);font-size:1.35rem;color:var(--gray-500);padding-top:.15rem}
.level h3{font-family:var(--serif);font-size:1.28rem;font-weight:700;color:var(--navy)}
.level p{margin-top:.4rem;color:var(--gray-700);max-width:46rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.tags span{font-size:.75rem;font-weight:700;color:var(--navy);border:1px solid rgba(10,31,68,.14);background:#fff;border-radius:999px;padding:.22rem .65rem}

.catalog{background:var(--paper-2);padding:4.2rem 0 3.4rem;margin-top:2.4rem}
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.2rem}
.filter{border:1px solid rgba(10,31,68,.14);background:#fff;color:var(--gray-700);border-radius:999px;padding:.38rem .85rem;font-weight:700;font-size:.84rem;cursor:pointer}
.filter.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tpl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.tpl{background:#fff;border:1px solid rgba(10,31,68,.08);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;text-align:left;width:100%;color:inherit}
.tpl:hover,.tpl:focus{border-color:rgba(27,79,156,.4);box-shadow:0 14px 36px rgba(10,31,68,.12);outline:none}
.tpl-visual{position:relative;aspect-ratio:1;background:#f3f5f8;overflow:hidden}
.tpl-visual img{width:100%;height:100%;object-fit:cover}
.tpl-preview{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#0A1F44;line-height:1.15;overflow:hidden;padding:1px}
.tpl-preview .b{font-weight:800;letter-spacing:.04em;font-size:clamp(7px,1.35vw,10px);text-transform:uppercase;opacity:.92}
.tpl-preview .n{font-weight:700;font-size:clamp(8px,1.55vw,12px);margin-top:1px}
.tpl-body{padding:.7rem .8rem .85rem}
.tpl-body h3{font-size:.98rem;color:var(--navy);font-weight:800}
.tpl-body .meta{font-size:.75rem;color:var(--gray-500);margin-top:.15rem}
.tpl-go{display:inline-block;margin-top:.5rem;background:#E11D2E;color:#fff;border-radius:999px;padding:.28rem .7rem;font-size:.78rem;font-weight:800}
.note{margin-top:1.15rem;font-size:.8rem;color:var(--gray-500);max-width:52rem}


.bom-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2rem;align-items:start}
.bom-visual{margin:0;background:#fff;border:1px solid rgba(10,31,68,.08);box-shadow:var(--shadow)}
.bom-visual img{width:100%;aspect-ratio:1;object-fit:cover;background:#f3f5f8}
.bom-visual figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.75rem .9rem .9rem}
.bom-visual figcaption b{font-family:var(--serif);font-weight:700;color:var(--navy)}
.bom-visual figcaption span{color:var(--gray-500);font-size:.84rem}
.bom-list{list-style:none;border-top:1px solid rgba(10,31,68,.1);margin:0}
.bom-item{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.8rem;align-items:start;padding:1rem 0;border-bottom:1px solid rgba(10,31,68,.1)}
.bom-item .n{font-family:var(--serif);font-size:1.05rem;color:var(--gray-500);padding-top:.15rem}
.bom-item h3{font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--navy)}
.bom-item p{margin-top:.25rem;font-size:.9rem;color:var(--gray-700)}
.bom-item .acts{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.4rem}
.bom-flag{font-size:.72rem;font-weight:700;border-radius:999px;padding:.22rem .6rem;white-space:nowrap;margin-top:.15rem}
.bom-flag.diy{background:var(--green-soft);color:#3d5a12;border:1px solid rgba(139,197,63,.45)}
.bom-flag.ask{background:#fff;color:var(--gray-700);border:1px solid rgba(10,31,68,.14)}
.bom-picks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.55rem;margin-top:1.4rem}
.bom-pick{border:1px solid rgba(10,31,68,.1);background:#fff;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;text-align:left;color:inherit}
.bom-pick img{width:100%;aspect-ratio:1;object-fit:cover;background:#f3f5f8}
.bom-pick span{display:block;padding:.35rem .4rem .45rem;font-size:.7rem;font-weight:700;color:var(--navy);line-height:1.3}
.bom-pick.is-on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(10,31,68,.18)}
.ed-bom{margin-top:1rem;border-top:1px solid var(--gray-200);padding-top:.8rem}
.ed-bom h4{font-size:.78rem;color:var(--gray-500);font-weight:700;letter-spacing:.08em;margin-bottom:.45rem}
.ed-bom li{display:flex;justify-content:space-between;gap:.5rem;align-items:center;padding:.32rem 0;border-bottom:1px solid var(--gray-100);font-size:.8rem;color:var(--navy)}
.ed-bom .bom-flag{margin:0}

.compare{padding-top:4.2rem}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.compare-grid figure{margin:0;background:#fff;border:1px solid rgba(10,31,68,.08);position:relative;overflow:hidden}
.compare-grid img{width:100%;aspect-ratio:1;object-fit:cover;background:#f3f5f8}
.compare-grid figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.75rem .9rem .9rem;font-size:.88rem}
.compare-grid figcaption b{font-family:var(--serif);font-weight:700;color:var(--navy)}
.compare-grid figcaption span{color:var(--gray-500)}
.compare-branded .demo-mark{position:absolute;left:40%;top:42%;width:20%;height:28%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#0A1F44;pointer-events:none;line-height:1.15}
.demo-brand{font-weight:800;letter-spacing:.06em;font-size:clamp(8px,1.15vw,12px);text-transform:uppercase}
.demo-title{font-weight:700;font-size:clamp(9px,1.3vw,13px);margin-top:1px}

.tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding-top:1.2rem}
.tl-axis{position:absolute;left:0;right:0;top:2.05rem;height:1px;background:rgba(10,31,68,.16)}
.tl-step{position:relative;padding-top:.2rem}
.tl-step .t{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--gray-500);margin-bottom:1.15rem}
.tl-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--navy);margin:0 0 1rem;position:relative;z-index:1;box-shadow:0 0 0 5px var(--paper)}
.tl-step h3{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--navy)}
.tl-step p{margin-top:.4rem;font-size:.9rem;color:var(--gray-700)}
.tl-step .d{margin-top:.65rem;font-size:.78rem;font-weight:700;color:var(--navy)}

.faq{border-top:1px solid rgba(10,31,68,.1)}
.faq-item{border-bottom:1px solid rgba(10,31,68,.1)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:0;text-align:left;padding:1.05rem 0;cursor:pointer;font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--navy)}
.faq-q .ic{width:18px;height:18px;position:relative;flex-shrink:0}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;background:var(--navy);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-q .ic::before{width:14px;height:1.5px}
.faq-q .ic::after{width:1.5px;height:14px}
.faq-item.is-open .faq-q .ic::after{opacity:0}
.faq-a{display:none;padding:0 2.5rem 1.1rem 0}
.faq-item.is-open .faq-a{display:block}
.faq-a p{color:var(--gray-700);max-width:40rem}

.band{background:linear-gradient(160deg,#071428,#0A1F44 55%,#123A7A);color:#fff;padding:3.2rem 0;margin-top:2.6rem}
.band h2{font-family:var(--serif);font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;margin-top:.45rem}
.band p{margin-top:.55rem;color:rgba(255,255,255,.72);max-width:30rem;font-size:.95rem}
.band-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem;align-items:center}
.consult-box{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:.85rem 1rem}
.consult-box img.qr{width:100px;height:100px;border-radius:10px;background:#fff}
.consult-box .name{font-weight:800}
.consult-box .sub{font-size:.8rem;color:rgba(255,255,255,.65)}

.footer{background:#071428;color:rgba(255,255,255,.55);padding:1.25rem 0;font-size:.84rem;word-break:keep-all}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.7rem}
.footer a{color:rgba(255,255,255,.75)}
.footer strong{color:#fff}

/* Editor */
body.editing .nav{display:none}
.pack-panel{margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--gray-200)}
.pack-note{font-size:.72rem;color:var(--gray-500);line-height:1.45;margin:0 0 .55rem;font-weight:600}
.pack-now{font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:.5rem}
.pack-groups{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.55rem}
.pack-groups button{border:1px solid var(--gray-200);background:#F4F6FA;border-radius:999px;padding:.18rem .5rem;font-size:.7rem;font-weight:700;color:var(--gray-700);cursor:pointer}
.pack-groups button.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.pack-card{border:1px solid var(--gray-200);border-radius:10px;padding:.28rem;background:#fff;cursor:pointer;text-align:center}
.pack-card.is-on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(27,79,156,.28)}
.pack-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#F4F6FA;display:block}
.pack-card span{display:block;font-size:.68rem;font-weight:700;color:var(--navy);margin-top:.22rem;line-height:1.25;min-height:2.5em}
.result-pack{font-size:.85rem;font-weight:700;color:var(--navy);margin:.2rem 0 .8rem}
#view-editor[hidden],#view-catalog[hidden]{display:none}
body.editing{background:#EEF1F6;overflow:hidden}
body.editing #pageFooter{display:none}
#view-editor{display:flex;flex-direction:column;height:100vh;height:100dvh}
.ed-top{display:flex;align-items:center;gap:.6rem;background:#fff;border-bottom:1px solid var(--gray-200);padding:.45rem .7rem;flex-shrink:0}
.ed-back{width:36px;height:36px;border:0;border-radius:50%;background:#EEF2F6;font-size:1.3rem;cursor:pointer;color:var(--navy)}
.ed-title{flex:1;min-width:0}
.ed-title strong{display:block;font-size:.95rem;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-title span{font-size:.72rem;color:var(--gray-500)}
.ed-tabs{display:flex;background:#EEF2F6;border-radius:999px;padding:3px}
.ed-tabs button{border:0;background:none;padding:.28rem .7rem;border-radius:999px;font-weight:700;font-size:.82rem;cursor:pointer;color:var(--gray-700)}
.ed-tabs button.is-on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(10,31,68,.12)}
.ed-save{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:.35rem .8rem;font-weight:800;font-size:.82rem;cursor:pointer}
.ed-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr 280px}
.ed-stage-wrap{display:flex;align-items:center;justify-content:center;padding:.7rem;min-width:0}
.stage{position:relative;width:min(100%,72vh,560px);aspect-ratio:1;background:#fff;border-radius:12px;box-shadow:0 10px 36px rgba(10,31,68,.12);overflow:hidden;touch-action:none;user-select:none}
.stage-base{width:100%;height:100%;object-fit:cover;pointer-events:none}
.print-area{position:absolute;border:1px dashed rgba(27,79,156,.45);border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.layer{position:absolute;transform-origin:center center;cursor:grab;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;line-height:1.15;font-weight:700}
.layer.is-on{cursor:grabbing;outline:1.5px solid #1B4F9C;outline-offset:2px;z-index:5}
.layer img,.layer svg{width:100%;height:100%;object-fit:contain;pointer-events:none}
.handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid #1B4F9C;border-radius:50%;z-index:6}
.handle.br{right:-8px;bottom:-8px;cursor:nwse-resize}
.handle.rot{left:50%;top:-22px;transform:translateX(-50%);cursor:grab;background:#1B4F9C}
.ed-side{background:#fff;border-left:1px solid var(--gray-200);padding:1rem .9rem;overflow:auto}
.ed-side h3{font-size:.88rem;color:var(--navy);margin-bottom:.6rem}
.field{display:block;font-size:.78rem;color:var(--gray-500);font-weight:700;margin-bottom:.7rem}
.field textarea,.field select{width:100%;margin-top:.25rem;border:1px solid var(--gray-200);border-radius:10px;padding:.5rem .6rem;color:var(--navy);background:#fff}
.swatches{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #D8E0EA;cursor:pointer}
.swatch.is-on{box-shadow:0 0 0 2px #1B4F9C}
.prop-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.prop-actions button{border:1px solid var(--gray-200);background:#fff;border-radius:999px;padding:.3rem .65rem;font-size:.78rem;font-weight:700;cursor:pointer}
.prop-actions .danger{color:#E11D2E;border-color:#f3c5c9}
.layout-list{display:grid;gap:.45rem}
.layout-list button{border:1px solid var(--gray-200);background:#F7F9FC;border-radius:10px;padding:.55rem .65rem;text-align:left;cursor:pointer;font-weight:700;font-size:.84rem;color:var(--navy)}
.ed-tip{margin-top:1rem;font-size:.75rem;color:var(--gray-500)}
.ed-tools{display:flex;gap:.35rem;padding:.45rem .55rem calc(.45rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--gray-200);flex-shrink:0;overflow-x:auto}
.ed-tools button{flex:1;min-width:4.4rem;border:0;background:#F4F6FA;border-radius:12px;padding:.4rem .3rem .35rem;font-size:.68rem;font-weight:700;color:var(--navy);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.1rem}
.ed-tools button span{font-size:.95rem}
.ed-tools .primary{background:#E11D2E;color:#fff}
.sticker-pop{position:fixed;inset:0;background:rgba(5,16,36,.45);z-index:80;display:flex;align-items:flex-end;justify-content:center}
.sticker-pop[hidden]{display:none!important}
.sticker-pop-inner{background:#fff;width:min(100%,480px);border-radius:16px 16px 0 0;padding:1rem}
.sticker-pop-inner header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.sticker-pop-inner header button{border:0;background:#EEF2F6;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem}
.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.sticker-grid button{aspect-ratio:1;border:1px solid var(--gray-200);background:#F7F9FC;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.6rem}
.sticker-grid svg{width:36px;height:36px}
.modal{position:fixed;inset:0;background:rgba(5,16,36,.5);z-index:90;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal[hidden]{display:none!important}
.modal-card{background:#fff;border-radius:16px;padding:1.2rem;width:min(100%,440px);color:var(--gray-900)}
.modal-card h3{color:var(--navy);font-size:1.15rem}
.modal-card p{margin:.4rem 0 .8rem;color:var(--gray-500);font-size:.88rem}
.modal-card img{width:100%;border-radius:12px;background:#F3F5F8;margin-bottom:.9rem}
.modal-card img:not([src]),.modal-card img[src='']{display:none}
.modal-actions{display:flex;flex-direction:column;gap:.5rem}
.linkish{border:0;background:none;color:var(--gray-500);font-weight:700;cursor:pointer;padding:.3rem}
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;z-index:100}
.kf-sheet{position:fixed;inset:0;z-index:200;display:none;align-items:flex-end;justify-content:center;background:rgba(5,16,36,.55)}
.kf-sheet.is-open{display:flex}
.kf-sheet-panel{width:100%;max-width:420px;background:#fff;color:#0A1F44;border-radius:18px 18px 0 0;padding:1rem 1.1rem 1.25rem}
.kf-sheet-head{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.65rem}
.kf-sheet-head h3{font-size:1.05rem;font-weight:800}
.kf-sheet-close{width:36px;height:36px;border:0;border-radius:50%;background:#EEF2F6;cursor:pointer;font-size:1.25rem}
.kf-sheet-qr{width:min(220px,70vw);aspect-ratio:1;margin:.35rem auto .75rem;border-radius:10px;border:1px solid #E6EBF0}
.kf-sheet-primary{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;background:#E11D2E;color:#fff!important;font-weight:800}

@media (max-width:980px){
  .nav-links a:not(.nav-consult){display:none}
  .hero{padding:2.1rem 0 1.8rem}
  .hero-grid,.compare-grid,.bom-stage,.sec-head{grid-template-columns:1fr;display:block}
  .bom-picks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sec-head{align-items:flex-start}
  .sec-note{margin-top:1rem;max-width:none}
  .tpl-grid{grid-template-columns:1fr 1fr}
  .level{grid-template-columns:3.2rem 1fr;gap:.8rem}
  .tl{grid-template-columns:1fr;gap:0;padding-top:0}
  .tl-axis{display:none}
  .tl-step{display:grid;grid-template-columns:5.2rem 12px 1fr;column-gap:.7rem;padding:0 0 1.3rem}
  .tl-step .t{grid-column:1;grid-row:1 / span 2;margin:0;align-self:start;padding-top:.15rem}
  .tl-dot{grid-column:2;margin:.45rem 0 0;box-shadow:0 0 0 4px var(--paper)}
  .tl-step h3,.tl-step p,.tl-step .d{grid-column:3}
  .tl-step h3{margin:0}
  .ed-body{grid-template-columns:1fr}
  .ed-side{display:none}
  .ed-side.is-open{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:46vh;z-index:30;border-left:0;border-top:1px solid var(--gray-200);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(10,31,68,.15)}
  body.editing .ed-side.is-open{display:block}
  body.editing .ed-side.is-open.packs-open{max-height:68vh}
  .pack-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .hero h1{font-size:1.85rem}
  .metrics li{min-width:46%;margin-bottom:.7rem}
  .sec{padding:3rem 0 .6rem}
  .catalog{padding:3rem 0 2.4rem}
  .bom-item{grid-template-columns:2.4rem 1fr;gap:.55rem}
  .bom-item .bom-flag{grid-column:2}
  .compare-grid img{aspect-ratio:4/5;object-position:center 35%}
  .band-inner{align-items:stretch}
  .consult-box{width:100%}
  .footer-inner{flex-direction:column;align-items:flex-start}
}