@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/opensans-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/opensans-500.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/opensans-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/opensans-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/opensans-800.woff2') format('woff2'); }
:root {
  --y: #f8c808;
  --y-hover: #ffd52e;
  --y-soft: #fff3c2;
  --y-tint: #fffbe8;
  --y-ink: #5a4500;
  --g: #303030;
  --g-hover: #444444;
  --g-deep: #262626;
  --g-phone: #1c1c1c;
  --ink: #303030;
  --ink-2: #4a4a4a;
  --muted: #5c5c5c;
  --faint: #6a6a66;
  --bg: #ffffff;
  --bg-soft: #f7f7f4;
  --bg-band: #f5f5f3;
  --fill: #f3f3f1;
  --fill-hover: #e9e9e5;
  --line: #e6e6e2;
  --line-2: #ececE8;
  --line-card: #e9e9e4;
  --line-input: #8f8f89;
  --line-btn: #cfcfca;
  --line-img: #efefea;
  --line-hover: #d9d9d3;
  --on-dark: #e8e7e3;
  --on-dark-muted: #b9b8b3;
  --on-dark-faint: #9c9b96;
  --dark-line: #484848;
  --dark-fill: #444444;
  --ok: #3ccf6e;
  --ok-ink: #1d6b3c;
  --ok-soft: #e3f6ea;
  --order: #d9a400;
  --err: #b42318;
  --err-soft: #fdecec;

  --font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-md: 16px;
  --fs-lg: 17px;
  --fs-xl: 18px;
  --fs-h4: 17px;
  --fs-h3: 20px;
  --fs-h2: clamp(28px, 2.8vw, 40px);
  --fs-h1: clamp(34px, 4vw, 56px);
  --fs-display: clamp(40px, 4.8vw, 66px);
  --lh-tight: 1.04;
  --lh-head: 1.08;
  --lh-body: 1.6;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-18: 72px;
  --s-22: 88px;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(48, 48, 48, 0.05), 0 10px 24px -18px rgba(48, 48, 48, 0.35);
  --sh-2: 0 24px 50px -32px rgba(0, 0, 0, 0.4);
  --sh-3: 0 30px 60px -36px rgba(48, 48, 48, 0.45);
  --sh-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
  --sh-phone: 0 40px 70px -36px rgba(0, 0, 0, 0.6);

  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 50;
  --z-drop: 60;
  --z-bar: 70;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
  --z-skip: 110;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 150ms;
  --t: 220ms;
  --t-slow: 420ms;

  --wrap: 1280px;
  --gut: 16px;
  --header-h: 64px;
  --sec: 56px;
  --focus: var(--g);
  color-scheme: light;
}
@media (min-width: 761px) {
  :root { --gut: 24px; --header-h: 76px; --sec: 72px; }
}
@media (min-width: 1024px) {
  :root { --sec: 88px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 var(--fs-md)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
a { color: var(--ink); text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #000; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 800; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
::selection { background: var(--y); color: var(--g); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.dk, .sec-dark, .hdr, .topbar, .ftr, .mm-panel { --focus: var(--y); }
input, select, textarea, button, a, summary, [role="tab"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.skip { position: absolute; left: var(--gut); top: -80px; z-index: var(--z-skip); padding: 12px 18px; border-radius: var(--r-sm); background: var(--y); color: var(--g); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only, .sr, .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }
.ic-tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.ic-tile.y { background: var(--y); box-shadow: none; }
.dk .ic-tile, .sec-dark .ic-tile { background: var(--dark-fill); box-shadow: none; color: #fff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.wrap-sm { max-width: calc(880px + 2 * var(--gut)); }
.wrap-prose { max-width: calc(760px + 2 * var(--gut)); }

.sec, .section { padding-block: var(--sec); }
.sec-sm, .section-sm { padding-block: calc(var(--sec) * 0.66); }
.sec-t0 { padding-top: 0; }
.sec-b0 { padding-bottom: 0; }
.sec-band, .section.tint { background: var(--bg-band); border-block: 1px solid var(--line-2); }
.sec-soft { background: var(--bg-soft); }
.sec-dark, .dk, .section.dark { background: var(--g); color: #fff; }
.sec-y { background: var(--y); color: var(--g); }
.hero { position: relative; overflow: hidden; background: radial-gradient(820px 460px at 82% 8%, rgba(248, 200, 8, 0.26), transparent 62%), linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); border-bottom: 1px solid var(--line-img); }
.hero-grid { background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 40px 40px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-8); margin-bottom: var(--s-7); }
.sec-head > div { display: flex; flex-direction: column; gap: var(--s-3); max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s-8); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.actions, .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.row-sb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g-2 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.g-3 { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.g-4 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g-2, .g-3, .g-4, .grid { gap: var(--s-6); }
}
.split { display: flex; flex-wrap: wrap; gap: var(--s-10) var(--s-12); align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.with-aside { display: flex; flex-direction: column; gap: var(--s-8); }
@media (min-width: 1024px) {
  .with-aside { flex-direction: row; align-items: flex-start; gap: var(--s-12); }
  .with-aside > aside { flex: 0 0 300px; position: sticky; top: calc(var(--header-h) + 24px); }
  .with-aside > :not(aside) { flex: 1 1 auto; min-width: 0; }
}
.sticky-a { position: static; }
@media (min-width: 900px) { .sticky-a { position: sticky; top: calc(var(--header-h) + 24px); } }

.h-display { margin: 0; font-size: var(--fs-display); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
.h4 { margin: 0; font-size: var(--fs-h4); line-height: 1.35; font-weight: 800; }
.lead { margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); max-width: 44em; }
@media (min-width: 761px) { .lead { font-size: var(--fs-xl); } }
.p { margin: 0; font-size: var(--fs-md); line-height: 1.65; color: var(--ink-2); }
.small { font-size: var(--fs-14); line-height: 1.5; }
.xs { font-size: var(--fs-sm); line-height: 1.45; }
.muted, .mut { color: var(--muted); }
.dk .lead, .dk .p, .dk .muted, .dk .mut, .sec-dark .lead, .sec-dark .p, .sec-dark .muted, .sec-dark .mut { color: var(--on-dark-muted); }
.eb, .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.dk .eb, .sec-dark .eb { color: var(--on-dark-faint); }
.kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 12px; border-radius: var(--r-full); background: var(--g); color: #fff; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.kicker::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--y); }
.t, .tnum { font-variant-numeric: tabular-nums; }
.b { font-weight: 700; }
.nw, .nowrap { white-space: nowrap; }
.center { text-align: center; }
.ph { color: #8a6d00; background: #fff6cc; border-radius: var(--r-xs); padding: 0 5px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.nm3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ds { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--ink); }
.dk a:not([class]), .sec-dark a:not([class]) { color: #fff; }
.dk a:not([class]):hover, .sec-dark a:not([class]):hover { color: var(--y); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--r-md); border: 0; background: var(--fill); color: var(--ink); font: 700 var(--fs-md)/1.2 var(--font); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease, color var(--t-fast) ease, transform 140ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn:hover { color: var(--ink); }
.by, .btn-primary { background: var(--y); color: var(--g); }
.bd, .btn-dark { background: var(--g); color: #fff; }
.bo, .btn-ghost { background: #fff; color: var(--g); box-shadow: inset 0 0 0 1.5px var(--line-btn); }
.bg, .btn-night { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #6b6b66; }
.bw { background: #fff; color: var(--g); }
.bd:hover, .btn-dark:hover, .bg:hover, .btn-night:hover { color: #fff; }
.by:hover, .btn-primary:hover, .bo:hover, .btn-ghost:hover, .bw:hover { color: var(--g); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background-color: var(--fill-hover); }
  .by:hover, .btn-primary:hover { background: var(--y-hover); }
  .bd:hover, .btn-dark:hover { background: var(--g-hover); }
  .bo:hover, .btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--g); }
  .bg:hover, .btn-night:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
  .bw:hover { background: var(--bg-soft); }
}
.bd:focus-visible, .btn-dark:focus-visible { outline-color: var(--y); }
.bsm, .btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-15); border-radius: var(--r-sm); }
.blg, .btn-lg { min-height: 56px; padding: 0 26px; font-size: var(--fs-lg); border-radius: 14px; }
.bblock, .btn-block { display: flex; width: 100%; }
.bpill { border-radius: var(--r-full); }
.btn-split { justify-content: space-between; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--g); border-right-color: transparent; animation: spin 700ms linear infinite; }
.bd[aria-busy="true"]::after, .btn-dark[aria-busy="true"]::after { border-color: #fff; border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--r-md); background: #fff; color: var(--g); font-weight: 700; font-size: var(--fs-15); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line-btn); }
.store small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); line-height: 1.1; }

.icon-btn, .qb { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); font: 700 20px/1 var(--font); transition: background-color var(--t-fast) ease, transform 140ms var(--ease); }
.icon-btn:active, .qb:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover, .qb:hover { background: var(--fill-hover); } }
.icon-btn.clear { background: transparent; }
.dk .icon-btn, .sec-dark .icon-btn { background: var(--dark-fill); color: #fff; }

.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-full); background: var(--fill); color: var(--ink); font: 600 var(--fs-15)/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 140ms var(--ease); }
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--g); color: var(--ink); } }
.chip.on, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current] { background: var(--g); color: #fff; box-shadow: none; }
.chip .n { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.on .n, .chip[aria-pressed="true"] .n, .chip[aria-selected="true"] .n { color: var(--on-dark-muted); }
.chip-o { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-btn); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips-scroll { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-snap-type: x proximity; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll > * { flex: none; scroll-snap-align: start; }

.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--fill); }
.seg > button, .sb { flex: 1 1 0; min-height: 46px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 600 var(--fs-15)/1.2 var(--font); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"], .sb.on, .sb[aria-pressed="true"], .sb[aria-selected="true"] { background: var(--g); color: #fff; }
@media (hover: hover) and (pointer: fine) { .seg > button:not([aria-pressed="true"]):not([aria-selected="true"]):hover, .sb:not(.on):not([aria-pressed="true"]):not([aria-selected="true"]):hover { background: #fff; } }
.dk .seg, .sec-dark .seg { background: var(--g-deep); }
.dk .seg > button, .sec-dark .seg > button { color: var(--on-dark); }
.dk .seg > button[aria-pressed="true"], .sec-dark .seg > button[aria-pressed="true"] { background: var(--y); color: var(--g); }

.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 8px; border-radius: var(--r-xs); background: #f0f0ec; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tag-y { min-height: 26px; padding: 0 10px; border-radius: var(--r-full); background: var(--y-soft); color: #4a3a00; font-size: var(--fs-sm); }
.tag-d { background: var(--g); color: #fff; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; line-height: 1.15; white-space: nowrap; background: var(--fill); color: var(--ink); }
.badge::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.badge.nodot::before { display: none; }
.badge-ok, .badge-in { background: var(--g); color: #fff; }
.badge-ok::before, .badge-in::before { background: var(--ok); }
.badge-order { background: var(--y-soft); color: var(--y-ink); }
.badge-order::before { background: var(--order); }
.badge-off { background: var(--fill); color: var(--muted); }
.badge-off::before { background: #a3a39e; }
.badge-sale { background: var(--err); color: #fff; }
.badge-sale::before { display: none; }
.badge-lg { padding: 7px 12px; font-size: var(--fs-sm); }
.on-img { position: absolute; left: 10px; top: 10px; z-index: 1; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--y); flex: none; }
.dot-ok { background: var(--ok); }
.dot-order { background: var(--order); }

.field, .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .fld > label, .label, .lbl { font-size: var(--fs-14); font-weight: 700; color: var(--ink); line-height: 1.35; }
.label .opt-l, .field > label .opt-l { font-weight: 400; color: var(--muted); }
.req { color: var(--err); }
.input, .select, .textarea, .fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 0 14px; border-radius: var(--r-md); border: 1.5px solid var(--line-input); background: #fff; color: var(--ink); font: 500 var(--fs-md)/1.3 var(--font); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.textarea, .fld textarea { min-height: 132px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.select, .fld select { appearance: none; padding-right: 44px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.input::placeholder, .textarea::placeholder, .fld input::placeholder { color: var(--faint); opacity: 1; }
.input:focus, .select:focus, .textarea:focus, .fld input:focus, .fld select:focus, .fld textarea:focus { outline: 3px solid var(--g); outline-offset: 1px; border-color: var(--g); box-shadow: 0 0 0 6px var(--y-soft); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"], .fld [aria-invalid="true"] { border-color: var(--err); background: #fffafa; }
.input-lg { min-height: 56px; font-size: var(--fs-lg); border-radius: 14px; }
.srch { position: relative; }
.srch .input { padding-left: 48px; min-height: 56px; border-radius: 14px; font-size: var(--fs-lg); }
.srch > .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); font-weight: 400; }
.err { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--err); }
.dk .input, .sec-dark .input { background: #fff; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: var(--fs-15); line-height: 1.45; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--g); }
.opt, .radio-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--r-md); background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow var(--t-fast) ease, background-color var(--t-fast) ease; }
.opt input, .radio-card input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--g); }
.opt:has(input:checked), .opt[aria-pressed="true"], .opt.on, .radio-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--g); background: var(--y-tint); }
@media (hover: hover) and (pointer: fine) { .opt:hover, .radio-card:hover { box-shadow: inset 0 0 0 1.5px var(--g); } }
.opt:has(input:focus-visible), .radio-card:has(input:focus-visible) { outline: 3px solid var(--g); outline-offset: 2px; }
.radio-card .rc-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.radio-card .rc-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.radio-card .rc-sub { font-size: var(--fs-14); color: var(--muted); }
@media (max-width: 560px) { .opt { flex-wrap: wrap; row-gap: 6px; } .opt > b { flex-basis: 100%; margin-left: 34px; } }

.card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-card); border-radius: var(--r-xl); background: #fff; color: var(--ink); overflow: hidden; }
a.card { text-decoration: none; }
a.card:hover { color: var(--ink); }
.card-b { display: flex; flex-direction: column; gap: var(--s-3); flex: 1 1 auto; padding: var(--s-4); }
@media (min-width: 761px) { .card-b { padding: var(--s-5); } }
.card-f { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card-dk { background: var(--g); border-color: var(--g); color: #fff; }
.card-soft { background: var(--bg-soft); border-color: transparent; }
.box { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line-card); }
@media (min-width: 761px) { .box { padding: var(--s-6); } }
.box-soft { background: var(--bg-soft); border-color: transparent; }
.box-y { background: var(--y); border-color: var(--y); color: var(--g); }
.tile { display: grid; place-items: center; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(160deg, #f6f6f3 0%, #ececE7 100%); }
.note { padding: 18px 20px; border-radius: var(--r-lg); background: var(--bg-soft); box-shadow: inset 4px 0 0 var(--y); font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }

.pimg { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 32 / 27; background: #fff; box-shadow: inset 0 0 0 1px var(--line-img); }
.pimg img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.card > .pimg { box-shadow: inset 0 -1px 0 var(--line-img); }
.pimg-sq { aspect-ratio: 1; }
.pimg-r { border-radius: var(--r-lg); }
.pimg .ph-txt { font-size: 28px; font-weight: 800; color: #c9c9c3; letter-spacing: -0.02em; }

.phone { width: 100%; max-width: 290px; height: auto; align-self: flex-start; flex: none; padding: 9px; border-radius: 44px; background: var(--g-phone); box-shadow: var(--sh-phone); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 1216; object-fit: cover; object-position: top center; border-radius: 36px; background: #fff; }
.phone-sm { max-width: 236px; padding: 8px; border-radius: 40px; }
.phone-sm img { border-radius: 31px; }
.phone-xs { max-width: 132px; padding: 5px; border-radius: 24px; }
.phone-xs img { border-radius: 19px; }
.phone-c { align-self: center; margin-inline: auto; }
.phones { display: flex; align-items: flex-start; justify-content: center; gap: var(--s-4); }

.tw { width: 100%; overflow-x: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.tbl, .tw table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); line-height: 1.45; }
.tw table { min-width: 560px; }
.tbl th, .tbl td, .tw th, .tw td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th, .tw thead th { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); background: #f7f7f5; vertical-align: bottom; }
.tbl tbody th, .tw tbody th { font-weight: 600; color: var(--ink-2); }
.tbl tbody tr:last-child > *, .tw tbody tr:last-child > * { border-bottom: 0; }
.tbl .num, .tw .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .hl, .tw .hl { background: var(--y-tint); font-weight: 600; }
.tbl thead .hl, .tw thead .hl { background: var(--y); color: var(--g); }
@media (hover: hover) and (pointer: fine) { .tbl tbody tr:hover > *, .tw tbody tr:hover > * { background: #fafaf7; } }
@media (max-width: 640px) {
  .tw.stack { overflow: visible; box-shadow: none; border-radius: 0; }
  .tw.stack table { min-width: 0; }
  .tw.stack thead { display: none; }
  .tw.stack tbody, .tw.stack tr, .tw.stack td, .tw.stack tbody th { display: block; width: auto; }
  .tw.stack tr { margin-bottom: 10px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
  .tw.stack td, .tw.stack tbody th { border-bottom: 0; padding: 8px 14px; }
  .tw.stack tr > :first-child { background: var(--fill); color: var(--ink); font-weight: 700; }
  .tw.stack td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
}
.dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); margin: 0; }
.dl dt, .dl dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-15); line-height: 1.45; }
.dl dt { color: var(--muted); padding-right: var(--s-4); }
.dl dd { font-weight: 600; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.pm { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--y); color: var(--g); font-size: 20px; font-weight: 600; line-height: 1; transition: transform var(--t) var(--ease); }
.pm .ico { width: 18px; height: 18px; stroke-width: 2.2; }
details[open] > summary .pm { transform: rotate(45deg); }
.acc > details, .faq > details { border-bottom: 1px solid var(--line); }
.acc > details:first-child, .faq > details:first-child { border-top: 1px solid var(--line); }
.acc summary, .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 10px 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.35; color: var(--ink); }
@media (min-width: 761px) { .acc summary, .faq summary { font-size: var(--fs-xl); min-height: 66px; } }
.acc summary:focus-visible, .faq summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
.acc .ans, .faq .ans { padding: 0 48px 20px 0; font-size: var(--fs-md); line-height: 1.65; color: var(--ink-2); }
.acc .ans > * + *, .faq .ans > * + * { margin-top: 10px; }
.dk .faq > details, .sec-dark .faq > details, .dk .acc > details, .sec-dark .acc > details { border-color: var(--dark-line); }
.dk .faq summary, .sec-dark .faq summary { color: #fff; }
.dk .faq .ans, .sec-dark .faq .ans { color: var(--on-dark-muted); }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--fill); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1 0 auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 600 var(--fs-15)/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.tab[aria-selected="true"], .tab.on { background: var(--g); color: #fff; }
@media (hover: hover) and (pointer: fine) { .tab:not([aria-selected="true"]):not(.on):hover { background: #fff; } }
.tabs-v { flex-direction: column; padding: 0; background: none; gap: 8px; overflow: visible; }
.tabs-v .tab { justify-content: flex-start; min-height: 60px; padding: 0 14px; border-radius: var(--r-md); font-size: var(--fs-md); text-align: left; white-space: normal; background: var(--bg-soft); }
.tabs-v .tab[aria-selected="true"], .tabs-v .tab.on { background: var(--g); color: #fff; }
.tabpanel:focus-visible { outline-offset: 6px; }
.swap { animation: swap 260ms var(--ease); }
@keyframes swap { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ck, .xk { display: flex; flex-direction: column; gap: 12px; }
.ck li, .xk li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-md); line-height: 1.5; }
.ck li::before, .xk li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23303030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat; }
.xk li::before { background: var(--err-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a1c12' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/14px no-repeat; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-14); font-weight: 600; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23303030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.dk .trust, .sec-dark .trust { color: var(--on-dark); }
.dots { display: grid; gap: 12px; }
.dots li { position: relative; padding-left: 26px; }
.dots li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 9px; height: 9px; border-radius: 3px; background: var(--y); }
.nums { counter-reset: s; display: grid; gap: 14px; }
.nums > li { position: relative; padding-left: 52px; min-height: 36px; counter-increment: s; }
.nums > li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 36px; height: 36px; border-radius: 50%; background: var(--g); color: var(--y); display: grid; place-items: center; font-size: var(--fs-md); font-weight: 800; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.stat b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-sm); color: var(--muted); }
.price { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.price-lg { font-size: 30px; line-height: 1.1; }
.price s, .old { font-weight: 500; color: var(--muted); }
.sum { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.sum > div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: var(--fs-md); }
.sum > div:last-child { border-bottom: 0; }
.sum .tot { background: var(--y); font-weight: 700; padding-block: 16px; }
.sum .tot b { font-size: 28px; font-weight: 800; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-block: var(--s-4); font-size: var(--fs-14); color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); }
.crumbs .ico { width: 14px; height: 14px; color: #a3a39e; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.dk .crumbs, .dk .crumbs a { color: var(--on-dark-muted); }
.dk .crumbs [aria-current] { color: #fff; }
.page-head { display: flex; flex-direction: column; gap: var(--s-4); padding-block: var(--s-2) var(--s-10); }

.prose { max-width: 68ch; font-size: var(--fs-lg); line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 761px) { .prose { font-size: var(--fs-xl); } }
.prose > * + * { margin-top: 20px; }
.prose h1 { display: none; }
.prose h2 { margin-top: 48px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.prose h3 { margin-top: 32px; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.prose h4 { margin-top: 24px; font-size: var(--fs-lg); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 12px; }
.prose ul, .prose ol { display: grid; gap: 10px; padding: 0; }
.prose ul > li { position: relative; padding-left: 26px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: 0.66em; width: 9px; height: 9px; border-radius: 3px; background: var(--y); }
.prose ol { counter-reset: p; }
.prose ol > li { position: relative; padding-left: 40px; counter-increment: p; }
.prose ol > li::before { content: counter(p); position: absolute; left: 0; top: 0.15em; width: 28px; height: 28px; border-radius: 50%; background: var(--g); color: var(--y); display: grid; place-items: center; font-size: var(--fs-14); font-weight: 800; line-height: 1; }
.prose a { font-weight: 600; }
.prose strong, .prose b { font-weight: 700; }
.prose img { border-radius: var(--r-lg); margin-inline: auto; }
.prose figure figcaption { margin-top: 8px; font-size: var(--fs-14); color: var(--muted); text-align: center; }
.prose blockquote { padding: 18px 22px; border-radius: var(--r-lg); background: var(--bg-soft); box-shadow: inset 4px 0 0 var(--y); font-size: var(--fs-md); }
.prose table { display: block; width: 100%; overflow-x: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-15); line-height: 1.5; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose th { background: var(--fill); font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.prose iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-lg); }
.prose [style*="width"] { max-width: 100% !important; }
.prose > :first-child { margin-top: 0; }

.topbar { background: var(--g-deep); color: var(--on-dark); font-size: var(--fs-14); }
.topbar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 36px; }
.topbar a { color: var(--on-dark); text-decoration: none; }
.topbar a:hover { color: var(--y); }
.tb-msg { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.tb-msg b { font-weight: 600; color: #fff; }
.live-dot { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #3ddc84; }
.tb-r { display: none; align-items: center; flex-wrap: wrap; gap: 6px 24px; color: var(--on-dark-muted); }
.tb-hl { color: #fff; }
@media (min-width: 761px) { .tb-r { display: inline-flex; } }
.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang a { display: inline-grid; place-items: center; min-width: 36px; min-height: 28px; padding: 0 6px; border-radius: var(--r-xs); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--on-dark-muted); text-decoration: none; }
.lang a[aria-current] { background: var(--dark-fill); color: #fff; }
.lang a:hover { color: var(--y); }

.hdr { position: sticky; top: 0; z-index: var(--z-header); background: var(--g); color: #fff; }
.hdr-in { position: relative; display: flex; align-items: center; gap: 8px 10px; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: flex-end; gap: 6px; flex: none; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo-mark { width: 26px; height: 32px; flex: none; }
.logo-word { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; color: #fff; }
.logo-word span { color: var(--y); font-weight: 600; }
@media (min-width: 761px) { .logo-mark { width: 32px; height: 40px; } .logo-word { font-size: 31px; } }
.nl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-full); color: #fff; font-size: var(--fs-md); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.nl:hover { color: #fff; }
@media (hover: hover) and (pointer: fine) { .nl:hover { background: var(--g-hover); } }
.nl[aria-current="page"], .nl.on { background: var(--g-hover); box-shadow: inset 0 -2px 0 var(--y); }
.nl .ico { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.nl-tel { font-weight: 700; font-variant-numeric: tabular-nums; }
.hnav { display: none; flex: 1 1 auto; align-items: center; gap: 2px; margin-left: 10px; }
.hact { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hact .nl { display: none; }
.cta { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-full); background: var(--y); color: var(--g); font-size: var(--fs-md); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease), background-color var(--t-fast) ease; }
.cta:hover { color: var(--g); }
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #ffd43b; } }
.cta .ico { width: 20px; height: 20px; stroke-width: 2; }
.cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--g); color: #fff; font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.cnt:empty { display: none; }
@media (min-width: 761px) { .cta { min-height: 48px; padding: 0 22px; } }
.mm-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--dark-fill); color: #fff; }
.mm-btn .ico { width: 20px; height: 20px; stroke-width: 2; }
.mm-btn .i-close { display: none; }
.mm[open] .mm-btn .i-open { display: none; }
.mm[open] .mm-btn .i-close { display: block; }
.mm[open] .mm-btn { background: var(--y); color: var(--g); }
.mm-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-drop); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gut) 24px; background: var(--g); color: #fff; border-top: 1px solid var(--dark-line); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.5); }
.mm[open] .mm-panel { animation: mmIn 240ms var(--ease) both; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mm-panel .srch { margin: 8px 0 12px; }
.mm-panel .srch .input { min-height: 52px; font-size: var(--fs-md); }
.mm-nav { display: flex; flex-direction: column; }
.mm-nav > a, .mm-nav summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--dark-line); color: #fff; font-size: var(--fs-lg); font-weight: 600; text-decoration: none; }
.mm-nav > a:hover, .mm-nav summary:hover { color: var(--y); }
.mm-nav summary .ico { transition: transform var(--t) var(--ease); }
.mm-nav details[open] summary .ico { transform: rotate(180deg); }
.mm-sub { display: flex; flex-direction: column; padding: 4px 0 10px 12px; border-bottom: 1px solid var(--dark-line); }
.mm-sub a { display: flex; align-items: center; min-height: 44px; color: var(--on-dark); font-size: var(--fs-15); text-decoration: none; }
.mm-sub a:hover { color: var(--y); }
.mm-contact { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.mm-contact .row { gap: 8px; }
.mm-tel { font-size: 22px; font-weight: 800; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.mm-meta { font-size: var(--fs-14); color: var(--on-dark-muted); }
.mm-panel .lang a { min-width: 52px; min-height: 44px; font-size: var(--fs-15); background: var(--dark-fill); color: #fff; border-radius: var(--r-sm); }
.mm-panel .lang a[aria-current] { background: var(--y); color: var(--g); }
.mm-panel .lang { gap: 8px; }
.hdd { position: relative; }
.hdd > summary.nl { list-style: none; }
.hdd[open] > summary .ico { transform: rotate(180deg); }
.hdd[open] > summary.nl { background: var(--g-hover); }
.hdd-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: var(--z-drop); width: 380px; padding: 8px; border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--sh-pop), 0 0 0 1px var(--line); animation: mmIn 200ms var(--ease) both; }
.hdd-panel a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-15); font-weight: 600; line-height: 1.3; text-decoration: none; }
.hdd-panel a:hover { background: var(--bg-soft); color: var(--ink); }
.hdd-panel a .ic-tile { width: 36px; height: 36px; border-radius: var(--r-sm); }
.hdd-panel a .ic-tile .ico { width: 18px; height: 18px; }
.hdd-panel .hdd-all { margin-top: 4px; border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-md) var(--r-md); color: var(--muted); font-weight: 700; }
.hdd-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; width: min(640px, calc(100vw - 32px)); }
.hdd-panel .hdd-all { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .hdr-in { gap: 8px 18px; }
}
@media (min-width: 1100px) {
  .hnav { display: flex; }
  .mm { display: none; }
  .hact { gap: 4px; }
  .hact .nl { display: inline-flex; }
  .hact .cta { margin-left: 8px; }
}
@media (min-width: 1100px) and (max-width: 1259px) {
  .hact .nl-tel { display: none; }
  .nl { padding: 0 12px; }
}

.ftr { margin-top: auto; background: var(--g); color: var(--on-dark); font-size: var(--fs-15); line-height: 1.6; }
.ftr-in { display: flex; flex-direction: column; gap: 40px; padding-block: 56px 30px; }
.ftr-grid { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ftr-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.ftr-brand p { color: var(--on-dark-muted); }
.ftr-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ftr-col h2, .ftr-h { margin: 0 0 6px; font-size: var(--fs-15); font-weight: 700; color: #fff; letter-spacing: 0; }
.ftr-col h2 + * { margin-top: 0; }
.ftr-col .ftr-sp { margin-top: 14px; }
.ftr a { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-dark); text-decoration: none; }
.ftr a:hover { color: var(--y); }
.ftr .ftr-tel { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.ftr .mut2 { color: var(--on-dark-muted); }
.ftr-ct { grid-column: 1 / -1; }
.ftr-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ftr-apps a { gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-md); background: var(--dark-fill); color: #fff; font-weight: 600; font-size: var(--fs-14); }
.ftr-apps a:hover { background: #4f4f4f; color: #fff; }
.ftr-apps .ico { width: 18px; height: 18px; }
.ftr-msg { display: flex; gap: 8px; margin-top: 4px; }
.ftr-msg a { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-sm); background: var(--dark-fill); color: #fff; }
.ftr-msg a:hover { background: var(--y); color: var(--g); }
.ftr-bottom { padding-top: 20px; border-top: 1px solid var(--dark-line); font-size: var(--fs-14); line-height: 1.9; color: var(--on-dark-faint); }
.ftr-legal { margin: 0; }
.ftr-legal > span { white-space: nowrap; }
.ftr .ftr-legal a { display: inline; min-height: 0; color: var(--on-dark-muted); text-decoration: underline; text-decoration-color: var(--on-dark-faint); text-underline-offset: 3px; }
.ftr .ftr-legal a:hover { color: var(--y); }
.ftr .logo-mark { width: 28px; height: 35px; }
.ftr .logo-word { font-size: 24px; }
@media (min-width: 640px) { .ftr-ct { grid-column: auto; } .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ftr-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; } .ftr-brand { grid-column: auto; } }

.drawer, .sheet { position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden; pointer-events: none; }
.drawer.open, .sheet.open { visibility: visible; pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.5); opacity: 0; transition: opacity 240ms ease; }
.open > .scrim { opacity: 1; }
.drawer-box { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: var(--sh-pop); transform: translateX(100%); transition: transform 320ms var(--ease-drawer); }
.drawer.open .drawer-box { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line-2); }
.drawer-head h2 { font-size: var(--fs-h3); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px; }
.drawer-foot { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2); background: #fff; }
.sheet-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: var(--sh-pop); transform: translateY(100%); transition: transform 320ms var(--ease-drawer); }
.sheet.open .sheet-box { transform: none; }
.sheet-box .x { position: absolute; right: 12px; top: 12px; }
.sheet-box h2 { padding-right: 48px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 700px) {
  .sheet-box { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 32px; border-radius: 24px; opacity: 0; transform: translate(-50%, -46%) scale(0.98); transition: transform 260ms var(--ease), opacity 200ms ease; }
  .sheet.open .sheet-box { opacity: 1; transform: translate(-50%, -50%); }
  .sheet-box.top { top: 24px; transform: translate(-50%, -8px); }
  .sheet.open .sheet-box.top { transform: translate(-50%, 0); }
}
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .im { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--line-img); overflow: hidden; color: var(--muted); }
.cart-line .im img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.cart-line a { text-decoration: none; }
.cart-line b { font-size: var(--fs-15); line-height: 1.35; }
.cart-line .meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cart-line .icon-btn { background: transparent; color: var(--muted); }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--fill); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .qty button:hover { background: var(--fill-hover); } }
.qty span, .qty input { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty input { width: 48px; height: 40px; border: 1.5px solid var(--line-input); border-radius: var(--r-sm); background: #fff; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-md); }
.sum-row b { font-size: 24px; font-weight: 800; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: var(--muted); }
.mini { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.mini .im { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: var(--r-md); background: #fff; overflow: hidden; }
.mini .im img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.mini b { display: block; font-size: var(--fs-15); line-height: 1.3; }
.mini span { font-size: var(--fs-14); color: var(--muted); }
.done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.done .ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--y); color: var(--g); }
.done .ic .ico { width: 24px; height: 24px; stroke-width: 2.4; }

.lead-form { display: flex; flex-direction: column; gap: var(--s-4); }
.lead-form .consent { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.lead-form .consent a { color: inherit; }
.lead-form .seg > button { min-height: 44px; }
.dk .lead-form .consent, .sec-dark .lead-form .consent { color: var(--on-dark-muted); }
.dk .lead-form .field > label, .sec-dark .lead-form .field > label { color: #fff; }

.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 18px; border-radius: var(--r-lg); background: var(--g); color: #fff; font-weight: 600; box-shadow: var(--sh-pop); transform: translateX(-50%); animation: toastIn 260ms var(--ease) both; }
.toast > span { display: inline-flex; align-items: center; gap: 10px; }
.toast > span .ico { color: var(--y); }
.toast .btn { min-height: 44px; padding: 0 16px; font-size: var(--fs-15); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 899px) { .toast { top: calc(var(--header-h) + 8px); bottom: auto; } }
html:has(.drawer.open) .toast, html:has(.sheet.open) .toast { display: none; }
html:has(details.mm[open]) :is(.bbar, .mbar, .co-mbar) { transform: translateY(110%); visibility: hidden; }
@media (max-width: 899px) {
  html:has(body.has-bbar), html:has(.co-page) { scroll-padding-bottom: 110px; }
  html:has(.mbar.show) { scroll-padding-bottom: 90px; }
}

.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex; align-items: center; gap: 8px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--g); color: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -20px 30px -20px rgba(0, 0, 0, 0.35); transform: translateY(110%); transition: transform 280ms var(--ease); }
.mbar.show { transform: none; }
.mbar .icon-btn { background: var(--dark-fill); color: #fff; }
.mbar .btn { flex: 1 1 auto; min-height: 48px; padding: 0 14px; }
.mbar .mb-price { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.mbar .mb-price small { font-size: var(--fs-xs); color: var(--on-dark-muted); }
.mbar .mb-price b { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.mbar .mb-price + .btn { flex: 0 1 auto; }
@media (min-width: 900px) { .mbar { display: none; } }
.fab { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-bar); display: none; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (min-width: 900px) { .fab { display: flex; } }
.fab > button { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--y); color: var(--g); box-shadow: var(--sh-pop); transition: transform 240ms var(--ease), opacity 200ms ease; }
.fab.off > button { opacity: 0; transform: scale(0.6); pointer-events: none; }
.fab .pop { display: none; flex-direction: column; gap: 12px; width: 260px; padding: 18px; border-radius: var(--r-xl); background: #fff; color: var(--ink); box-shadow: var(--sh-pop), 0 0 0 1px var(--line); }
.fab.open .pop { display: flex; animation: mmIn 200ms var(--ease) both; }
.fab .pop small { display: block; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.fab .pop .row { gap: 8px; }

.grid-products { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-products > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1200px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.lead-band { padding: var(--s-8) var(--s-5); border-radius: var(--r-2xl); background: var(--g); color: #fff; }
@media (min-width: 761px) { .lead-band { padding: var(--s-12); } }

.hide { display: none !important; }
@media (max-width: 760px) { .hide-m { display: none !important; } }
@media (min-width: 761px) { .hide-d { display: none !important; } }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-8 { margin-bottom: var(--s-8); }
.gap-2 { gap: var(--s-2); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.ai-start { align-items: flex-start; }
.ai-center { align-items: center; }
.jc-between { justify-content: space-between; }
.f1 { flex: 1 1 0; min-width: 0; }
.rel { position: relative; }
.r-lg { border-radius: var(--r-lg); }
.r-xl { border-radius: var(--r-xl); }
.ov-h { overflow: hidden; }
.maxw-60 { max-width: 60ch; }

.sticky-h { position: sticky; top: 0; z-index: var(--z-sticky); }
.rv { animation: rv 1ms linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
@keyframes rv { from { opacity: 0; transform: translateY(36px) scale(0.985); } to { opacity: 1; transform: none; } }
.up { animation: up 760ms var(--ease-out) both; }
.d1 { animation-delay: 60ms; }
.d2 { animation-delay: 140ms; }
.d3 { animation-delay: 220ms; }
.d4 { animation-delay: 300ms; }
.d5 { animation-delay: 380ms; }
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2200ms var(--ease-io) 400ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ping { transform-box: fill-box; transform-origin: center; animation: ping 1800ms cubic-bezier(0, 0, 0.2, 1) 2400ms 4 both; }
@keyframes ping { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.lift { transition: transform 260ms var(--ease), box-shadow 260ms ease, border-color 200ms ease; }
.lift img { transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .lift:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--line-hover); }
  .lift:hover img { transform: scale(1.05); }
}
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .shine:hover::after { transform: translateX(120%); transition: transform 700ms var(--ease); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .up, .draw, .ping, .swap { animation: none !important; stroke-dashoffset: 0; opacity: 1; transform: none; }
  .lift, .lift img, .shine::after { transition: none !important; }
  .lift:hover, .lift:hover img { transform: none !important; }
  .mm[open] .mm-panel, .hdd-panel, .toast, .fab.open .pop { animation: none !important; }
  .drawer-box, .sheet-box, .scrim, .mbar, .btn, .chip, .cta, .pm, .nl .ico { transition: none !important; }
}
@media print {
  .topbar, .hdr, .ftr, .mbar, .fab, .drawer, .sheet, .toast { display: none !important; }
  body { color: #000; }
}

body { text-wrap: pretty; }
button, .btn, [role=tab], summary, figcaption, th { text-wrap: balance; }

@media (max-width: 640px) {
  .nm { -webkit-line-clamp: 3; min-height: 3.9em; }
  html:has(details.mm[open]) { overflow: hidden; }
  .ftr li a, .crumbs a, .rm { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) { .rv { animation: none; } }
.drawer-box:focus, .sheet-box:focus { outline: none; }
@media (max-width: 760px) {
  .crumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .crumbs::-webkit-scrollbar { display: none; }
  .crumbs > * { flex: none; }
  .crumbs:has(> a ~ a) > [aria-current], .crumbs:has(> a ~ a) > .ico:has(+ [aria-current]) { display: none; }
  [data-clamp].clamp { position: relative; max-height: var(--clamp, 560px); overflow: hidden; }
  [data-clamp].clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(160px, 60%); background: linear-gradient(rgba(255, 255, 255, 0), #fff 78%); pointer-events: none; }
  .clamp-more { position: absolute; left: var(--clamp-x, var(--gut)); bottom: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--y); text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
@media (max-width: 1099px) {
  html:has(details.mm[open]) { overflow: hidden; }
  .mm-panel { height: calc(100dvh - var(--mm-top, var(--header-h))); max-height: none; }
}
.mbar .btn { font-size: var(--fs-15); padding: 0 12px; white-space: nowrap; }
@media (max-width: 389px) { .mbar .icon-btn:nth-child(2) { display: none; } }
.dl dt, .dl dd { overflow-wrap: anywhere; hyphens: auto; }
.faq-msg { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }