@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-condensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/barlow-condensed-800.woff2) format("woff2")}
/* CartonMath: "Container yard at dawn"
   Cool paper and white surfaces, deep navy ink, one signal-orange accent for actions,
   focus and the live result. Shipping-container hues appear only in drawings.
   Type: Barlow (UI, text) and Barlow Condensed (display, big numbers). */
:root{
  --paper:#F3F5F8; --surface:#FFFFFF; --surface-2:#EAEEF3; --stage:#F7F9FB;
  --ink:#0B1B33; --ink-2:#43536B; --ink-3:#6B7A90; --line:#D9E0E8; --line-2:#E8EDF2;
  --accent:#FF5A1F; --accent-h:#E8480F; --accent-soft:#FFE8DF; --accent-text:#C2410C; --on-accent:#FFFFFF;
  --seller-bg:#E1EAFD; --seller-ink:#1A47B8; --buyer-bg:#FFF0C7; --buyer-ink:#7A4A00;
  --warn:#B42318; --warn-soft:#FDECEA; --ok:#0F7B5F; --ok-soft:#DDF3EC;
  --c-blue:#2F6FED; --c-blue-t:#6E9BF3; --c-blue-d:#2459C4; --c-blue-e:#1A438F;
  --c-teal:#11806A; --c-teal-t:#4EAE98; --c-teal-d:#0C6655; --c-teal-e:#084A3D;
  --c-orange:#FF8A1F; --c-orange-t:#FFB56B; --c-orange-d:#DB7012; --c-orange-e:#A2520B;
  --c-yellow:#F2B21B; --c-yellow-t:#F8D16A; --c-yellow-d:#CD9310; --c-yellow-e:#94690A;
  --c-magenta:#B8235A; --c-magenta-t:#D6638D; --c-magenta-d:#951A48; --c-magenta-e:#6C1234;
  --c-navy:#23395D; --c-navy-t:#4F6890; --c-navy-d:#1A2B48; --c-navy-e:#101C30;
  --ctn-top:#E2BC86; --ctn-l:#C99A62; --ctn-r:#AD7F48; --ctn-e:#8E6436; --tape:#F3E3C7;
  --wood-top:#E9DEC8; --wood-l:#D2C2A3; --wood-r:#B8A47F; --wood-e:#8C7A5A;
  --shadow:rgba(11,27,51,.10); --grid:rgba(11,27,51,.055);
  --font:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Barlow Condensed","Arial Narrow",ui-sans-serif,sans-serif;
  /* type scale */
  --t-14:14px; --t-16:16px; --t-18:18px; --t-22:22px; --t-28:28px; --t-36:clamp(30px,3vw,36px); --t-48:clamp(36px,4.2vw,48px); --t-64:clamp(44px,5.6vw,64px); --t-88:clamp(52px,7.4vw,88px);
  /* spacing and radius by role */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-xs:6px; --r-s:10px; --r-m:16px; --r-l:24px;
  --sh-float:0 1px 0 rgba(11,27,51,.04),0 18px 40px -22px rgba(11,27,51,.28);
  --sh-pop:0 30px 80px -30px rgba(11,27,51,.45);
  --gut:clamp(16px,4vw,44px); --max:1240px;
  --ease:cubic-bezier(.2,.7,.1,1); --spring:cubic-bezier(.3,1.4,.5,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#07111F; --surface:#0D1B2E; --surface-2:#13243B; --stage:#0A1626;
  --ink:#EAF0F7; --ink-2:#A8B6C9; --ink-3:#7F8FA6; --line:#1F3149; --line-2:#172840;
  --accent:#FF6B33; --accent-h:#FF8152; --accent-soft:#3A1D12; --accent-text:#FF8A5C; --on-accent:#0B1424;
  --seller-bg:#14295A; --seller-ink:#A9C2FF; --buyer-bg:#3A2A06; --buyer-ink:#F6CF6B;
  --warn:#FF8B7E; --warn-soft:#3A1614; --ok:#5ED1AE; --ok-soft:#0E3328;
  --c-blue:#4A84FF; --c-blue-t:#86AAFF; --c-blue-d:#3366D6; --c-blue-e:#1F4699;
  --c-teal:#1FA386; --c-teal-t:#5CC6AE; --c-teal-d:#178269; --c-teal-e:#0E5A49;
  --c-orange:#FF9A3D; --c-orange-t:#FFBF80; --c-orange-d:#E07D22; --c-orange-e:#A85A14;
  --c-yellow:#F7C13F; --c-yellow-t:#FAD67E; --c-yellow-d:#D7A11F; --c-yellow-e:#9C7412;
  --c-magenta:#D13A73; --c-magenta-t:#E5779F; --c-magenta-d:#AE2A5B; --c-magenta-e:#7A1C40;
  --c-navy:#3B5A8C; --c-navy-t:#6582B2; --c-navy-d:#2D4770; --c-navy-e:#1C2E4C;
  --ctn-top:#D6AE76; --ctn-l:#B98A54; --ctn-r:#9A6F3D; --ctn-e:#6F4C26; --tape:#E8D5B3;
  --wood-top:#CDBFA4; --wood-l:#B3A282; --wood-r:#988763; --wood-e:#6E5F43;
  --shadow:rgba(0,0,0,.35); --grid:rgba(234,240,247,.05);
  --sh-float:0 1px 0 rgba(0,0,0,.2),0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#07111F; --surface:#0D1B2E; --surface-2:#13243B; --stage:#0A1626;
  --ink:#EAF0F7; --ink-2:#A8B6C9; --ink-3:#7F8FA6; --line:#1F3149; --line-2:#172840;
  --accent:#FF6B33; --accent-h:#FF8152; --accent-soft:#3A1D12; --accent-text:#FF8A5C; --on-accent:#0B1424;
  --seller-bg:#14295A; --seller-ink:#A9C2FF; --buyer-bg:#3A2A06; --buyer-ink:#F6CF6B;
  --warn:#FF8B7E; --warn-soft:#3A1614; --ok:#5ED1AE; --ok-soft:#0E3328;
  --c-blue:#4A84FF; --c-blue-t:#86AAFF; --c-blue-d:#3366D6; --c-blue-e:#1F4699;
  --c-teal:#1FA386; --c-teal-t:#5CC6AE; --c-teal-d:#178269; --c-teal-e:#0E5A49;
  --c-orange:#FF9A3D; --c-orange-t:#FFBF80; --c-orange-d:#E07D22; --c-orange-e:#A85A14;
  --c-yellow:#F7C13F; --c-yellow-t:#FAD67E; --c-yellow-d:#D7A11F; --c-yellow-e:#9C7412;
  --c-magenta:#D13A73; --c-magenta-t:#E5779F; --c-magenta-d:#AE2A5B; --c-magenta-e:#7A1C40;
  --c-navy:#3B5A8C; --c-navy-t:#6582B2; --c-navy-d:#2D4770; --c-navy-e:#1C2E4C;
  --ctn-top:#D6AE76; --ctn-l:#B98A54; --ctn-r:#9A6F3D; --ctn-e:#6F4C26; --tape:#E8D5B3;
  --wood-top:#CDBFA4; --wood-l:#B3A282; --wood-r:#988763; --wood-e:#6E5F43;
  --shadow:rgba(0,0,0,.35); --grid:rgba(234,240,247,.05);
  --sh-float:0 1px 0 rgba(0,0,0,.2),0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme:dark}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-18);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-variant-numeric:lining-nums}
img,svg{max-width:100%}
a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .15s,color .15s}
a:hover{text-decoration-color:var(--accent);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
table,input,output,.num,dd,.v,.tally code,.stats,.spec{font-variant-numeric:tabular-nums lining-nums}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
figure{margin:0}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--ink)}
h1{font-family:var(--display);font-weight:800;font-size:var(--t-64);line-height:.95;letter-spacing:-.005em}
h2{font-family:var(--display);font-weight:700;font-size:var(--t-48);line-height:1;letter-spacing:-.005em}
h3{font-weight:600;font-size:var(--t-22);line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 var(--s-3);max-width:68ch;text-wrap:pretty}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin-top:var(--s-4)}
.lede b{color:var(--ink);font-weight:600}
.meta{font-size:var(--t-14);color:var(--ink-3);margin:var(--s-4) 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;max-width:none}
.meta span{display:inline-flex;gap:7px;align-items:center}
.meta svg{width:15px;height:15px;flex:none;opacity:.8}
.meta time{color:var(--ink-2);font-weight:600}
.small{font-size:var(--t-14);color:var(--ink-3)}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82em;background:var(--surface-2);padding:2px 6px;border-radius:var(--r-xs);color:var(--ink);overflow-wrap:anywhere}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--accent);color:var(--on-accent);padding:10px 14px;font-weight:600;text-decoration:none;border-radius:var(--r-s)}
.skip:focus{top:12px}
.calc>*,.inv>*,.split>*,.work>*,.hero>*,.views>*,.ph>*{min-width:0}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:.005em;white-space:nowrap;line-height:1}
.brand svg{width:32px;height:32px;flex:none}
.brand:hover{color:var(--ink)}
.brand span{color:var(--accent-text)}
.nav{display:flex;gap:2px}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:var(--t-16);padding:8px 11px;border-radius:var(--r-s);position:relative;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:-12px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.findbtn{display:flex;align-items:center;gap:10px;font:inherit;font-size:15px;color:var(--ink-3);background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:8px 8px 8px 14px;cursor:pointer;min-width:210px;transition:border-color .15s,background .15s}
.findbtn:hover{border-color:var(--line);background:var(--surface)}
.findbtn svg{width:16px;height:16px}
.findbtn kbd{margin-left:auto;font:600 12px var(--font);border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink-3);background:var(--surface)}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;cursor:pointer;padding:0;transition:color .15s,border-color .15s,transform .3s var(--ease)}
.iconbtn:hover{color:var(--ink);border-color:var(--ink-3)}
.iconbtn svg{width:19px;height:19px}
.themebtn:active svg{transform:rotate(180deg);transition:transform .4s var(--ease)}
.menubtn{display:none}
.mnav{display:none}
@media (max-width:1060px){.nav{display:none}.menubtn{display:grid}
  .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-pop);padding:var(--s-3) var(--gut) var(--s-5);transform-origin:top;animation:menu .22s var(--ease)}
  .mnav[hidden]{display:none!important}
  .mnav a{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line-2);text-decoration:none;font-weight:600;font-size:var(--t-18)}
  .mnav a small{font-weight:400;color:var(--ink-3);font-size:var(--t-14)}
  .mnav a[aria-current="page"]{color:var(--accent-text)}}
@keyframes menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.findbtn{min-width:0;width:40px;height:40px;padding:0;justify-content:center;background:var(--surface);border-color:var(--line)}.findbtn span,.findbtn kbd{display:none}.brand{font-size:24px}.top .wrap{gap:var(--s-3)}}

/* ---------------------------------------------------------------- page frame */
main{padding-block:var(--s-5) var(--s-7)}
.crumbs{font-size:var(--t-14);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-bottom:var(--s-5)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{width:6px;height:6px;border-right:1.5px solid var(--line);border-top:1.5px solid var(--line);transform:rotate(45deg);display:inline-block;margin:0 2px}
.crumbs [aria-current]{color:var(--ink-2);font-weight:500}
.ph{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5) var(--s-8);align-items:end;padding-bottom:var(--s-2)}
.ph.has-art{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.ph .art{justify-self:end;width:100%;max-width:340px;max-height:300px;display:grid;place-items:center}
.ph .art svg{max-height:300px}
.ph .art svg{display:block;width:100%;height:auto}
@media (max-width:900px){.ph.has-art{grid-template-columns:minmax(0,1fr)}.ph .art{justify-self:start;max-width:260px;order:-1}}
.ph h1 .sub{display:block;font-family:var(--font);font-weight:500;font-size:.36em;line-height:1.2;color:var(--ink-2);letter-spacing:0;margin-top:.45em}
.params{font-size:var(--t-14);color:var(--ink-3);margin-top:var(--s-2)}
.params code{font-size:13px;white-space:nowrap}
@media (max-width:640px){.params code{white-space:normal}}
section.blk{padding-top:clamp(64px,8vw,112px)}
.blk-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6);max-width:760px}
.blk-head p{color:var(--ink-2);margin:0}
.blk-head.row{max-width:none;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.blk-head.row>p{grid-column:1}
@media (max-width:640px){.blk-head.row{grid-template-columns:minmax(0,1fr)}.blk-head.row>div{order:3}}
.label{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-14);font-weight:600;color:var(--ink-2)}
.label::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--accent)}
.dl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s-4);font-size:15px}
.dl-row>span{color:var(--ink-3);margin-right:4px}
.dl-row a{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;padding:5px 12px 5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:border-color .15s}
.dl-row a:hover{border-color:var(--ink-3)}
.dl-row a svg{width:15px;height:15px;color:var(--ink-3)}

/* ---------------------------------------------------------------- forms */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5)}
.form{display:grid;gap:var(--s-6);align-content:start}
legend+*{clear:both}
fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--s-3);min-width:0}

legend{float:left;font-size:var(--t-16);font-weight:700;color:var(--ink);padding:0;margin-bottom:var(--s-3);display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
legend .seg{font-weight:500}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field label,.flabel{font-size:var(--t-14);font-weight:500;color:var(--ink-2)}
.field small{font-size:13px;color:var(--ink-3);line-height:1.4}
.inp{position:relative;display:flex;align-items:stretch;min-width:0}
input[type=number],input[type=text],input[type=date],input[type=email],input[type=search],select,textarea{font:inherit;font-size:var(--t-18);font-weight:500;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);min-width:0;width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
textarea{font-size:var(--t-16);font-weight:400;line-height:1.45;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink-3) 70%,var(--line))}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.inp input{padding-right:38px}
.inp .u{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:var(--ink-3);pointer-events:none}
select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.row2,.row3,.row4{display:grid;gap:var(--s-3)}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.chk input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap;max-width:100%}
.seg button{font:inherit;font-size:var(--t-14);font-weight:600;color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:6px 13px;cursor:pointer;transition:background .2s var(--ease),color .2s,box-shadow .2s;font-variant-numeric:tabular-nums;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(11,27,51,.12),0 0 0 1px var(--line)}
.ctl{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.ctl-label{font-size:var(--t-14);color:var(--ink-3);font-weight:500}
.btn{font:inherit;font-size:var(--t-16);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--r-s);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,transform .15s var(--ease),box-shadow .15s;line-height:1.2}
.btn:hover{background:var(--accent-h);border-color:var(--accent-h);color:var(--on-accent);box-shadow:0 8px 20px -10px var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ink:hover{box-shadow:none;background:color-mix(in srgb,var(--ink) 86%,var(--accent))}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-3);box-shadow:none;color:var(--ink)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--ink-2);padding-inline:10px}
.btn.quiet:hover{background:var(--surface-2);color:var(--ink);box-shadow:none}
.btn svg{width:17px;height:17px;flex:none}
.btn.done{background:var(--ok);border-color:var(--ok);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center}

/* ---------------------------------------------------------------- calculator workbench */
.calc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-5);align-items:start;margin-top:var(--s-6)}
@media (min-width:1061px){.calc>.panel{position:sticky;top:86px}}
@media (max-width:1060px){.calc{grid-template-columns:minmax(0,1fr)}}
.out{display:grid;gap:var(--s-5);min-width:0;grid-template-columns:minmax(0,1fr)}
/* the stage: where the isometric drawing and the answer live */
.stage{position:relative;background:var(--stage);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-float)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(30deg,var(--grid) 1px,transparent 1px),linear-gradient(150deg,var(--grid) 1px,transparent 1px);background-size:56px 32.3px;-webkit-mask:linear-gradient(to bottom,transparent 8%,#000 45%,#000 85%,transparent);mask:linear-gradient(to bottom,transparent 8%,#000 45%,#000 85%,transparent)}
.stage>*{position:relative}
.stage-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-5) var(--s-5) 0;flex-wrap:wrap}
.res .lab{font-size:var(--t-16);font-weight:600;color:var(--ink-2)}
.res .big{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;margin-top:2px}
.res .v{font-family:var(--display);font-weight:800;font-size:clamp(72px,9vw,120px);line-height:.88;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;position:relative}
.res .v::after{content:"";position:absolute;left:2px;right:2px;bottom:-8px;height:5px;border-radius:3px;background:var(--accent);transform-origin:left;transition:transform .5s var(--ease)}
.res .u{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.4vw,32px);color:var(--ink-2)}
.res .sum{font-size:var(--t-16);color:var(--ink-2);margin:18px 0 0;max-width:46ch}
.res .sum b{color:var(--ink);font-weight:600}
.bump::after{animation:bump .7s var(--ease)}
@keyframes bump{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.stage-art{padding:0 var(--s-4);min-height:220px;display:grid;place-items:center}
svg.iso{display:block;width:100%;height:auto;overflow:visible}
.stage-art svg.iso{max-height:440px}
.stage-plan{padding:var(--s-4) var(--s-5) var(--s-2)}
.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-5) var(--s-5);font-size:var(--t-14);color:var(--ink-3)}
.legend{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stats>div{padding:var(--s-4) 18px;border-right:1px solid var(--line-2);min-width:0}
.stats>div:last-child{border-right:0}
.stats dt{font-size:var(--t-14);font-weight:500;color:var(--ink-3)}
.stats dd{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(26px,2.4vw,32px);white-space:nowrap;line-height:1.05;color:var(--ink);overflow-wrap:anywhere}
.stats dd small{display:block;white-space:normal;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink-3);margin-top:3px;line-height:1.35}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div{border-bottom:1px solid var(--line-2)}.stats>div:nth-child(2n){border-right:0}.stats dd{font-size:30px}}
.meter{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .6s var(--ease)}
.meter.ok i{background:var(--c-teal)}
.warnline{margin:0;font-size:15px;font-weight:500;color:var(--warn);background:var(--warn-soft);border-radius:var(--r-s);padding:10px 14px;display:flex;gap:10px;align-items:flex-start}
.warnline svg{width:18px;height:18px;flex:none;margin-top:2px}
.vt .seg{background:color-mix(in srgb,var(--surface-2) 80%,transparent)}
/* 2D plan views */
.views{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-5)}
@media (max-width:640px){.views{grid-template-columns:minmax(0,1fr)}}
.vlab{font-size:var(--t-14);font-weight:600;color:var(--ink-2);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vlab span+span{font-weight:500;color:var(--ink-3)}
svg.dw{display:block;width:100%;height:auto;overflow:visible}
.cview{display:grid;gap:var(--s-4)}
.dw .ctn{fill:var(--ctn-top);stroke:var(--ctn-e);stroke-width:1}
.dw .ctn.alt{fill:color-mix(in srgb,var(--ctn-top) 70%,var(--ctn-l))}
.dw .ctn.hi{fill:var(--accent)}
.dw .pal{fill:var(--wood-l);stroke:var(--wood-e);stroke-width:1}
.dw .box{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.dw .boxf{fill:color-mix(in srgb,var(--c-blue) 9%,var(--surface));stroke:var(--ink-2);stroke-width:1.6}
.dw .rib{stroke:color-mix(in srgb,var(--c-blue) 25%,var(--line));stroke-width:1}
.dw .lim{stroke:var(--warn);stroke-width:1.3;stroke-dasharray:6 4;fill:none}
.dw .dim{stroke:var(--ink-3);stroke-width:1;fill:none}
.dw .dimt{fill:var(--ink-2);font:600 12px var(--font);font-variant-numeric:tabular-nums}
.dw .dimt.k{fill:var(--ink);font-weight:700}
.dw .limt{fill:var(--warn);font:600 11px var(--font)}
.dw .door{fill:none;stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3}
.dw .cell{fill:var(--ctn-top)}
.dw .g{stroke:var(--ctn-e);stroke-width:1;fill:none}
/* isometric animation */
.iso .drop{animation:isodrop .55s var(--spring) both}
@keyframes isodrop{from{opacity:0;transform:translateY(-38px)}60%{opacity:1}to{opacity:1;transform:none}}
.iso.settle .stack{animation:settle .45s var(--ease)}
@keyframes settle{0%{transform:translateY(-5px)}55%{transform:translateY(1.5px)}100%{transform:none}}
.iso .lbl{font:600 12px var(--font);fill:var(--ink-2);font-variant-numeric:tabular-nums}
.iso .lbl.k{fill:var(--ink);font-weight:700}
.iso .dimln{stroke:var(--ink-3);stroke-width:1;fill:none}
.iso .limln{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:5 4;fill:none}
.iso .limt{fill:var(--warn);font:600 11.5px var(--font)}

/* ---------------------------------------------------------------- comparison tables with bars */
.tbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t-16)}
th,td{padding:13px 18px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2)}
th:first-child,td:first-child{text-align:left}
thead th{font-size:var(--t-14);font-weight:600;color:var(--ink-3);background:var(--surface);border-bottom:1px solid var(--line);vertical-align:bottom}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
tr.cur{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)!important}
tr.cur td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.best td:first-child::after{content:"Best";font-family:var(--font);font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-soft);border-radius:99px;padding:2px 7px;margin-left:8px;vertical-align:2px}
td a{font-weight:500;text-decoration-color:var(--line)}
td a:hover{text-decoration-color:var(--accent)}
td a b{font-weight:700}
th .sub{display:block;margin:2px 0 0;font-weight:400;font-size:13px}
td .sub{color:var(--ink-3);font-size:14px;margin-left:6px}
.wrapcells td{white-space:normal;min-width:120px}
tbody tr.rowlink{cursor:pointer}
.tnote{font-size:var(--t-14);color:var(--ink-3);margin-top:var(--s-3)}
td.bar{min-width:150px;width:30%}
.mbar{display:grid;grid-template-columns:minmax(40px,1fr) 52px;align-items:center;gap:10px;background:linear-gradient(var(--surface-2),var(--surface-2)) 0 50%/calc(100% - 62px) 8px no-repeat;border-radius:99px}
.mbar i{display:block;justify-self:start;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 45%,var(--surface-2));min-width:3px;max-width:100%;transition:width .5s var(--ease)}
tr.best .mbar i,tr.cur .mbar i{background:var(--accent)}
.mbar span{min-width:44px;text-align:right}
.filter{max-width:340px;margin-bottom:var(--s-4)}

/* ---------------------------------------------------------------- worked example */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6) var(--s-8);align-items:start}
@media (max-width:900px){.work{grid-template-columns:minmax(0,1fr)}}
.tally{margin:0;padding:0;list-style:none;counter-reset:ln;position:relative}
.tally li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 14px;padding:0 0 18px;counter-increment:ln;position:relative}
.tally li::before{content:counter(ln);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);font:700 14px var(--font);color:var(--ink-2);grid-row:span 2;position:relative;z-index:1}
.tally li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:28px;bottom:0;width:1.5px;background:var(--line)}
.tally span{font-size:var(--t-14);color:var(--ink-3);padding-top:3px}
.tally code{background:none;padding:0;font-family:var(--font);font-size:var(--t-18);font-weight:600;color:var(--ink)}
.tally li.res::before{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tally li.res code{font-family:var(--display);font-size:var(--t-28);font-weight:700}
.prose-sm p{color:var(--ink-2)}
.prose-sm h3{margin:0 0 8px;font-size:var(--t-18);font-weight:700}
.prose-sm>*+h3{margin-top:var(--s-5)}

/* ---------------------------------------------------------------- tips with drawings */
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.tips article{padding:var(--s-5) var(--s-5) var(--s-2) 0;display:grid;grid-template-rows:120px auto 1fr;gap:var(--s-3)}
.tips article+article{padding-left:var(--s-5);border-left:1px solid var(--line)}
.tips svg{height:120px;width:auto;max-width:100%}
.tips h3{font-size:var(--t-18);font-weight:700}
.tips p{color:var(--ink-2);font-size:var(--t-16);margin:0}
@media (max-width:860px){.tips{grid-template-columns:minmax(0,1fr)}.tips article,.tips article+article{padding:var(--s-5) 0;border-left:0;border-bottom:1px solid var(--line);grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto 1fr}.tips svg{grid-row:span 2;height:90px}}

/* ---------------------------------------------------------------- spec cards */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin:0}
.spec>div{background:var(--surface);padding:var(--s-4) var(--s-5);min-width:0}
.spec .wide{grid-column:1/-1}
.spec dt{font-size:var(--t-14);font-weight:500;color:var(--ink-3)}
.spec dd{margin:2px 0 0;font-family:var(--display);font-size:var(--t-28);font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.spec dd small{display:block;font-family:var(--font);font-size:var(--t-14);color:var(--ink-3);font-weight:500;margin-top:2px}
.spec .wide dd{font-family:var(--font);font-size:var(--t-16);font-weight:500;line-height:1.45;color:var(--ink-2)}
@media (max-width:520px){.spec{grid-template-columns:minmax(0,1fr)}}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-5);align-items:start}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}}
.plate{background:var(--stage);border:1px solid var(--line);border-radius:var(--r-l);position:relative;overflow:hidden}
.plate figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:var(--t-14);color:var(--ink-3);padding:var(--s-3) var(--s-5) var(--s-4)}
.plate figcaption b{color:var(--ink-2);font-weight:600}
.plate .pad{padding:var(--s-5)}

/* ---------------------------------------------------------------- links, chips, related */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-size:15px;font-weight:500;padding:7px 14px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:var(--surface);transition:border-color .15s,background .15s,color .15s}
.chips a:hover{border-color:var(--ink-3)}
.chips a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-3)}
.related a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:center;padding:var(--s-4);border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .25s var(--ease)}
.related a:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.related svg.ic{width:56px;height:42px;grid-row:span 2}
.related b{font-weight:700;font-size:var(--t-16);line-height:1.25}
.related span{font-size:var(--t-14);color:var(--ink-3);line-height:1.35}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5);font-weight:600}
@media (max-width:560px){.pager{grid-template-columns:minmax(0,1fr)}}
.pager a{text-decoration:none;display:grid;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.pager a small{font-weight:500;color:var(--ink-3);font-size:13px}
.pager a:last-child{text-align:right}
.pager a:hover{border-color:var(--ink-3)}

/* ---------------------------------------------------------------- FAQ */
.faq{max-width:880px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:20px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:var(--t-18);font-weight:600;margin:0}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14h10M14 9v10' stroke='%2343536B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/28px no-repeat;transition:transform .3s var(--ease),background-color .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--accent-soft)}
.faq summary:hover h3{color:var(--accent-text)}
.faq details p{color:var(--ink-2);padding:0 48px 22px 0;margin:0}

/* ---------------------------------------------------------------- home */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6) var(--s-8);align-items:center;padding-top:var(--s-6)}
@media (max-width:1000px){.hero{grid-template-columns:minmax(0,1fr);padding-top:var(--s-2)}}
.hero h1{font-size:var(--t-88);line-height:.9;letter-spacing:-.012em}
.hero .lede{font-size:clamp(18px,1.7vw,21px);margin-top:var(--s-5)}
.hero .actions{margin-top:var(--s-6)}
.hero-stage .stage-top{padding-bottom:0}
.hero-stage .stage-art{min-height:300px}
@media (max-width:640px){.hero-stage .stage-art,.stage-art{min-height:0}}
.hero-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);gap:var(--s-3);padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid var(--line);background:var(--surface)}
@media (max-width:640px){.hero-ctl{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-ctl .field:last-child{grid-column:1/-1}}
.hero-ctl .inp input{padding-left:10px;padding-right:32px}
.hero-ctl .inp .u{right:9px}
.proof{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);padding:0;list-style:none;font-size:15px;color:var(--ink-2)}
.proof li{display:flex;gap:8px;align-items:center}
.proof svg{width:18px;height:18px;color:var(--c-teal);flex:none}
.yard{display:block;width:100%;height:clamp(90px,11vw,150px)}
.yardband{margin-top:clamp(48px,7vw,88px);margin-inline:calc(50% - 50vw);overflow:hidden;line-height:0}
/* tool showcase: one feature, then a list */
.showcase{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-5)}
@media (max-width:960px){.showcase{grid-template-columns:minmax(0,1fr)}}
.feature{display:grid;grid-template-rows:auto 1fr;background:var(--ink);color:var(--paper);border-radius:var(--r-l);padding:var(--s-6);text-decoration:none;position:relative;overflow:hidden;min-height:420px;transition:transform .3s var(--ease)}
.feature:hover{color:var(--paper);transform:translateY(-3px)}
.feature h3{color:var(--paper);font-family:var(--display);font-weight:700;font-size:var(--t-48);line-height:1}
.feature p{color:color-mix(in srgb,var(--paper) 72%,transparent);margin-top:var(--s-3);max-width:40ch}
.feature .fart{align-self:end;justify-self:center;width:100%;margin-top:var(--s-5)}
.feature .fart svg{width:100%;height:auto;display:block}
.feature .go{display:inline-flex;margin-top:var(--s-4);font-weight:600;color:var(--accent);gap:8px;align-items:center}
:root[data-theme="dark"] .feature{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .feature{background:var(--surface-2)}}
.toollist{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.toollist a{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:4px 18px;align-items:start;padding:var(--s-4) var(--s-5);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2);transition:background .15s}
.toollist a:last-child{border-bottom:0}
.toollist a:hover{background:var(--stage)}
.toollist a:hover h3{color:var(--accent-text)}
.toollist svg.ic{width:72px;height:54px;grid-row:span 2;align-self:center}
.toollist h3{font-size:var(--t-18);font-weight:700;transition:color .15s}
.toollist p{font-size:15px;color:var(--ink-2);margin:0}
.method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
@media (max-width:900px){.method{grid-template-columns:minmax(0,1fr)}}
.method article{display:grid;gap:var(--s-3);align-content:start}
.method figure{background:var(--stage);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5);display:grid;place-items:center;height:230px}
.method figure svg{width:100%;max-width:280px;height:100%;max-height:170px}
.method p{color:var(--ink-2);font-size:var(--t-16);margin:0}
.refgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.refgrid a{display:grid;gap:6px;padding:var(--s-5) var(--s-5) var(--s-5) 0;text-decoration:none;color:var(--ink);align-content:start}
.refgrid a+a{padding-left:var(--s-5);border-left:1px solid var(--line)}
.refgrid b{font-family:var(--display);font-size:var(--t-36);font-weight:700;line-height:1}
.refgrid span{font-size:15px;color:var(--ink-2)}
.refgrid a:hover b{color:var(--accent-text)}
@media (max-width:900px){.refgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.refgrid a:nth-child(3){padding-left:0;border-left:0}.refgrid a:nth-child(n+3){border-top:1px solid var(--line)}}
.databand{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-6);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-6)}
@media (max-width:860px){.databand{grid-template-columns:minmax(0,1fr)}}
.databand h2{font-size:var(--t-36)}
.databand p{color:var(--ink-2);margin-top:var(--s-3)}
.databand .dl-row{margin-top:0}

/* ---------------------------------------------------------------- container selector cards */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards button{font:inherit;display:grid;gap:4px;justify-items:start;text-align:left;padding:10px 10px 9px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.cards button:hover{border-color:var(--ink-3)}
.cards button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);background:color-mix(in srgb,var(--accent-soft) 35%,var(--surface))}
.cards b{font-family:var(--display);font-size:22px;font-weight:700;line-height:1}
.cards small{font-size:12px;color:var(--ink-3);line-height:1.2}
.cards svg.csil{height:22px;width:auto;max-width:100%}
/* fill bars shaped like containers */
.fills{display:grid;gap:var(--s-4)}
.fill{display:grid;grid-template-columns:64px minmax(0,1fr) 112px;gap:var(--s-4);align-items:center}
.fill b{font-family:var(--display);font-size:var(--t-22);font-weight:700}
.fill span{font-size:15px;color:var(--ink-2);text-align:right}
.fill span b{font-family:var(--font);font-size:15px;color:var(--ink)}
.fill svg{display:block;width:100%;height:auto}
@media (max-width:560px){.fill{grid-template-columns:44px minmax(0,1fr) 74px;gap:10px}.fill span{font-size:13px}}
.cargo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-4) var(--s-5)}
.ccard .t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--t-14);font-weight:600;color:var(--ink-2)}
.ccard dd{margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:var(--t-36);line-height:1.05}
.ccard dd small{display:block;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink-3)}
.ccard .cmp{display:grid;gap:6px;margin-top:var(--s-3);font-size:13px;color:var(--ink-3)}
.ccard .cmp div{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:8px;align-items:center}
.ccard .cmp i{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink-3) 30%,var(--surface-2));display:block}
.ccard .cmp .on i{background:var(--accent)}
.ccard .cmp .on{color:var(--ink);font-weight:600}
@media (max-width:560px){.cargo-cards{grid-template-columns:minmax(0,1fr)}}
/* CBM spreadsheet */
.sheetgrid{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface)}
.sg-head,.item.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.9fr) minmax(0,1fr) 72px 30px;align-items:stretch}
.sg-head{background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sg-head span{padding:8px 10px;border-right:1px solid var(--line)}
.sg-head span:last-child{border-right:0}
.item.sg{border:0;border-top:1px solid var(--line-2);border-radius:0;padding:0;gap:0;background:var(--surface);position:relative}
.item.sg .cell{position:relative;border-right:1px solid var(--line-2);min-width:0}
.item.sg input{border:0;border-radius:0;padding:12px 10px;font-size:var(--t-16);background:transparent}
.item.sg input:focus{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent-soft) 30%,var(--surface))}
.item.sg .rcbm{display:flex;align-items:center;justify-content:flex-end;padding:0 10px;font-weight:600;font-size:15px;background:var(--stage);border-right:1px solid var(--line-2)}
.item.sg .rm{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center}
.item.sg .rm:hover{color:var(--warn)}
.sg-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:var(--s-3)}
@media (max-width:560px){.sg-head{display:none}.item.sg{grid-template-columns:repeat(3,minmax(0,1fr));}.item.sg .cell{border-bottom:1px solid var(--line-2)}.item.sg .cell::before{content:attr(data-l);position:absolute;left:10px;top:5px;font-size:11px;color:var(--ink-3);font-weight:600}.item.sg input{padding-top:20px}.item.sg .rcbm{grid-column:span 2;justify-content:flex-start;min-height:40px}.item.sg .rm{min-height:40px}}
.totalbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ink);color:var(--paper);border-radius:var(--r-m);overflow:hidden}
.totalbar div{padding:var(--s-4) var(--s-5);border-right:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}
.totalbar div:last-child{border-right:0}
.totalbar dt{font-size:13px;color:color-mix(in srgb,var(--paper) 65%,transparent);font-weight:500}
.totalbar dd{margin:2px 0 0;font-family:var(--display);font-weight:700;font-size:var(--t-28);line-height:1.1}
.totalbar dd small{display:block;font-family:var(--font);font-size:13px;font-weight:500;color:color-mix(in srgb,var(--paper) 65%,transparent)}
:root[data-theme="dark"] .totalbar{background:var(--surface-2);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .totalbar{background:var(--surface-2);color:var(--ink)}}
@media (max-width:640px){.totalbar{grid-template-columns:repeat(2,minmax(0,1fr))}.totalbar div:nth-child(2){border-right:0}.totalbar div:nth-child(-n+2){border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent)}}
/* weight bars (volumetric) */
.wbars{display:grid;gap:var(--s-4);padding:var(--s-5)}
.wbar{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-3);align-items:center}
.wbar>span{font-size:var(--t-14);font-weight:600;color:var(--ink-2)}
.wbar .track{position:relative;height:44px;background:var(--surface-2);border-radius:var(--r-s);overflow:hidden}
.wbar .track i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--ink-3) 35%,var(--surface-2));border-radius:var(--r-s);transition:width .6s var(--ease)}
.wbar.on .track i{background:var(--accent)}
.wbar .track b{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:var(--t-22);font-weight:700;color:var(--ink);white-space:nowrap}
.wbar.on .track b{color:var(--on-accent)}

/* ---------------------------------------------------------------- Incoterms */
.inco-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);align-items:start}
.inco-col{display:grid;gap:var(--s-2);min-width:0}
.inco-col .vlab{margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.inco-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inco-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:baseline;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .2s var(--ease)}
.inco-card:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.inco-card b{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;grid-row:span 2}
.inco-card span{font-weight:600;font-size:15px;line-height:1.25}
.inco-card small{font-size:13px;color:var(--ink-3);grid-column:2}
.inco-card[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.inco-card[aria-current="page"] small{color:color-mix(in srgb,var(--paper) 70%,transparent)}
@media (max-width:520px){.inco-card{grid-template-columns:minmax(0,1fr)}.inco-card b{grid-row:auto}.inco-card small{grid-column:1}}
.cs,.cb,.cn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;padding:4px 10px 4px 8px;border-radius:var(--r-xs);white-space:normal;line-height:1.3}
.cs{background:var(--seller-bg);color:var(--seller-ink)}
.cb{background:var(--buyer-bg);color:var(--buyer-ink)}
.cs::before,.cb::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:currentColor}
.cb::before{border-radius:50%}
.cn{color:var(--ink-3);padding-inline:0;font-weight:500}
.matrix td{text-align:left;white-space:normal;vertical-align:top;min-width:96px;padding-inline:12px}
.matrix td:first-child{min-width:150px;padding-left:18px}
.matrix th{padding-inline:12px;white-space:normal}
.matrix th{text-align:left}
.matrix tbody tr:hover{background:transparent}
.matrix tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.keyrow{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4);font-size:var(--t-14);color:var(--ink-2);align-items:center}
.journey{background:var(--stage);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5) var(--s-5) var(--s-4);overflow-x:auto}
.journey svg{display:block;min-width:760px;width:100%;height:auto}
.journey .stn{font:600 12.5px var(--font);fill:var(--ink-2)}
.journey .stn2{font:500 11.5px var(--font);fill:var(--ink-3)}
.journey .bl{font:600 12px var(--font);fill:var(--ink-2)}
.journey .bt{font:700 12px var(--font)}
.journey .rail{stroke:var(--line);stroke-width:3;stroke-linecap:round}
.journey .ico{fill:var(--surface);stroke:var(--ink-2);stroke-width:1.5}
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:760px){.why{grid-template-columns:minmax(0,1fr)}}
.why>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5)}
.why h3{font-size:var(--t-18);font-weight:700;display:flex;gap:10px;align-items:center;margin-bottom:var(--s-3)}
.why h3 svg{width:22px;height:22px;flex:none}
.why ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.why li{color:var(--ink-2);padding-left:20px;position:relative;font-size:var(--t-16)}
.why li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--c-teal)}
.why .no li::before{background:var(--warn);border-radius:50%}
.mistakes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
@media (max-width:860px){.mistakes{grid-template-columns:minmax(0,1fr)}}
.mistakes div{border-top:3px solid var(--warn);padding-top:var(--s-4)}
.mistakes b{display:block;font-size:var(--t-18);margin-bottom:6px;color:var(--ink)}
.mistakes p{margin:0;color:var(--ink-2);font-size:var(--t-16)}
.neigh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:760px){.neigh{grid-template-columns:minmax(0,1fr)}}
.neigh a{display:grid;gap:6px;padding:var(--s-4) var(--s-5);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);text-decoration:none;color:var(--ink);transition:border-color .15s}
.neigh a:hover{border-color:var(--ink-3)}
.neigh a.me{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.neigh a.me span{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.neigh b{font-family:var(--display);font-size:var(--t-28);font-weight:800;line-height:1}
.neigh span{font-size:15px;color:var(--ink-2)}
.neigh .rb{display:flex;height:6px;border-radius:99px;overflow:hidden;margin-top:4px;background:var(--buyer-bg)}
.neigh .rb i{background:var(--seller-ink)}
.tm{font-size:var(--t-14);color:var(--ink-3);margin-top:var(--s-6);max-width:840px;padding-top:var(--s-4);border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- invoice */
.inv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-5);align-items:start;margin-top:var(--s-6)}
@media (max-width:1100px){.inv{grid-template-columns:minmax(0,1fr)}}
.inv .form{gap:var(--s-3)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5)}
.step legend{counter-increment:step;justify-content:flex-start;gap:12px}
.inv .form{counter-reset:step}
.step legend::before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;flex:none}
.items{display:grid;gap:var(--s-3)}
.item{border:1px solid var(--line);background:var(--stage);border-radius:var(--r-s);padding:var(--s-3);display:grid;gap:10px;position:relative}
.item .ihead{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-14);font-weight:700;color:var(--ink-2)}
.item .rm{font:inherit;font-size:13px;font-weight:600;border:0;background:none;color:var(--warn);cursor:pointer;padding:4px 6px}
.item .row4{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.item input{font-size:15px;padding:8px 10px}
.item .field label{font-size:13px}
@media (max-width:520px){.item .row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.privacy-note{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);background:var(--ok-soft);padding:14px 16px;border-radius:var(--r-m)}
.privacy-note svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--ok)}
.privacy-note b{color:var(--ink)}
.preview{position:sticky;top:86px}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3);padding:10px 10px 10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.docs{display:block;max-height:calc(100vh - 170px);overflow:auto;background:var(--surface-2);border-radius:var(--r-l);padding:clamp(12px,2.4vw,28px)}
@media (max-width:1100px){.preview{position:static}.docs{max-height:none}}
.sheet{background:#fff;color:#0B1B33;width:100%;aspect-ratio:210/297;box-shadow:0 1px 2px rgba(11,27,51,.12),0 22px 44px -26px rgba(11,27,51,.45);container-type:inline-size;border-radius:2px}
.sheet+.sheet{margin-top:var(--s-5)}
.sheet .pg{padding:6.2cqw 6cqw 5.4cqw;font-family:var(--font);font-size:1.62cqw;line-height:1.42;color:#0B1B33;height:100%;display:flex;flex-direction:column}
.sheet h2{font-family:var(--display);font-weight:700;font-size:5cqw;letter-spacing:0;line-height:1;margin:0;color:#0B1B33}
.sheet .dhead{display:flex;justify-content:space-between;gap:3cqw;align-items:flex-start;padding-bottom:2.2cqw;margin-bottom:2.4cqw;border-bottom:.3cqw solid #0B1B33;position:relative}
.sheet .dhead::after{content:"";position:absolute;left:0;bottom:-.3cqw;width:9cqw;height:.3cqw;background:#FF5A1F}
.sheet .seller b{font-size:2.15cqw;display:block;margin-bottom:.3cqw}
.sheet .seller{max-width:55%;white-space:pre-line;color:#43536B}
.sheet .dmeta{display:grid;grid-template-columns:auto auto;gap:.3cqw 2cqw;text-align:right;font-size:1.55cqw}
.sheet .dmeta span{color:#6B7A90}
.sheet .parties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;margin-bottom:2.2cqw}
.sheet .parties div{padding-top:.2cqw;white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.sheet .k{display:block;font-size:1.22cqw;font-weight:700;letter-spacing:.04em;color:#6B7A90;margin-bottom:.45cqw}
.sheet .terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#F3F5F8;border-radius:.6cqw;margin-bottom:2.4cqw}
.sheet .terms div{padding:1cqw 1.3cqw;min-width:0;overflow-wrap:anywhere}
.sheet .terms div:nth-child(n+5){border-top:.12cqw solid #D9E0E8}
.sheet table{font-size:1.45cqw;width:100%;border-collapse:collapse}
.sheet th,.sheet td{padding:.8cqw .8cqw;border-bottom:.12cqw solid #E2E7EE;white-space:normal;text-align:right;vertical-align:top;color:#0B1B33}
.sheet th{font-size:1.2cqw;color:#6B7A90;border-bottom:.22cqw solid #0B1B33;background:#fff;font-weight:700;vertical-align:bottom}
.sheet th:first-child,.sheet td:first-child{text-align:left}
.sheet td.desc{text-align:left}
.sheet tfoot td{font-weight:700;white-space:nowrap;border-top:.22cqw solid #0B1B33;border-bottom:0}
.sheet tbody tr:hover{background:none}
.sheet .words{margin-top:1.6cqw;font-weight:700;font-size:1.45cqw;letter-spacing:.02em;padding:1cqw 1.3cqw;background:#F3F5F8;border-left:.4cqw solid #FF5A1F}
.sheet .marks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3cqw;margin-top:2.2cqw;white-space:pre-line}
.sheet .sign{margin-top:auto;display:flex;justify-content:flex-end}
.sheet .sign div{width:40%;border-top:.15cqw solid #0B1B33;padding-top:.8cqw;text-align:center;font-size:1.35cqw;color:#43536B}
.sheet .cert{font-size:1.2cqw;color:#6B7A90;margin-top:1.5cqw}

/* ---------------------------------------------------------------- prose pages */
.prose{max-width:760px}
.prose h2{margin:var(--s-7) 0 var(--s-3);font-size:var(--t-36)}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px}
.prose figure{margin:var(--s-5) 0;background:var(--stage);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5)}
.prose figure svg{display:block;width:100%;height:auto;max-height:240px}
.prose figcaption{font-size:var(--t-14);color:var(--ink-3);margin-top:var(--s-3)}
.prose-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-8);align-items:start;margin-top:var(--s-6)}
@media (max-width:960px){.prose-grid{grid-template-columns:minmax(0,1fr)}}
.aside{position:sticky;top:96px;display:grid;gap:var(--s-3)}
.aside .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-5)}
.aside h3{font-size:var(--t-16);font-weight:700;margin-bottom:var(--s-2)}
.aside p{font-size:15px;color:var(--ink-2);margin:0 0 8px}
.mailcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5);align-items:center;background:var(--ink);color:var(--paper);border-radius:var(--r-l);padding:var(--s-6);margin-top:var(--s-6)}
.mailcard a{color:var(--paper);font-family:var(--display);font-size:var(--t-36);font-weight:700;text-decoration-color:var(--accent)}
.mailcard p{color:color-mix(in srgb,var(--paper) 72%,transparent);margin:6px 0 0}
@media (max-width:700px){.mailcard{grid-template-columns:minmax(0,1fr)}.mailcard a{font-size:26px}}
:root[data-theme="dark"] .mailcard{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mailcard{background:var(--surface-2)}}

/* 404 */
.lost{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);align-items:center;padding-top:var(--s-6)}
@media (max-width:900px){.lost{grid-template-columns:minmax(0,1fr)}}
.lost h1{font-size:var(--t-88)}
.lost .qbox2{display:flex;gap:8px;margin-top:var(--s-6);max-width:480px}
.lost .qbox2 input{flex:1}
svg.iso.lost{max-width:520px;margin-inline:auto;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:clamp(80px,10vw,140px);background:var(--c-navy-d);color:#C8D3E3}
:root[data-theme="dark"] .foot{background:#050C17}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot{background:#050C17}}
.foot .yardband{margin:0;background:var(--paper)}
.foot .yardband .yard{height:clamp(70px,8vw,110px)}
.foot .wrap{padding-block:var(--s-7) var(--s-6)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:var(--s-6)}
@media (max-width:960px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
.foot .brand{color:#fff}
.foot .brand span{color:#FF7A45}
.foot h4{margin:0 0 var(--s-3);font-size:var(--t-14);color:#fff;font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:#B4C1D4;text-decoration:none;font-size:15px}
.foot a:hover{color:#fff;text-decoration:underline;text-decoration-color:#FF7A45}
.foot p{font-size:15px;max-width:42ch;color:#9DABC0;margin-top:var(--s-4)}
.foot .dl-row{margin-top:var(--s-4)}
.foot .dl-row a{background:transparent;border-color:rgba(255,255,255,.18);color:#E4EAF3;font-size:13.5px;padding:4px 11px}
.foot .dl-row a:hover{border-color:rgba(255,255,255,.5)}
.foot .legal{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.12);font-size:var(--t-14);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:#8D9BB1}

/* ---------------------------------------------------------------- search dialog */
dialog.find{border:0;padding:0;background:transparent;width:min(640px,calc(100vw - 32px));margin:12vh auto auto;color:var(--ink)}
dialog.find[open]{animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
dialog.find::backdrop{background:rgba(7,17,31,.45);backdrop-filter:blur(4px)}
.find-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-pop);overflow:hidden}
.qbox{position:relative}
.qbox input{width:100%;font:inherit;font-size:20px;font-weight:500;padding:19px 18px 19px 54px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink)}
.qbox input:focus{box-shadow:none;border-color:var(--line)}
.qbox>svg{position:absolute;left:20px;top:23px;width:20px;height:20px;color:var(--accent)}
.results{list-style:none;margin:0;padding:8px;max-height:min(60vh,440px);overflow:auto}
.results li a{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:var(--r-s);text-decoration:none;color:var(--ink)}
.results li a b{font-weight:600}
.results li a span{color:var(--ink-3);font-size:var(--t-14);text-align:right}
.results li a:hover,.results li a.act{background:var(--accent-soft)}
.results .none{padding:12px 14px;color:var(--ink-3);font-size:15px}
.find-foot{font-size:13px;color:var(--ink-3);padding:10px 18px;border-top:1px solid var(--line-2);background:var(--stage)}

@media (max-width:560px){
  body{font-size:var(--t-16)}
  th,td{padding:11px 12px}
  .row3{gap:8px}
  .inp input{padding-right:32px;padding-left:10px}
  .inp .u{right:9px}
  .panel,.step{padding:var(--s-4)}
  .stage-top{padding:var(--s-4) var(--s-4) 0}
  .stage-foot{padding:var(--s-3) var(--s-4) var(--s-4)}
  .faq details p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- print (invoice generator) */
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  body.printing>*:not(main){display:none!important}
  body.printing main{padding:0}
  body.printing main .wrap{padding:0;max-width:none}
  body.printing .crumbs,body.printing article>*:not(.inv),body.printing .inv>.form,body.printing .preview>.pbar{display:none!important}
  body.printing .inv{display:block;margin:0}
  body.printing .preview{position:static}
  body.printing .docs{display:block;max-height:none;overflow:visible;padding:0;background:none;border-radius:0}
  body.printing .sheet{width:210mm;height:297mm;aspect-ratio:auto;box-shadow:none;break-after:page;page-break-after:always;margin:0;display:block!important;border-radius:0}
  body.printing .sheet:last-child{break-after:auto;page-break-after:auto}
}

/* ---------------------------------------------------------------- hubs and pickers */
.hub{display:grid;gap:0;margin-top:var(--s-7);border-top:1px solid var(--line)}
.hub a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-6);align-items:center;padding:var(--s-6) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.hub figure{background:var(--stage);border:1px solid var(--line);border-radius:var(--r-l);aspect-ratio:16/10;display:grid;place-items:center;padding:var(--s-5);transition:transform .35s var(--ease),border-color .2s}
.hub figure svg{width:100%;height:100%;max-height:200px}
.hub a:hover figure{transform:translateY(-3px);border-color:var(--ink-3)}
.hub h2{font-size:var(--t-36);transition:color .15s}
.hub a:hover h2{color:var(--accent-text)}
.hub p{color:var(--ink-2);margin:var(--s-2) 0 var(--s-4)}
.hub .ex{display:inline-flex;gap:8px;align-items:center;font-size:15px;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.hub .ex b{color:var(--ink)}
@media (min-width:761px){.hub a:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.hub a:nth-child(even) figure{order:2}}
@media (max-width:760px){.hub a{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-5) 0}.hub figure{aspect-ratio:2/1}}
.sizegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-2)}
.sizegrid a{display:grid;gap:2px;padding:var(--s-3) var(--s-3) var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .2s var(--ease)}
.sizegrid a:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.sizegrid a[aria-current="page"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sizegrid svg.iso{height:58px;width:auto;max-width:100%;margin-bottom:6px;justify-self:start}
.sizegrid b{font-size:15px;font-weight:600}
.sizegrid span{font-size:13px;color:var(--ink-3)}
.cpick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-7)}
@media (max-width:960px){.cpick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cpick{grid-template-columns:minmax(0,1fr)}}
.cpick a{display:grid;gap:4px;padding:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .25s var(--ease)}
.cpick a:hover{border-color:var(--ink-3);transform:translateY(-3px)}
.cpick .silw{display:flex;align-items:flex-end;height:64px;margin-bottom:var(--s-3)}
.cpick svg.csil{height:auto;display:block}
.cpick b{font-family:var(--display);font-size:var(--t-36);font-weight:800;line-height:1}
.cpick a>span{color:var(--ink-3);font-size:15px}
.cpick dl{margin:var(--s-3) 0 0;display:grid;gap:6px;border-top:1px solid var(--line-2);padding-top:var(--s-3)}
.cpick dl div{display:flex;justify-content:space-between;gap:8px;font-size:15px}
.cpick dt{color:var(--ink-3)}
.cpick dd{margin:0;font-weight:600}
.ppick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-7)}
@media (max-width:960px){.ppick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.ppick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ppick a{display:grid;gap:2px;padding:var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .25s var(--ease)}
.ppick a:hover{border-color:var(--ink-3);transform:translateY(-3px)}
.ppick figure{height:92px;display:grid;place-items:center;margin-bottom:var(--s-3)}
.ppick figure svg{max-height:92px;width:100%}
.ppick b{font-family:var(--display);font-size:var(--t-28);font-weight:700;line-height:1}
.ppick span{font-size:15px;font-weight:600}
.ppick small{font-size:13px;color:var(--ink-3)}
.ladder{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-3) var(--s-5) var(--s-4)}
.ladder a,.lhead,.laxis{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:center}
.ladder a{padding:7px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2)}
.ladder a:hover b{color:var(--accent-text)}
.ladder b{font-family:var(--display);font-size:var(--t-22);font-weight:800}
.lhead{font-size:var(--t-14);font-weight:600;color:var(--ink-2);padding:var(--s-2) 0}
.lt{display:block;height:12px;border-radius:99px;background:var(--buyer-bg);overflow:hidden}
.lt i{display:block;height:100%;border-radius:99px;background:var(--seller-ink);min-width:4px}
.lt .lc{background:color-mix(in srgb,var(--seller-ink) 65%,var(--c-teal))}
.laxis{font-size:12px;color:var(--ink-3);padding-top:8px}
.laxis span{display:flex;justify-content:space-between}
.laxis em{font-style:normal}
@media (max-width:640px){.ladder a,.lhead,.laxis{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)}.laxis em:nth-child(2){display:none}}
.calc.cbm{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:1060px){.calc.cbm{grid-template-columns:minmax(0,1fr)}}
.calc.cbm>.out:first-child{position:static}
.calc.vs{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:1060px){.calc.vs{grid-template-columns:minmax(0,1fr)}}
.charge{font-family:var(--display);font-weight:800;font-size:var(--t-36);line-height:1.1}
.panel .res .v{font-size:clamp(64px,7vw,96px)}
legend .ctl{gap:6px}
.method>article>h3{font-size:var(--t-22)}

.vs .wbars{padding:0}
.vs .wbar{grid-template-columns:80px minmax(0,1fr)}
.vs .wbar .track{height:36px}
.plate .pad svg.dw[data-draw=cmpcont]{max-width:880px;margin-inline:auto}

/* ---------------------------------------------------------------- hero side cards */
.ph.has-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.ph.has-card>div:first-child{padding-top:var(--s-2)}
.glance{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5);box-shadow:var(--sh-float);min-width:0}
.glance .g-art{background:var(--stage);border-radius:var(--r-m);height:104px;display:grid;place-items:center;padding:12px 16px;margin-bottom:var(--s-4)}
.glance .g-art svg{height:80px;width:auto;max-width:100%}
.g-title{font-size:var(--t-14);font-weight:700;color:var(--ink);margin:0 0 6px}
.glance dl{margin:0;display:grid}
.glance dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2)}
.glance dl div:last-child{border-bottom:0}
.glance dt{font-size:var(--t-14);color:var(--ink-3)}
.glance dd{margin:0;font-size:15px;font-weight:500;color:var(--ink);text-align:right;justify-self:end}
.glance dd a{font-weight:600}
.g-foot{font-size:13px;color:var(--ink-3);margin:var(--s-3) 0 0;padding-top:var(--s-3);border-top:1px solid var(--line-2)}
.quick nav{display:grid;gap:8px;margin-top:6px}
.quick nav a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);text-decoration:none;color:var(--ink);background:var(--stage);transition:border-color .15s,background .15s}
.quick nav a span{font-size:15px;color:var(--ink-2)}
.quick nav a b{font-family:var(--display);font-size:var(--t-22);font-weight:700;white-space:nowrap}
.quick nav a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 40%,var(--surface))}
.quick nav a:hover b{color:var(--accent-text)}
@media (max-width:900px){.ph.has-card{grid-template-columns:minmax(0,1fr)}.ph.has-card .glance{order:0}}
.mailcard{color:var(--paper)}
.mailcard a{color:inherit}
:root[data-theme="dark"] .feature,:root[data-theme="dark"] .mailcard{color:var(--ink)}
:root[data-theme="dark"] .feature h3{color:var(--ink)}
:root[data-theme="dark"] .feature p,:root[data-theme="dark"] .mailcard p{color:var(--ink-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .feature,:root:not([data-theme="light"]) .mailcard{color:var(--ink)}
:root:not([data-theme="light"]) .feature h3{color:var(--ink)}
:root:not([data-theme="light"]) .feature p,:root:not([data-theme="light"]) .mailcard p{color:var(--ink-2)}}