@layer reset, base, layout, components, pages, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
  button:disabled { cursor: default; opacity: .42; }
  [hidden] { display: none !important; }
}
@layer base {
  :root { --paper:#f7f5ee; --white:#fffef9; --ink:#173e35; --text:#42544b; --muted:#6d786f; --sage:#e2e8d9; --sage-deep:#cbd6c1; --line:#dce0d4; --gold:#ae7a36; --red:#963f31; --radius:12px; }
  html { scroll-behavior:smooth; scroll-padding-top:110px; }
  body { background:var(--paper); color:var(--ink); font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,.serif { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; line-height:1.12; }
  h1 { font-size:clamp(42px,5.2vw,76px); }
  h2 { font-size:clamp(32px,3.7vw,51px); }
  h3 { font-size:27px; }
  p { color:var(--text); }
  :focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
  ::selection { background:var(--sage-deep); }
  .skip-link { position:fixed; top:-80px; left:20px; z-index:100; background:var(--ink); color:white; padding:10px 18px; }
  .skip-link:focus { top:12px; }
  .eyebrow { text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:650; color:#4f7151; margin-bottom:18px; }
  .lead { font-size:18px; line-height:1.7; max-width:690px; margin-top:22px; }
  .muted { color:var(--muted); }
  .small { font-size:12px; }
  .text-link { display:inline-flex; align-items:center; gap:12px; text-decoration:none; border-bottom:1px solid #9ea99c; padding-bottom:3px; font-size:14px; }
  .text-link svg { width:17px; height:17px; }
  .icon { width:22px; height:22px; flex:none; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}
@layer layout {
  .wrap { width:min(1320px,calc(100% - 96px)); margin-inline:auto; }
  .section { padding-block:88px; }
  .section-sm { padding-block:48px; }
  .section-head { display:flex; justify-content:space-between; align-items:end; gap:36px; margin-bottom:36px; }
  .section-head p { max-width:440px; }
  .grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
  .stack { display:grid; gap:20px; }
  .split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
  .sage-section { background:var(--sage); }
  .dark-section { background:var(--ink); color:var(--paper); }
  .dark-section p,.dark-section .eyebrow { color:#c1d0be; }
  .dark-section .text-link { color:var(--paper); }
  .divider { border-top:1px solid var(--line); }
  .center { text-align:center; }
  .center .lead { margin-inline:auto; }
  main { min-height:55vh; }
  .page-intro { padding:56px 0 45px; }
  .page-intro h1 { max-width:1000px; }
  .breadcrumb { margin-bottom:32px; display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:12px; }
  .breadcrumb a { text-decoration:none; }
  .breadcrumb span:not(:last-child)::after { content:'/'; padding-left:10px; color:#acb6a8; }
}
@layer components {
  .preview-bar { background:#dfe7d5; text-align:center; font-size:10px; letter-spacing:.1em; padding:7px 20px; color:#38513c; }
  .preview-bar a { margin-left:8px; }
  .site-header { position:sticky; top:0; z-index:30; background:rgba(247,245,238,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
  .header-inner { display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px; }
  .brand { display:block; position:relative; flex:none; width:250px; aspect-ratio:1850 / 328; overflow:hidden; text-decoration:none; }
  /* Frame the approved PNG's transparent margins without changing its pixels. */
  .brand-logo { position:absolute; width:116.972973%; max-width:none; height:auto; left:-9.945946%; top:-61.585366%; }
  .desktop-nav { display:flex; align-items:center; gap:38px; font-size:13px; }
  .desktop-nav>a,.shop-menu summary { text-decoration:none; padding:10px 0; cursor:pointer; list-style:none; }
  .desktop-nav [aria-current=page] { border-bottom:1px solid var(--ink); }
  .shop-menu { position:relative; }
  .shop-menu summary::-webkit-details-marker { display:none; }
  .shop-menu summary { display:flex; align-items:center; gap:6px; }
  .shop-menu summary svg { width:12px; height:12px; }
  .shop-menu[open] summary { color:#56774e; }
  .shop-dropdown { position:absolute; top:44px; left:-24px; width:240px; padding:12px; border:1px solid var(--line); background:var(--white); border-radius:8px; box-shadow:0 12px 30px #173e3510; }
  .shop-dropdown a { display:block; text-decoration:none; padding:10px 12px; border-radius:5px; }
  .shop-dropdown a:hover { background:var(--sage); }
  .header-actions { display:flex; align-items:center; gap:22px; }
  .cart-link { display:flex; align-items:center; gap:8px; text-decoration:none; }
  .cart-count { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ink); color:white; font-size:10px; }
  .menu-toggle { display:none; border:0; background:none; padding:8px; }
  .mobile-nav { border-top:1px solid var(--line); padding:12px 24px 22px; }
  .mobile-nav a { display:block; padding:9px 0; text-decoration:none; }
  .button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:13px 25px; border:1px solid var(--ink); border-radius:7px; background:var(--ink); color:white; text-decoration:none; font-size:13px; font-weight:550; line-height:1.4; transition:background .2s,transform .2s; }
  .button:hover { background:#285646; }
  .button svg { width:17px; height:17px; }
  .button-outline { background:transparent; color:var(--ink); }
  .button-outline:hover { background:var(--sage); }
  .button-light { background:var(--paper); color:var(--ink); border-color:var(--paper); }
  .button-light:hover { background:white; }
  .button-small { min-height:40px; padding:10px 18px; font-size:12px; }
  .button-block { width:100%; }
  .actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:30px; }
  .badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line); border-radius:20px; font-size:10px; line-height:1.5; color:#50664d; background:#edf0e6; }
  .dot { width:6px; height:6px; border-radius:50%; background:#6c8a5e; display:inline-block; }
  .round-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--sage); color:var(--ink); flex:none; }
  .round-icon .icon { width:27px; height:27px; }
  .notice { padding:17px 20px; background:#e9edde; border:1px solid var(--line); border-radius:7px; color:#4e6049; font-size:12px; }
  .notice p { color:inherit; }
  .notice strong { color:var(--ink); }
  .error-message { color:var(--red); font-size:13px; }
  .card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
  .product-card { min-width:0; }
  .product-card .product-photo { display:block; text-decoration:none; border-radius:10px; overflow:hidden; background:#edf0e5; margin-bottom:19px; }
  .product-card .product-photo:hover img { transform:scale(1.035); }
  .product-card .product-photo img { transition:transform .45s; }
  .product-card h3 { font-size:25px; letter-spacing:-.035em; }
  .product-card h3 a { text-decoration:none; }
  .product-card p { font-size:12px; line-height:1.6; margin-top:8px; min-height:39px; }
  .product-card .card-price { font-size:16px; margin:9px 0 13px; color:var(--ink); }
  .product-card .eyebrow { font-size:9px; margin-bottom:9px; }
  .product-art { position:relative; aspect-ratio:1.32; width:100%; background:#eef0e6; overflow:hidden; border-radius:10px; }
  .product-art>img { width:100%; height:100%; object-fit:contain; }
  .system-art { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:12px; background:#e9ecdf; }
  .system-art img { width:100%; height:100%; object-fit:contain; min-height:0; border-radius:8px; }
  .system-art img:first-child { grid-row:span 2; align-self:center; height:90%; }
  .component-art { display:grid; place-items:center; background:#edf0e5; }
  .component-art svg { width:72%; height:75%; }
  .photo-caption { display:block; font-size:10px; color:var(--muted); margin-top:9px; }
  .field label,.field-label { display:block; font-size:12px; font-weight:550; color:var(--ink); margin-bottom:7px; }
  input,select,textarea { border:1px solid #cdd5c7; border-radius:5px; background:var(--white); color:var(--ink); width:100%; padding:12px 13px; min-height:46px; font-size:13px; }
  input::placeholder,textarea::placeholder { color:#879087; }
  textarea { resize:vertical; min-height:140px; }
  input[type=checkbox],input[type=radio] { width:17px; min-height:17px; accent-color:var(--ink); }
  .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field-grid .full { grid-column:1/-1; }
  .search-field { position:relative; }
  .search-field .icon { position:absolute; left:15px; top:14px; width:19px; height:19px; color:var(--muted); }
  .search-field input { padding-left:46px; }
  .tabs { display:flex; flex-wrap:wrap; gap:9px; }
  .tab { display:inline-flex; align-items:center; justify-content:center; padding:10px 19px; border:1px solid var(--line); border-radius:6px; color:var(--text); background:transparent; text-decoration:none; font-size:12px; }
  .tab[aria-current=true],.tab[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:white; }
  .quantity { display:inline-flex; align-items:center; border:1px solid #cdd5c7; border-radius:6px; overflow:hidden; flex:none; }
  .quantity button { border:0; background:none; padding:9px 13px; min-height:40px; min-width:36px; color:var(--ink); font-size:18px; }
  .quantity span { min-width:30px; text-align:center; font-size:13px; }
  .quantity input { border:0; width:52px; padding:8px; text-align:center; border-radius:0; }
  .accordion { border-top:1px solid var(--line); }
  .accordion details { border-bottom:1px solid var(--line); }
  .accordion summary { cursor:pointer; list-style:none; padding:21px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--ink); font-size:15px; }
  .accordion summary::-webkit-details-marker { display:none; }
  .accordion summary::after { content:'+'; font-size:22px; font-weight:300; }
  .accordion details[open] summary::after { content:'−'; }
  .accordion details>div { color:var(--text); font-size:14px; line-height:1.9; padding:0 30px 24px 0; }
  .accordion p+p { margin-top:12px; }
  .check-list { list-style:none; padding:0; margin:22px 0; }
  .check-list li { display:flex; gap:11px; align-items:start; color:var(--text); font-size:13px; padding:7px 0; }
  .check-list li::before { content:'✓'; color:#5c7852; flex:none; }
  .empty { text-align:center; padding:80px 20px; }
  .empty .round-icon { margin:0 auto 22px; width:70px; height:70px; }
  .empty h2 { margin-bottom:20px; }
  .empty p { max-width:510px; margin-inline:auto; }
  .empty .actions { justify-content:center; }
  .toast { position:fixed; left:50%; bottom:30px; z-index:90; background:var(--ink); color:white; padding:15px 24px; border-radius:8px; transform:translate(-50%,30px); opacity:0; pointer-events:none; box-shadow:0 8px 35px #173e3520; transition:opacity .2s,transform .2s; font-size:13px; max-width:calc(100% - 32px); }
  .toast.visible { transform:translate(-50%,0); opacity:1; }
  .site-footer { border-top:1px solid var(--line); padding:66px 0 25px; background:#efeee5; }
  .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
  .footer-brand p { max-width:260px; font-size:13px; margin-top:20px; }
  .footer-links h3 { font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.08em; margin-bottom:19px; text-transform:uppercase; }
  .footer-links a { display:block; text-decoration:none; font-size:12px; padding:5px 0; color:var(--text); }
  .footer-bottom { margin-top:48px; padding-top:20px; border-top:1px solid #d7ddcf; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:10px; }
}
@layer pages {
  .hero { padding:30px 0 36px; }
  .hero-grid { display:grid; grid-template-columns:.94fr 1.06fr; gap:58px; align-items:center; }
  .hero-copy { padding:40px 0; }
  .hero h1 { font-size:clamp(46px,5vw,73px); }
  .hero-copy .lead { max-width:500px; font-size:16px; margin-top:24px; }
  .hero-copy .text-link { margin-top:23px; font-size:12px; }
  .hero-image { position:relative; min-height:560px; height:100%; }
  .hero-image>img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; border-radius:12px; }
  .reading-card { position:absolute; left:26px; bottom:28px; width:236px; padding:21px; border-radius:10px; background:#fffefaF5; box-shadow:0 8px 32px #173e3512; }
  .reading-card>strong { font-size:12px; font-weight:650; }
  .reading-card .small { margin:5px 0; font-size:9px; }
  .reading-card .reading-value { font-size:39px; letter-spacing:-.07em; font-weight:400; line-height:1.3; }
  .reading-card .reading-value small { font-size:20px; letter-spacing:-.02em; }
  .reading-card .micro-line { height:35px; margin-top:7px; width:100%; }
  .reading-card .reading-foot { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; display:flex; align-items:center; gap:6px; font-size:9px; }
  .reading-foot .icon { width:14px; height:14px; }
  .steps-strip { display:grid; grid-template-columns:repeat(3,1fr); padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .step-item { display:flex; align-items:center; gap:20px; padding:0 32px; border-right:1px solid var(--line); }
  .step-item:first-child { padding-left:0; }
  .step-item:last-child { border-right:0; }
  .step-item h3 { font-size:26px; margin-bottom:6px; }
  .step-item p { font-size:11px; }
  .home-shopping { padding-top:66px; }
  .dashboard-feature { margin:75px 0; background:var(--sage); border-radius:14px; padding:48px; display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; }
  .dashboard-feature .lead { font-size:14px; margin-bottom:24px; }
  .dashboard { border:1px solid #d0d8c9; background:#fbfcf7; border-radius:10px; box-shadow:0 10px 32px #173e3510; overflow:hidden; color:var(--ink); }
  .dashboard-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; border-bottom:1px solid var(--line); }
  .dashboard-top strong { font-size:12px; }
  .dashboard-body { padding:16px; }
  .dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; }
  .stat { padding:13px 10px; border:1px solid #e3e7dd; background:white; border-radius:7px; }
  .stat span { font-size:8px; color:var(--muted); display:block; }
  .stat strong { font-weight:450; font-size:25px; letter-spacing:-.06em; }
  .stat small { font-size:12px; }
  .dashboard-bottom { display:grid; grid-template-columns:1.3fr 1fr; gap:10px; }
  .chart { background:white; border:1px solid #e3e7dd; border-radius:6px; padding:12px; }
  .chart p { font-size:9px; font-weight:550; color:var(--ink); margin-bottom:8px; }
  .chart svg { width:100%; height:100px; }
  .chart-key { display:flex; gap:15px; font-size:8px; color:var(--muted); }
  .chart-key span::before { content:''; width:13px; display:inline-block; border-top:1px solid #61865c; margin:0 4px 3px 0; }
  .fan-status { background:white; border:1px solid #e3e7dd; border-radius:6px; padding:10px; }
  .fan-status p { font-size:9px; font-weight:550; color:var(--ink); }
  .fan-row { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:7px 0; font-size:8px; border-bottom:1px solid #edf0e7; }
  .fan-row:last-child { border:0; }
  .fan-row .badge { font-size:7px; padding:2px 4px; }
  .editorial-row { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; }
  .editorial-row img { width:100%; border-radius:12px; }
  .editorial-row p { margin-top:20px; }
  .cta-band { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:60px 0; }
  .cta-band h2 { font-size:42px; }
  .cta-band p { margin-top:15px; }
  .catalog-toolbar { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:20px; padding:0 0 28px; border-bottom:1px solid var(--line); margin-bottom:34px; }
  .catalog-tools { display:flex; align-items:center; gap:16px; }
  .catalog-tools .search-field { width:210px; }
  .catalog-tools select { width:150px; }
  .catalog-count { font-size:11px; margin-bottom:22px; color:var(--muted); }
  .catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px 28px; }
  .product-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:start; padding-bottom:68px; }
  .product-gallery { position:sticky; top:115px; }
  .product-gallery .product-art { aspect-ratio:1.2; }
  .gallery-tabs { display:flex; gap:12px; margin:14px 0; }
  .gallery-thumb { width:80px; border:1px solid var(--line); border-radius:6px; background:#eff0e6; padding:2px; aspect-ratio:1.2; }
  .gallery-thumb.active { border-color:var(--ink); }
  .gallery-thumb img { width:100%; height:100%; object-fit:contain; border-radius:5px; }
  .product-info h1 { font-size:48px; }
  .product-info .product-description { margin-top:16px; font-size:14px; }
  .product-price { display:flex; align-items:baseline; gap:14px; margin:18px 0; }
  .product-price strong { font-weight:450; font-size:32px; letter-spacing:-.04em; }
  .product-price span { font-size:10px; color:var(--muted); }
  .option-panel { padding:23px 0; border-top:1px solid var(--line); margin-top:24px; }
  .option-panel h2 { font-size:27px; margin-bottom:18px; }
  .preset-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:23px; }
  .preset { padding:12px 9px; text-align:left; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); }
  .preset[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:#edf0e5; }
  .preset strong,.preset span { display:block; }
  .preset strong { font-size:12px; margin-bottom:3px; }
  .preset span { font-size:10px; color:var(--muted); }
  .circuit-group { padding:15px 0; border-top:1px solid var(--line); }
  .circuit-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
  .circuit-heading h3 { font-family:inherit; font-size:13px; letter-spacing:0; font-weight:600; }
  .circuit-heading button { border:0; background:none; padding:5px; font-size:10px; color:#4d7151; text-decoration:underline; text-underline-offset:3px; }
  .circuit-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; }
  .circuit-row>span { font-size:11px; color:var(--muted); }
  .segmented { display:flex; gap:7px; }
  .segmented button { background:transparent; color:var(--text); border:1px solid var(--line); padding:9px 15px; border-radius:5px; font-size:11px; min-height:39px; }
  .segmented button[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:white; }
  .circuit-remove { width:30px; padding:4px; border:0; background:none; color:var(--muted); min-height:36px; }
  .add-row { display:flex; gap:12px; margin:22px 0 15px; }
  .add-row .button { flex:1; }
  .quote-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:12px 0; font-size:11px; }
  .included-panel { margin-top:22px; padding:26px; border-radius:10px; background:var(--sage); }
  .included-panel h3 { font-size:25px; }
  .included-panel .check-list { margin-bottom:0; }
  .compatibility { margin-top:18px; font-size:11px; line-height:1.8; color:var(--muted); }
  .mounting-figure { padding:25px; border:1px solid var(--line); border-radius:12px; background:#f0f1e7; }
  .mounting-figure img { width:100%; border-radius:8px; }
  .mounting-figure figcaption { font-size:11px; color:var(--muted); padding-top:14px; }
  .explain-step { display:grid; grid-template-columns:70px .8fr 1.2fr; gap:32px; padding:42px 0; border-bottom:1px solid var(--line); }
  .step-number { font:40px Georgia,serif; color:#93a388; }
  .explain-step h3 { font-size:35px; }
  .explain-step p { font-size:14px; }
  .scenario-panel { background:var(--sage); border-radius:12px; padding:35px; }
  .scenario-panel .tabs { margin-bottom:25px; }
  .scenario-result { background:var(--ink); border-radius:8px; color:var(--paper); padding:22px; margin-bottom:24px; }
  .scenario-result h3 { font-size:24px; color:var(--paper); }
  .scenario-result p { font-size:12px; color:#d5dfcf; margin-top:9px; }
  .scenario-panel .dashboard { box-shadow:none; }
  .fact-list { display:grid; gap:26px; margin-top:30px; }
  .fact-list h3 { font-family:inherit; letter-spacing:0; font-size:14px; font-weight:600; margin-bottom:7px; }
  .fact-list p { font-size:13px; }
  .comparison-table { width:100%; border-collapse:collapse; font-size:13px; margin:35px 0 24px; }
  .comparison-table td,.comparison-table th { text-align:left; border-bottom:1px solid var(--line); padding:18px 22px; vertical-align:top; }
  .comparison-table th { font-size:12px; font-weight:600; color:var(--ink); }
  .comparison-table th:nth-child(2),.comparison-table td:nth-child(2) { background:#e6ecdf; }
  .comparison-table td:first-child { color:var(--muted); }
  .comparison-table .price-cell { font:35px Georgia,serif; }
  .support-search { display:block; max-width:650px; margin:30px auto 0; text-align:left; }
  .support-search input { min-height:56px; background:#fffdf7; }
  .support-search .icon { top:19px; }
  .help-card { display:block; padding:32px; border:1px solid var(--line); border-radius:10px; text-decoration:none; background:var(--white); transition:background .2s; }
  .help-card:hover { background:#ecf0e3; }
  .help-card .round-icon { margin-bottom:24px; }
  .help-card h3 { font-size:27px; }
  .help-card p { font-size:12px; margin-top:12px; }
  .help-card .text-link { margin-top:25px; font-size:11px; }
  .faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
  .faq-section .lead { font-size:14px; }
  .article-layout { display:grid; grid-template-columns:230px minmax(0,780px); gap:70px; align-items:start; }
  .article-nav { position:sticky; top:120px; padding-right:25px; border-right:1px solid var(--line); }
  .article-nav a { display:block; text-decoration:none; padding:10px 0; font-size:12px; color:var(--muted); }
  .article-nav a[aria-current=page] { color:var(--ink); font-weight:600; }
  .article-body h1 { font-size:52px; }
  .article-body h2 { font-size:31px; margin:42px 0 20px; }
  .article-body h3 { font-size:24px; margin:28px 0 15px; }
  .article-body p { margin:15px 0; font-size:14px; line-height:1.9; }
  .article-body li { color:var(--text); font-size:14px; padding:8px 0; }
  .article-body .notice { margin-top:24px; }
  .article-body .mounting-figure { margin-top:30px; }
  .article-feedback { border-top:1px solid var(--line); margin-top:40px; padding-top:25px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .article-feedback p { margin:0; font-size:12px; }
  .contact-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:85px; }
  .contact-form { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:35px; }
  .contact-form .notice { margin-bottom:25px; }
  .contact-form .button { margin-top:24px; }
  .request-preview { padding:24px; background:var(--sage); border-radius:8px; margin-top:24px; }
  .request-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.8 inherit; color:var(--text); }
  .cart-layout { display:grid; grid-template-columns:1fr 370px; gap:42px; align-items:start; }
  .cart-row { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:22px; border-bottom:1px solid var(--line); padding:26px 0; align-items:start; }
  .cart-row:first-child { padding-top:0; }
  .cart-row .product-art { aspect-ratio:1; border-radius:7px; }
  .cart-row h3 { font-size:24px; }
  .cart-row h3 a { text-decoration:none; }
  .cart-row .cart-description { font-size:10px; line-height:1.8; margin:9px 0 13px; }
  .cart-row .row-price { font-size:15px; white-space:nowrap; text-align:right; }
  .remove-link { border:0; background:none; color:var(--muted); text-decoration:underline; text-underline-offset:3px; padding:0; font-size:10px; margin-left:15px; }
  .summary { background:var(--sage); border-radius:10px; padding:30px; position:sticky; top:115px; }
  .summary h2 { font-size:32px; margin-bottom:25px; }
  .summary-row { display:flex; justify-content:space-between; gap:20px; padding:11px 0; font-size:12px; }
  .summary-total { border-top:1px solid #c9d2bf; margin-top:12px; padding:20px 0; font-size:18px; color:var(--ink); }
  .summary .button { margin-top:10px; }
  .summary>.small { margin-top:17px; font-size:10px; }
  .summary-item { display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid #ced7c6; }
  .summary-item .product-art { aspect-ratio:1; border-radius:5px; }
  .summary-item strong { font-size:11px; font-weight:550; }
  .summary-item p { font-size:9px; }
  .summary-item>span { font-size:11px; }
  .checkout-layout { display:grid; grid-template-columns:1fr 430px; gap:70px; align-items:start; }
  .checkout-section { padding:30px 0; border-bottom:1px solid var(--line); }
  .checkout-section h2 { font-size:30px; display:flex; align-items:center; gap:15px; margin-bottom:23px; }
  .checkout-section h2 span { width:33px; height:33px; display:grid; place-items:center; background:var(--sage); border-radius:50%; font:14px -apple-system,sans-serif; }
  .radio-option { display:flex; align-items:center; gap:12px; padding:18px; background:#edf1e5; border:1px solid #9caf92; border-radius:6px; font-size:13px; }
  .radio-option span { flex:1; }
  .checkout-submit { margin-top:25px; }
  .checkout-submit .small { margin-top:13px; }
  .confirmation { max-width:850px; margin-inline:auto; }
  .confirmation .round-icon { width:75px; height:75px; margin-bottom:30px; }
  .confirmation .summary { position:static; margin:35px 0; }
  .confirmation h1 { font-size:60px; }
  .policy { max-width:800px; }
  .policy h2 { font-size:28px; margin:35px 0 15px; }
  .policy p { margin:15px 0; line-height:1.9; font-size:14px; }
}
@layer responsive {
  @media (min-width:1600px) { .hero-image { min-height:610px; } }
  @media (max-width:1150px) {
    .wrap { width:calc(100% - 56px); }
    .hero-grid { gap:30px; }
    .hero-image { min-height:500px; }
    .hero h1 { font-size:58px; }
    .hero-copy .lead { font-size:14px; }
    .desktop-nav { gap:25px; }
    .product-layout { gap:32px; }
    .product-info h1 { font-size:40px; }
    .dashboard-feature { padding:35px; gap:35px; }
    .split,.editorial-row { gap:42px; }
    .cart-layout { grid-template-columns:1fr 320px; gap:25px; }
    .checkout-layout { grid-template-columns:1fr 350px; gap:35px; }
    .step-item { padding:0 20px; gap:14px; }
    .step-item p { font-size:10px; }
    .catalog-toolbar { align-items:start; }
    .catalog-tools { width:100%; justify-content:space-between; }
    .catalog-tools .search-field { flex:1; }
    .article-layout { gap:40px; grid-template-columns:190px 1fr; }
  }
  @media (max-width:850px) {
    .section { padding-block:60px; }
    .header-inner { height:75px; }
    .desktop-nav { display:none; }
    .menu-toggle { display:block; }
    .header-actions { gap:14px; }
    .hero-grid { grid-template-columns:1fr; gap:10px; }
    .hero-copy { max-width:650px; padding:25px 0; }
    .hero h1 { font-size:64px; max-width:650px; }
    .hero-copy .lead { font-size:16px; max-width:600px; }
    .hero-image { min-height:420px; }
    .hero-image>img { object-position:center 55%; }
    .steps-strip { margin-top:18px; }
    .step-item { flex-direction:column; align-items:start; gap:13px; }
    .step-item h3 { font-size:25px; }
    .step-item p { font-size:11px; }
    .dashboard-feature,.split,.editorial-row,.faq-section,.contact-layout { grid-template-columns:1fr; gap:34px; }
    .dashboard-feature { margin-block:50px; }
    .dashboard-feature>div:first-child { max-width:580px; }
    .grid-4 { grid-template-columns:repeat(2,1fr); }
    .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 22px; }
    .product-layout { grid-template-columns:1fr; gap:35px; }
    .product-gallery { position:static; max-width:620px; width:100%; margin-inline:auto; }
    .product-gallery .product-art { aspect-ratio:1.5; }
    .product-info { max-width:680px; margin-inline:auto; width:100%; }
    .product-info h1 { font-size:48px; }
    .cart-layout { grid-template-columns:1fr; }
    .summary { position:static; }
    .checkout-layout { grid-template-columns:1fr; }
    .checkout-summary { grid-row:1; }
    .checkout-summary .summary-item .product-art { display:none; }
    .checkout-summary .summary-item { grid-template-columns:1fr auto; padding:8px 0; }
    .checkout-summary .summary { padding:22px 25px; }
    .checkout-summary .summary h2 { font-size:25px; margin-bottom:15px; }
    .article-layout { grid-template-columns:1fr; gap:35px; }
    .article-nav { position:static; border-right:0; border-bottom:1px solid var(--line); display:flex; gap:20px; flex-wrap:wrap; }
    .footer-grid { grid-template-columns:2fr 1fr 1fr; gap:35px; }
    .footer-links:last-child { grid-column:2/4; }
    .explain-step { grid-template-columns:45px 1fr; gap:18px; }
    .explain-step p { grid-column:2; }
    .cta-band { align-items:start; flex-direction:column; gap:25px; }
  }
  @media (max-width:560px) {
    .wrap { width:calc(100% - 36px); }
    body { font-size:14px; }
    .section { padding-block:45px; }
    .section-sm { padding-block:32px; }
    .page-intro { padding:33px 0; }
    h1 { font-size:43px; }
    h2 { font-size:34px; }
    h3 { font-size:24px; }
    .lead { font-size:15px; margin-top:18px; }
    .eyebrow { font-size:9px; letter-spacing:.19em; margin-bottom:15px; }
    .brand { width:min(208px,calc(100vw - 144px)); }
    .header-inner { height:70px; gap:10px; }
    .preview-bar { font-size:8px; letter-spacing:.04em; padding:6px 10px; }
    .preview-bar a { display:none; }
    .cart-link .icon { width:20px; height:20px; }
    .cart-count { width:19px; height:19px; font-size:9px; }
    .header-actions { gap:9px; }
    .menu-toggle { padding:5px; }
    .hero { padding-top:12px; padding-bottom:20px; }
    .hero-copy { padding:20px 0 25px; }
    .hero h1 { font-size:47px; }
    .hero-copy .lead { font-size:14px; }
    .hero .actions { gap:10px; margin-top:25px; }
    .hero .actions .button { flex:1; padding:13px 10px; font-size:12px; }
    .hero-image { min-height:345px; }
    .reading-card { left:17px; bottom:17px; width:192px; padding:16px; }
    .reading-card .reading-value { font-size:33px; }
    .reading-card .micro-line { height:24px; }
    .reading-card .reading-foot { font-size:8px; }
    .steps-strip { grid-template-columns:1fr; padding:12px 0; }
    .step-item { flex-direction:row; align-items:center; padding:20px 0; border-right:0; border-bottom:1px solid var(--line); }
    .step-item:last-child { border-bottom:0; }
    .step-item p { font-size:12px; }
    .step-item h3 { font-size:25px; }
    .section-head { flex-direction:column; align-items:start; gap:18px; margin-bottom:27px; }
    .grid-3,.grid-2 { grid-template-columns:1fr; }
    .home-shopping { padding-top:40px; }
    .home-shopping .grid-3 { gap:35px; }
    .home-shopping .product-card .product-art { aspect-ratio:1.65; }
    .dashboard-feature { padding:24px 17px; margin-block:38px; gap:28px; }
    .dashboard-top { padding:14px 12px; }
    .dashboard-top strong { font-size:11px; }
    .dashboard .badge { font-size:8px; padding:3px 7px; }
    .dashboard-body { padding:10px; }
    .stat { padding:11px 7px; }
    .stat strong { font-size:22px; }
    .stat span { font-size:7px; }
    .dashboard-bottom { grid-template-columns:1fr; }
    .fan-status { display:none; }
    .grid-4 { gap:15px; }
    .catalog-toolbar { padding-bottom:22px; gap:18px; }
    .tabs { gap:7px; }
    .tab { padding:8px 13px; font-size:10px; }
    .catalog-tools { gap:10px; }
    .catalog-tools select { width:116px; font-size:11px; padding-inline:9px; }
    .catalog-tools .search-field { min-width:0; }
    .catalog-tools input { font-size:11px; }
    .catalog-grid { grid-template-columns:1fr; gap:35px; }
    .catalog-grid .product-art { aspect-ratio:1.5; }
    .product-card p { min-height:0; }
    .product-card h3 { font-size:28px; }
    .product-layout { gap:28px; }
    .breadcrumb { font-size:10px; gap:7px; margin-bottom:24px; }
    .breadcrumb span:not(:last-child)::after { padding-left:7px; }
    .product-info h1 { font-size:40px; }
    .product-gallery .product-art { aspect-ratio:1.2; }
    .preset-grid { gap:6px; }
    .preset { padding:11px 7px; }
    .preset strong { font-size:10px; }
    .preset span { font-size:9px; }
    .circuit-row { gap:7px; }
    .segmented button { padding:9px 13px; }
    .included-panel { padding:23px; }
    .option-panel .segmented { flex-wrap:wrap; }
    .card { padding:24px; }
    .cart-row { grid-template-columns:78px minmax(0,1fr); gap:15px; padding:23px 0; }
    .cart-row h3 { font-size:21px; }
    .cart-row .row-price { grid-column:2; grid-row:2; text-align:left; margin-top:-8px; }
    .cart-row .cart-description { font-size:9px; }
    .cart-row .quantity button { min-height:35px; padding:5px 10px; min-width:30px; }
    .summary { padding:25px; }
    .checkout-layout { gap:25px; }
    .field-grid { gap:15px; }
    .field-grid .mobile-full { grid-column:1/-1; }
    .checkout-section { padding:25px 0; }
    .checkout-section h2 { font-size:28px; }
    .article-body h1 { font-size:40px; }
    .article-body p,.article-body li { font-size:13px; }
    .article-nav { gap:15px; }
    .article-nav a { font-size:10px; }
    .contact-form { padding:22px; }
    .scenario-panel { padding:22px 15px; }
    .scenario-panel .tab { font-size:9px; padding:8px 10px; }
    .scenario-result { padding:20px 16px; }
    .scenario-result h3 { font-size:22px; }
    .explain-step { padding:30px 0; grid-template-columns:30px 1fr; }
    .step-number { font-size:30px; }
    .explain-step h3 { font-size:30px; }
    .mounting-figure { padding:12px; }
    .comparison-scroll { overflow-x:auto; }
    .comparison-table { font-size:11px; min-width:600px; }
    .comparison-table th,.comparison-table td { padding:14px; }
    .comparison-table .price-cell { font-size:28px; }
    .cta-band h2 { font-size:35px; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:35px; }
    .footer-brand { grid-column:1/-1; }
    .footer-links:last-child { grid-column:auto; }
    .site-footer { padding-top:45px; }
    .footer-brand p { max-width:300px; }
    .confirmation h1 { font-size:45px; }
    .help-card { padding:25px; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
}