/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: Product Catalogue + Capability Ledger
 * genre: modern-minimal · theme: TongPin Marine · nav: direct product navigation
 * variation: screenshot-led split opening, tabular body, compact delivery desk
 * reference: public Anton Nel site; no source assets or copy reproduced */
:root{
 --color-paper:#f7f9fc;--color-surface:#ffffff;--color-soft:#edf2f7;--color-tint:#e8f0fb;
 --color-ink:#172c42;--color-body:#354b60;--color-muted:#5e7083;--color-rule:#d5dee8;--color-boundary:#8899ac;
 --color-accent:#1d589d;--color-accent-hover:#17477e;--color-focus:#2166b5;--color-accent-ink:#ffffff;
 --color-dark:#0d263f;--color-dark-text:#edf4fc;--color-dark-muted:#b7c7da;
 --color-success:#17683c;--color-error:#ac3030;--color-overlay:#061526c9;--color-shadow:#11294212;--color-clear:transparent;
 --product-header:#0d263f;--product-header-ink:#eef4fb;--product-header-muted:#b5c7db;--product-header-rule:#344c65;
 --product-hero:#102d49;--product-hero-ink:#f4f7fc;--product-hero-muted:#c1cede;--product-hero-rule:#415b75;
 --product-hero-button:#e8f1fc;--product-hero-button-ink:#14395b;--product-footer:#eaf0f6;
 --font-body:"Segoe UI","Microsoft YaHei UI","PingFang SC",Arial,sans-serif;
 --font-display:var(--font-body);--font-mono:var(--font-body);
 --page-max:84rem;--page-gutter:clamp(1rem,3vw,2.5rem);
 --space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;
 --space-xl:3rem;--space-2xl:4rem;--space-3xl:5rem;
 --space-page:clamp(2.75rem,5vw,4.5rem);
 --radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-control:.25rem;
 --text-base:1rem;--text-display:clamp(2rem,3.25vw,2.9rem);
 --product-ease:cubic-bezier(.2,.7,.3,1);
 color-scheme:light;
}
:root[data-theme="dark"]{
 --color-paper:#0f2133;--color-surface:#142a40;--color-soft:#192f45;--color-tint:#213d5c;
 --color-ink:#edf3fa;--color-body:#c9d5e2;--color-muted:#a4b7ca;--color-rule:#354d65;--color-boundary:#70869e;
 --color-accent:#99c7ff;--color-accent-hover:#c1ddff;--color-focus:#aacfff;--color-accent-ink:#102d49;
 --color-success:#a1d6b3;--color-error:#ffb8ae;--product-footer:#0d1d2e;
 color-scheme:dark;
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme]){
  --color-paper:#0f2133;--color-surface:#142a40;--color-soft:#192f45;--color-tint:#213d5c;
  --color-ink:#edf3fa;--color-body:#c9d5e2;--color-muted:#a4b7ca;--color-rule:#354d65;--color-boundary:#70869e;
  --color-accent:#99c7ff;--color-accent-hover:#c1ddff;--color-focus:#aacfff;--color-accent-ink:#102d49;--product-footer:#0d1d2e;
  color-scheme:dark;
 }
}
html,body{overflow-x:clip}
body.product-site{background:var(--color-paper);font-family:var(--font-body);color:var(--color-body);line-height:1.7}
h1,h2,h3,h4{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0}
h2{font-size:clamp(1.45rem,2.4vw,2rem);letter-spacing:-.015em}
h3{font-size:1.05rem;letter-spacing:0}
p{max-width:75ch}
button,a,summary{touch-action:manipulation}
a{transition:color .12s var(--product-ease)}
button{transition:background-color .12s var(--product-ease),border-color .12s var(--product-ease)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.site-header :focus-visible,.product-opening :focus-visible{outline-color:var(--product-hero-button)}
button:active,.btn:active{transform:none;opacity:.82}
button:disabled,[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
button[aria-busy="true"]{cursor:progress}
button[data-state="error"]{outline:2px solid var(--color-error)}
button[data-state="success"]{border-color:var(--color-success)}
[hidden]{display:none!important}
.btn{min-height:2.75rem;padding:.65rem 1rem;border-radius:var(--radius-control);font-size:.88rem;white-space:nowrap;box-shadow:none;line-height:1.2}
.btn:hover{transform:none;box-shadow:none}
.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs)}
.section{padding-block:var(--space-page)}
.section.compact{padding-block:var(--space-lg)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xs);margin-bottom:var(--space-lg);max-width:70rem}
.section-head p{font-size:.95rem;line-height:1.75;color:var(--color-muted)}
.site-header{background:var(--product-header);border-color:var(--product-header-rule);position:relative;z-index:30}
.nav-bar{min-height:4.25rem;display:flex;align-items:center;gap:var(--space-xs)}
.brand{display:flex;align-items:center;gap:var(--space-2xs);font-size:1.05rem;line-height:1;color:var(--product-header-ink)}
.brand img{width:1.75rem;height:1.75rem;flex:none}
.brand-text{display:grid;gap:.3rem}
.brand-sub{display:none;color:var(--product-header-muted);font-size:.68rem;font-weight:400;letter-spacing:0}
.desktop-nav{display:none;align-items:center;gap:var(--space-md);margin-inline:auto}
.desktop-nav .nav-link{min-height:2.75rem;color:var(--product-header-muted);font-size:.86rem;white-space:nowrap;line-height:1}
.desktop-nav .nav-link:hover,.desktop-nav .nav-link[aria-current]{color:var(--product-header-ink);text-decoration:none}
.desktop-nav .nav-link[aria-current]{text-decoration:underline;text-underline-offset:.7rem;text-decoration-thickness:2px}
.nav-actions{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.language-control{display:flex;align-items:center;gap:0;border:1px solid var(--product-header-rule);border-radius:var(--radius-control);padding:.1rem}
.language-control a{color:var(--product-header-muted);font-size:.68rem;padding:.32rem .35rem;line-height:1.2;white-space:nowrap}
.language-control a[aria-current]{background:var(--product-header-rule);color:var(--product-header-ink)}
.language-control a:hover{background:var(--product-header-rule);color:var(--product-header-ink)}
.theme-button,.nav-actions .search-open,.nav-actions .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;min-width:2.1rem;padding:0;border:1px solid var(--product-header-rule);border-radius:var(--radius-control);color:var(--product-header-ink);background:var(--product-header);line-height:1}
.theme-button svg,.nav-actions .search-open svg,.menu-toggle svg{width:1rem;height:1rem}
.theme-button:hover,.nav-actions .search-open:hover,.nav-actions .menu-toggle:hover{background:var(--product-header-rule)}
.nav-actions .search-open{display:none}
.theme-button .theme-moon{display:block}.theme-button .theme-sun{display:none}
[data-theme="dark"] .theme-button .theme-moon{display:none}
[data-theme="dark"] .theme-button .theme-sun{display:block}
.nav-actions .nav-download{display:none;background:var(--product-hero-button);color:var(--product-hero-button-ink);border-color:var(--product-hero-button);min-height:2.25rem;padding:.5rem .8rem;font-size:.8rem}
.mobile-menu{background:var(--product-header);border-color:var(--product-header-rule);padding:var(--space-sm) var(--page-gutter)}
.mobile-menu nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xs)}
.mobile-menu a{display:flex;align-items:center;min-height:2.75rem;padding:.5rem .75rem;color:var(--product-header-ink);white-space:nowrap;border:1px solid var(--product-header-rule);font-size:.86rem;line-height:1.2}
.mobile-menu .search-open{width:100%;background:var(--product-header);color:var(--product-header-ink);border-color:var(--product-header-rule);margin-top:var(--space-xs);font-size:.86rem}
.product-opening{background:var(--product-hero);color:var(--product-hero-ink);padding-block:var(--space-lg)}
.product-opening-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);align-items:center}
.product-opening h1{font-size:var(--text-display);line-height:1.25;color:var(--product-hero-ink);letter-spacing:-.025em;max-width:21ch}
.product-opening .product-intro{font-size:.95rem;line-height:1.85;color:var(--product-hero-muted);margin-top:var(--space-sm);max-width:41ch}
.product-platforms{font-size:.82rem;color:var(--product-hero-muted);margin-bottom:var(--space-sm)}
.product-opening .button-row{margin-top:var(--space-md)}
.product-opening .btn{background:var(--product-hero-button);color:var(--product-hero-button-ink);border:1px solid var(--product-hero-button)}
.product-opening .btn.secondary{background:var(--color-clear);color:var(--product-hero-ink);border-color:var(--product-hero-rule)}
.product-points{display:grid;list-style:none;gap:var(--space-2xs);padding:0;margin-top:var(--space-md);font-size:.82rem;color:var(--product-hero-muted)}
.product-points li{display:flex;align-items:baseline;gap:var(--space-2xs);margin:0}
.product-points li::before{content:"";width:.3rem;height:.3rem;flex:none;border-radius:50%;background:var(--product-hero-muted);align-self:center}
.product-opening .demo-controls{margin:0 0 var(--space-xs);gap:var(--space-2xs)}
.product-opening .demo-controls p{font-size:.7rem;color:var(--product-hero-muted)}
.product-opening .demo-tabs{gap:.25rem}
.product-opening .demo-tabs button{background:var(--color-clear);border:0;border-bottom:2px solid var(--color-clear);border-radius:0;color:var(--product-hero-muted);font-size:.78rem;padding:.4rem .25rem;margin-inline-end:.65rem;line-height:1.4}
.product-opening .demo-tabs button[aria-pressed="true"]{color:var(--product-hero-ink);background:var(--color-clear);border-color:var(--product-hero-ink)}
.product-opening .stage-figure{border:1px solid var(--product-hero-rule);border-radius:var(--radius-sm);box-shadow:none;background:var(--color-surface);overflow:clip}
.product-opening .stage-figure img{width:100%;height:auto;display:block;object-fit:contain}
.product-opening .stage-figure figcaption{background:var(--product-hero);border-color:var(--product-hero-rule);color:var(--product-hero-muted);padding:.65rem .75rem;font-size:.68rem;line-height:1.65}
.product-opening .stage-figure button{width:100%;display:block;border:0;padding:0;background:var(--color-surface)}
.product-rail{background:var(--color-surface);border-bottom:1px solid var(--color-rule)}
.product-rail .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm);padding-block:var(--space-sm)}
.product-rail span{font-size:.8rem;color:var(--color-body);line-height:1.5}
.ledger-head{display:grid;gap:var(--space-sm);align-items:end;margin-bottom:var(--space-md)}
.ledger-head .section-head{margin:0}
.ledger-filter{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}
.ledger-filter button{border:1px solid var(--color-rule);background:var(--color-clear);padding:.45rem .7rem;font-size:.78rem;line-height:1.3;border-radius:var(--radius-control);color:var(--color-body);white-space:nowrap}
.ledger-filter button[aria-pressed="true"]{background:var(--color-tint);color:var(--color-accent);border-color:var(--color-boundary)}
.ledger-filter button:hover{background:var(--color-soft)}
.ledger{width:100%;border-collapse:collapse;background:var(--color-surface);font-size:.88rem;table-layout:fixed}
.ledger caption{text-align:left;padding-bottom:var(--space-xs);color:var(--color-muted);font-size:.75rem}
.ledger thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:clip;white-space:nowrap}
.ledger tbody{display:block}
.ledger tr{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xs);padding:var(--space-sm);border-bottom:1px solid var(--color-rule)}
.ledger td{padding:0;border:0;overflow-wrap:anywhere;min-width:0}
.ledger td:first-child{color:var(--color-ink);font-weight:600}
.ledger td:nth-child(2){font-size:.82rem;color:var(--color-accent)}
.ledger td:nth-child(3){font-size:.82rem;color:var(--color-muted)}
.ledger-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-sm);font-size:.8rem}
.ledger-footer p{font-size:.75rem;color:var(--color-muted)}
.operating-desk{background:var(--color-soft);border-block:1px solid var(--color-rule)}
.operating-desk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.operating-desk h2{margin-bottom:var(--space-xs)}
.desk-intro{font-size:.92rem;color:var(--color-muted);max-width:50ch}
.operation-compact{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);list-style:none;padding:0;margin-top:var(--space-md);counter-reset:desk-step}
.operation-compact li{counter-increment:desk-step;display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:var(--space-xs);align-items:start;margin:0}
.operation-compact li::before{content:counter(desk-step);color:var(--color-muted);font-weight:600;font-size:.8rem;padding-top:.1rem}
.operation-compact strong{color:var(--color-ink);font-size:.92rem}
.operation-compact p{font-size:.83rem;color:var(--color-muted);margin-top:.25rem}
.operation-resources{border-top:1px solid var(--color-rule);padding-top:var(--space-sm)}
.operation-resource{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);border-bottom:1px solid var(--color-rule);padding-block:var(--space-sm);font-size:.9rem;color:var(--color-ink)}
.operation-resource span{font-size:.75rem;color:var(--color-muted)}
.operation-resource:hover{text-decoration:none;color:var(--color-accent)}
.delivery-desk{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.delivery-block h2{margin-bottom:var(--space-xs)}
.delivery-block>p{color:var(--color-muted);font-size:.92rem}
.delivery-block .button-row{margin-top:var(--space-md)}
.delivery-facts{display:grid;gap:0;margin-top:var(--space-md);border-top:1px solid var(--color-rule)}
.delivery-facts>div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);padding-block:.7rem;border-bottom:1px solid var(--color-rule);font-size:.84rem}
.delivery-facts dt{color:var(--color-muted)}
.delivery-facts dd{margin:0;text-align:right;color:var(--color-ink)}
.contact-strip{display:flex;flex-wrap:wrap;gap:.6rem var(--space-md);margin-top:var(--space-md)}
.contact-strip a,.contact-strip button{font-size:.83rem;white-space:nowrap}
.contact-strip button{background:var(--color-clear);border:0;border-bottom:1px solid var(--color-boundary);padding:0;color:var(--color-accent)}
.home-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.home-faq .faq-item summary{font-size:.92rem;min-height:3.25rem;line-height:1.5}
.home-faq .faq-item .answer{font-size:.88rem;line-height:1.8}
.home-faq .section-head a{font-size:.83rem;margin-top:var(--space-sm)}
.page-hero{padding-block:var(--space-lg);background:var(--color-surface);border-bottom:1px solid var(--color-rule)}
.page-hero h1{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.3;max-width:30ch;letter-spacing:-.02em}
.page-hero p{max-width:70ch;font-size:.95rem;line-height:1.8;margin-top:var(--space-sm)}
.breadcrumb{font-size:.75rem;margin-bottom:var(--space-xs)}
.page-subnav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md)}
.page-subnav a{font-size:.78rem;border-radius:var(--radius-control);padding:.4rem .6rem;white-space:nowrap}
.feature-layout{gap:var(--space-lg)}
.feature-filter{padding:var(--space-sm);border-radius:var(--radius-control);background:var(--color-surface);border:1px solid var(--color-rule)}
.feature-filter .filter-buttons{gap:var(--space-2xs)}
.feature-filter button{font-size:.8rem;border-radius:var(--radius-control);line-height:1.3}
.feature-section{padding-block:var(--space-lg);border-bottom:1px solid var(--color-rule)}
.feature-section h2{font-size:1.4rem}
.feature-section .section-head{margin-bottom:var(--space-md)}
.feature-details{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.feature-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xs);padding-block:var(--space-sm);border-bottom:1px solid var(--color-rule);background:var(--color-clear);border-radius:0;box-shadow:none}
.feature-detail:last-child{border-bottom:0}
.feature-detail h3{font-size:.98rem}
.feature-detail p{font-size:.88rem;line-height:1.85}
.material-network-section{padding-block:var(--space-lg)}
.material-network{background:var(--color-surface)}
.material-engine{background:var(--color-tint);box-shadow:none}
.material-network .material-source,.material-network .material-follower{border-radius:var(--radius-control);background:var(--color-surface)}
.material-benefits{gap:0 var(--space-lg)}
.material-benefit{padding-block:var(--space-sm)}
.material-benefit dt{font-size:.98rem}
.material-benefit dd{font-size:.88rem}
.material-flow{gap:var(--space-sm)}
.material-flow li{border-radius:0;box-shadow:none;background:var(--color-clear)}
.product-figure{box-shadow:none;border-radius:var(--radius-control);border-color:var(--color-rule)}
.product-figure .figure-head{padding:.75rem var(--space-sm);background:var(--color-surface)}
.product-figure figcaption{font-size:.76rem;line-height:1.8}
.outline-box,.calculator,.release-panel{border-radius:var(--radius-control);box-shadow:none;border:1px solid var(--color-rule)}
.outline-box{padding:var(--space-md)}
.note{border-inline-start:0;border:1px solid var(--color-rule);padding:var(--space-sm);font-size:.82rem;background:var(--color-soft);border-radius:var(--radius-control)}
.cta-panel{border-radius:var(--radius-control);box-shadow:none;background:var(--color-soft);padding:var(--space-md)}
.cta-panel h2{font-size:1.4rem}
.cta-panel p{font-size:.88rem}
.faq-item summary{font-size:.95rem}
.faq-item .answer{font-size:.88rem}
.release-panel{padding:var(--space-md)}
.release-panel h2{font-size:1.5rem}
.release-meta dt{font-size:.78rem}
.release-meta dd{font-size:.88rem}
.site-footer{background:var(--product-footer);border-top:1px solid var(--color-rule);padding-block:var(--space-lg)}
.footer-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;font-size:.8rem}
.footer-line strong{font-size:.9rem;color:var(--color-ink)}
.footer-links{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}
.footer-links a{white-space:nowrap;font-size:.78rem}
.footer-notice{font-size:.72rem;max-width:100ch;line-height:1.8;margin-top:var(--space-sm)}
.product-site dialog{border-radius:var(--radius-md);border-color:var(--color-boundary)}
.product-site .image-dialog{background:var(--color-surface)}
.product-site .image-dialog img{height:auto}
@media(min-width:26rem){
 .nav-actions .search-open{display:inline-flex}
}
@media(min-width:40rem){
 .nav-actions .nav-download{display:inline-flex}
 .product-rail .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
 .operating-desk-grid,.delivery-desk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl)}
 .delivery-block+.delivery-block{border-inline-start:1px solid var(--color-rule);padding-inline-start:var(--space-xl)}
 .operation-resources{padding-top:0;border-top:0}
 .feature-detail{grid-template-columns:minmax(0,.72fr) minmax(0,1.55fr);gap:var(--space-md)}
 .ledger thead{position:static;clip-path:none;overflow:visible;white-space:normal;width:auto;height:auto}
 .ledger thead tr{display:table-row}
 .ledger tbody{display:table-row-group}
 .ledger tr{display:table-row;padding:0}
 .ledger th,.ledger td{display:table-cell;padding:.85rem var(--space-sm);text-align:left;vertical-align:top;border-bottom:1px solid var(--color-rule)}
 .ledger th{font-size:.78rem;font-weight:600;color:var(--color-muted);background:var(--color-soft)}
 .ledger th:first-child{width:23%}.ledger th:nth-child(2){width:29%}.ledger th:nth-child(3){width:48%}
 .ledger td:nth-child(2),.ledger td:nth-child(3){font-size:.85rem}
 .ledger-head{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-lg)}
 .home-faq{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--space-xl)}
 .product-opening{padding-block:var(--space-xl)}
}
@media(min-width:64rem){
 .brand-sub{display:block}
 .desktop-nav{display:flex}
 .nav-actions .menu-toggle{display:none}
 .nav-bar{gap:var(--space-md)}
 .nav-actions{margin-inline-start:0}
 .product-opening-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);gap:var(--space-xl)}
 .product-opening{padding-block:var(--space-xl)}
 .product-opening h1{max-width:19ch}
 .product-opening .product-intro{max-width:39ch}
 .feature-layout{grid-template-columns:12.5rem minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
@media print{
 .product-opening{background:var(--color-surface);color:var(--color-ink)}
 .product-opening h1,.product-opening p{color:var(--color-ink)}
 .site-header,.site-footer,dialog,.ledger-filter{display:none}
}