/* WHITE TRUFFLE TECH — editable design tokens.
   Change these variables to recolor every page. No framework or CDN required. */
:root {
  --ivory:#f7f6f2;
  --paper:#fdfcf9;
  --forest:#173e35;
  --forest-dark:#102e27;
  --ink:#1c2924;
  --muted:#5d695e;
  --sage:#dfe4d7;
  --sage-light:#ebeee5;
  --line:#d5d9ce;
  --gold:#ac9e79;
  --serif:"Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
  --sans:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  --radius:8px;
  --max:1320px;
  --shadow:0 22px 55px #24382c12}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:115px}
body {
  margin:0;
  color:var(--ink);
  background:var(--ivory);
  font:15px/1.8 var(--sans);
  -webkit-font-smoothing:antialiased}
button,input,select,textarea {
  font:inherit}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
a {
  color:inherit;
  text-decoration:none}
img {
  display:block;
  max-width:100%}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-weight:500}
h1,h2 {
  font-family:var(--serif)}
button {
  color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #7e956c;
  outline-offset:5px}
::selection {
  background:#d3dfcc}
.container {
  width:min(var(--max),calc(100% - 104px));
  margin-inline:auto}
.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  background:var(--forest);
  color:white;
  padding:12px;
  z-index:100}
.skip-link:focus {
  top:12px}
.eyebrow {
  display:block;
  font:11px/1.5 var(--sans);
  letter-spacing:.22em;
  color:var(--forest);
  margin-bottom:22px}
.eyebrow.light {
  color:#c6d4c7}
.title-dot {
  color:#78937b}
h2 {
  font-size:34px;
  line-height:1.6;
  letter-spacing:-.03em}
p {
  color:var(--muted)}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:50px;
  padding:11px 27px;
  border:1px solid var(--forest);
  border-radius:4px;
  color:var(--paper);
  background:var(--forest);
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s,transform .2s}
.button:hover {
  background:var(--forest-dark);
  transform:translateY(-2px)}
.button span {
  font-size:22px;
  line-height:1}
.button.outline {
  background:transparent;
  color:var(--forest)}
.button.outline:hover {
  background:var(--sage-light)}
.button.cream {
  background:var(--ivory);
  color:var(--forest);
  border-color:var(--ivory)}
.button.small {
  min-height:40px;
  padding:8px 21px;
  font-size:13px}
.actions {
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:30px}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding:7px 0;
  border-bottom:1px solid #8f9b8b;
  font-size:14px;
  transition:gap .2s}
.text-link:hover {
  gap:35px}
.text-link span {
  font-size:24px;
  line-height:1}
.design-note {
  font-size:11px;
  color:#7d8478;
  line-height:1.8;
  margin-top:20px}
.mini-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#597c60;
  border-radius:50%;
  margin-right:7px}
.mobile-break {
  display:none}

/* Header and keyboard-accessible product dropdown. */
.site-header {
  background:#f7f6f2f5;
  border-bottom:1px solid #d9ddd2;
  position:relative;
  z-index:20}
.nav-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:94px;
  gap:24px}
.brand {
  display:flex;
  gap:13px;
  align-items:center;
  flex-shrink:0}
.brand>span {
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.13em;
  line-height:1.5}
.brand small {
  display:block;
  font:8px/1.8 var(--sans);
  letter-spacing:.22em}
.main-nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px}
.main-nav>a:not(.button),.dropdown-toggle {
  position:relative;
  padding:10px 0}
.main-nav>a[aria-current]:after,.dropdown-toggle.active:after {
  content:"";
  position:absolute;
  bottom:2px;
  left:0;
  right:0;
  height:2px;
  background:var(--forest)}
.main-nav>a:hover,.dropdown-toggle:hover {
  color:#608265}
.nav-products {
  position:relative}
.dropdown-toggle {
  border:0;
  background:transparent;
  font-size:13px}
.dropdown-toggle span {
  font-size:16px;
  margin-left:5px}
.dropdown {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:-26px;
  width:330px;
  padding:10px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:6px}
.nav-products.is-open .dropdown {
  display:block}
.dropdown a {
  display:block;
  padding:14px 16px;
  font-size:14px}
.dropdown a+a {
  border-top:1px solid var(--line)}
.dropdown a:hover {
  background:var(--sage-light)}
.dropdown small {
  display:block;
  font-size:9px;
  color:var(--muted);
  letter-spacing:.13em;
  margin-bottom:5px}
.main-nav .nav-demo {
  margin-left:30px}
.menu-toggle {
  display:none}

/* Homepage: typography stays real HTML;
   hero art is vector-only. */
.home-hero {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  min-height:630px;
  align-items:center;
  position:relative}
.home-hero .hero-copy {
  padding:60px 0 50px;
  z-index:1}
.home-hero h1 {
  font-size:67px;
  line-height:1.43;
  letter-spacing:-.055em;
  font-weight:500;
  white-space:nowrap}
.hero-lead {
  font-size:19px;
  line-height:1.8;
  color:#3d5146;
  margin-top:19px}
.hero-description {
  font-size:14px;
  line-height:1.9;
  margin-top:19px}
.hero-caption {
  font:8px/1.6 var(--sans);
  letter-spacing:.19em;
  color:#81917e;
  margin-top:45px;
  display:flex;
  align-items:center;
  gap:12px}
.hero-caption span {
  height:1px;
  width:36px;
  background:#96a48f}
.world-visual {
  margin-right:-38px;
  margin-left:-35px;
  position:relative;
  align-self:center}
.world-visual>img {
  width:100%;
  height:auto}
.visual-label {
  position:absolute;
  bottom:29px;
  right:55px;
  font-size:10px;
  letter-spacing:.08em;
  color:#687d69}
.products-section {
  padding:45px 0 64px;
  border-top:1px solid #bfc7b9}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:28px;
  gap:30px}
.section-heading .eyebrow {
  margin-bottom:12px}
.section-heading>p {
  font-size:13px;
  margin-bottom:6px;
  white-space:nowrap}
.product-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px}
.product-card {
  position:relative;
  display:grid;
  grid-template-columns:.97fr 1.03fr;
  background:#eeeee5;
  border:1px solid #e2e3d9;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:330px}
.product-card-copy {
  padding:32px 0 28px 29px;
  position:relative;
  z-index:2}
.product-number {
  display:flex;
  align-items:center;
  gap:10px;
  font:8px/1.4 var(--sans);
  letter-spacing:.08em;
  color:#7d8c79;
  margin-bottom:29px}
.product-number:first-letter {
  font-size:14px}
.product-number i {
  display:inline-block;
  width:22px;
  height:1px;
  background:#a9b19f}
.product-card h3 {
  font:23px/1.65 var(--serif);
  letter-spacing:-.04em}
.product-card p {
  font-size:11px;
  line-height:1.9;
  margin:17px 0 26px}
.product-card .text-link {
  font-size:12px;
  gap:16px}
.product-preview {
  position:relative;
  overflow:hidden}
.product-preview .app-window {
  width:430px;
  position:absolute;
  top:61px;
  left:17px;
  transform:rotate(-2deg);
  transform-origin:top left;
  box-shadow:0 13px 30px #314b3420}
.product-preview .app-window .window-bar {
  font-size:10px;
  height:29px}
.product-preview .app-sidebar {
  width:79px;
  flex-shrink:0;
  padding:14px 8px}
.product-preview .app-sidebar span {
  font-size:7px;
  padding:9px 4px}
.product-preview .app-sidebar>small {
  display:none}
.product-preview .app-main {
  padding:17px 15px}
.product-preview .app-heading h3 {
  font-family:var(--sans);
  font-size:12px}
.product-preview .app-heading small {
  font-size:6px}
.product-preview .status-tag {
  font-size:6px;
  padding:2px 5px}
.product-preview .app-steps {
  margin:17px 0 11px}
.product-preview .app-steps span {
  font-size:7px}
.product-preview .app-steps i {
  width:16px;
  height:16px;
  font-size:7px}
.product-preview .app-port {
  height:92px}
.product-preview .app-data small {
  font-size:6px}
.product-preview .app-data strong {
  font-size:7px}
.product-preview .app-data {
  margin-top:8px;
  padding:9px}
.product-preview .form-preview {
  gap:5px;
  margin-top:14px}
.product-preview .form-preview small {
  font-size:6px}
.product-preview .form-preview span {
  font-size:7px;
  padding:5px}
.product-preview .app-tabs {
  font-size:7px;
  margin-top:13px}
.product-preview .app-table {
  font-size:8px;
  margin:8px 0}
.product-preview .app-table dt,.product-preview .app-table dd {
  padding:6px}
.product-preview .app-action {
  font-size:8px;
  min-height:28px;
  padding:4px 12px}
.philosophy {
  padding:65px 0 80px;
  display:grid;
  grid-template-columns:.7fr 2fr 1.2fr;
  gap:55px;
  border-top:1px solid var(--line)}
.section-index {
  font-size:9px;
  letter-spacing:.14em;
  color:#7c8b75;
  padding-top:14px}
.philosophy h2 {
  font-size:29px}
.philosophy>div>p {
  max-width:490px;
  margin:19px 0 25px;
  font-size:13px}
.principles>div {
  position:relative;
  padding:0 0 20px 42px}
.principles>div+div {
  padding-top:17px;
  border-top:1px solid var(--line)}
.principles span {
  position:absolute;
  left:0;
  top:6px;
  color:#9aa58e;
  font:13px var(--serif)}
.principles>div+div span {
  top:22px}
.principles h3 {
  font-family:var(--serif);
  font-size:18px;
  margin-bottom:5px}
.principles p {
  font-size:11px}
.about-section {
  background:var(--sage-light);
  padding:78px 0}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px}
.about-grid h2 {
  font-size:39px}
.about-grid>div:last-child {
  padding-top:15px}
.about-lead {
  font-size:19px;
  line-height:1.9;
  color:#334e3e}
.about-lead+p {
  font-size:13px;
  line-height:2.1;
  margin-top:20px}
.about-signature {
  display:flex;
  gap:17px;
  align-items:center;
  margin-top:30px}
.about-signature span {
  font:13px/1.8 var(--serif);
  letter-spacing:.12em}

/* Shared editable software mockups. They are illustrative and not real systems. */
.app-window {
  background:#fcfcf8;
  border:1px solid #d7dbcf;
  border-radius:9px;
  box-shadow:var(--shadow);
  overflow:hidden}
.window-bar {
  height:40px;
  background:linear-gradient(#f0f1e9,#e6e8df);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  font-size:11px;
  gap:15px;
  border-bottom:1px solid #daddd1;
  color:#52614f}
.window-dots {
  display:flex;
  gap:5px}
.window-dots i {
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c2b9a0}
.window-dots i:first-child {
  background:#c8917c}
.window-dots i:last-child {
  background:#849e7a}
.window-bar>small {
  font-size:8px;
  color:#88927d}
.app-layout {
  display:flex}
.app-sidebar {
  width:118px;
  background:var(--forest);
  color:#f3f3e7;
  display:flex;
  flex-direction:column;
  padding:19px 11px 15px;
  gap:2px;
  flex-shrink:0}
.app-sidebar>img {
  filter:brightness(0) invert(1);
  opacity:.8;
  margin:0 0 24px 7px}
.app-sidebar span {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 6px;
  border-radius:3px;
  white-space:nowrap}
.app-sidebar span.selected {
  background:#476b57}
.app-sidebar i {
  font-style:normal;
  opacity:.7}
.app-sidebar>small {
  font-size:5px;
  letter-spacing:.15em;
  margin:auto 5px 0;
  padding-top:35px;
  color:#9bae96}
.app-main {
  min-width:0;
  flex:1;
  padding:24px}
.app-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px}
.app-heading h3 {
  font:17px/1.6 var(--serif);
  margin-top:6px}
.app-heading small {
  font-size:8px;
  letter-spacing:.07em;
  color:#88917e}
.status-tag {
  background:#e6eddf;
  border-radius:3px;
  padding:3px 8px;
  font-size:9px;
  color:#4e7651;
  white-space:nowrap}
.app-steps {
  display:flex;
  justify-content:space-between;
  margin:26px 0 20px;
  gap:3px}
.app-steps span {
  position:relative;
  flex:1;
  text-align:center;
  font-size:9px;
  color:#8e9988}
.app-steps span:before {
  content:"";
  height:1px;
  position:absolute;
  top:10px;
  left:-50%;
  width:100%;
  background:#cad2c3}
.app-steps span:first-child:before {
  display:none}
.app-steps i {
  position:relative;
  z-index:1;
  font-style:normal;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1px solid #c4cdbd;
  background:#f4f6ee;
  border-radius:50%;
  margin:0 auto 7px;
  font-size:9px}
.app-steps .done i {
  background:#3e6951;
  color:#fff;
  border-color:#3e6951}
.app-steps .current {
  color:var(--forest)}
.app-steps .current i {
  border-color:var(--forest);
  box-shadow:0 0 0 3px #edf0e7}
.app-port {
  height:145px;
  overflow:hidden;
  border-radius:3px}
.app-port img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 51%}
.app-data {
  display:grid;
  grid-template-columns:1.1fr 1.2fr 1fr;
  gap:6px;
  margin-top:15px;
  padding:12px;
  background:#f0f3e9}
.app-data small {
  display:block;
  font-size:8px;
  color:#84917d}
.app-data strong {
  display:block;
  font-size:9px;
  font-weight:400;
  color:#425540;
  margin-top:4px;
  white-space:nowrap}
.form-preview {
  display:grid;
  grid-template-columns:1.2fr 1fr .8fr;
  gap:8px;
  margin-top:26px}
.form-preview small {
  display:block;
  font-size:9px;
  color:#798475;
  margin-bottom:5px}
.form-preview span {
  display:block;
  border:1px solid #e2e5db;
  border-radius:3px;
  padding:8px;
  font-size:10px;
  color:#697863;
  white-space:nowrap}
.form-preview b {
  float:right;
  font-weight:400}
.app-tabs {
  display:flex;
  gap:18px;
  font-size:10px;
  color:#7b8773;
  margin-top:24px;
  border-bottom:1px solid #e0e4d8}
.app-tabs>span {
  padding:5px 0 9px}
.app-tabs>span.selected {
  color:var(--forest);
  border-bottom:2px solid var(--forest)}
.app-table {
  margin:16px 0 21px;
  border:1px solid #e0e5d8;
  border-radius:3px;
  font-size:10px}
.app-table>div {
  display:grid;
  grid-template-columns:36% 64%}
.app-table>div+div {
  border-top:1px solid #e0e5d8}
.app-table dt,.app-table dd {
  padding:9px 11px;
  margin:0;
  color:#65745f}
.app-table dt {
  background:#f3f5ee;
  border-right:1px solid #e0e5d8}
.app-action {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  background:var(--forest);
  color:white;
  gap:20px;
  font-size:10px;
  min-height:35px;
  padding:7px 17px;
  border-radius:3px}
.app-action>span {
  font-size:16px}
.app-table .mini-dot {
  width:5px;
  height:5px}
.interface-caption {
  display:block;
  text-align:center;
  font-size:10px;
  color:#7c8876;
  margin-top:17px;
  letter-spacing:.05em}

/* Product pages. */
.breadcrumb {
  font-size:11px;
  color:#88917e;
  padding-top:29px;
  display:flex;
  gap:15px}
.breadcrumb a:hover {
  text-decoration:underline}
.product-hero {
  display:grid;
  grid-template-columns:1fr 1.12fr;
  align-items:center;
  gap:25px;
  min-height:590px;
  padding:38px 0 52px}
.product-hero h1 {
  font-size:52px;
  line-height:1.55;
  letter-spacing:-.055em;
  white-space:nowrap}
.product-hero .eyebrow {
  font-size:9px;
  margin-bottom:24px;
  letter-spacing:.15em}
.hero-subtitle {
  font-size:21px;
  line-height:1.7;
  color:#335445;
  margin-top:21px;
  letter-spacing:0}
.product-hero .hero-description {
  font-size:13px;
  margin-top:18px}
.topic-tags {
  display:flex;
  gap:10px;
  margin-top:29px}
.topic-tags>span {
  background:#e8ebdf;
  padding:5px 15px;
  border-radius:100px;
  font-size:11px;
  color:#52694d}
.freight-visual {
  position:relative;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:75px}
.visual-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  letter-spacing:.15em;
  color:#7d8f77;
  margin-bottom:20px}
.port-hero {
  width:100%;
  height:auto;
  border-radius:90px 6px 6px 6px}
.shipment-card {
  position:absolute;
  bottom:15px;
  right:19px;
  left:80px;
  background:#fafbf5ee;
  border:1px solid #dce1d3;
  padding:23px 26px;
  box-shadow:0 20px 35px #233e2520;
  border-radius:6px}
.shipment-card>div:first-child {
  font-size:9px;
  color:#74856b}
.shipment-no {
  float:right;
  color:#929b88;
  font-size:8px}
.shipment-card h3 {
  font-family:var(--serif);
  font-size:19px;
  margin:9px 0 18px}
.shipment-route {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px}
.shipment-route strong {
  font-size:17px;
  font-weight:500;
  line-height:1.7}
.shipment-route strong small {
  display:block;
  font-size:7px;
  letter-spacing:.1em;
  font-weight:400;
  color:#88917c}
.shipment-route>span {
  font-size:10px;
  color:#a7b49c;
  white-space:nowrap}
.shipment-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:17px;
  padding-top:12px;
  border-top:1px solid #dfe3d7;
  font-size:9px;
  color:#7e8a75}
.workflow {
  display:flex;
  list-style:none;
  gap:15px;
  margin:0;
  padding:24px 0;
  border-block:1px solid #bfc8b8}
.workflow li {
  flex:1;
  display:flex;
  align-items:center;
  gap:19px}
.workflow li>span {
  font:18px var(--serif);
  width:47px;
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #a7b39e;
  border-radius:50%;
  flex-shrink:0}
.workflow strong {
  font:19px var(--serif);
  white-space:nowrap}
.workflow b {
  font:20px var(--serif);
  font-weight:400;
  color:#97a18d;
  margin-left:auto;
  margin-right:15px}
.workflow li:last-child b {
  display:none}
.features-section {
  padding:65px 0 75px}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  padding-top:15px}
.feature {
  position:relative;
  border-left:1px solid var(--line);
  padding-left:30px;
  display:grid;
  grid-template-columns:55px 1fr;
  gap:0 18px}
.feature:first-child {
  border:0;
  padding-left:0}
.icon-wrap {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e5e9de;
  border-radius:50%;
  height:58px;
  width:58px;
  color:var(--forest)}
.feature .icon-wrap {
  grid-row:1/3}
.feature h3 {
  font-family:var(--serif);
  font-size:21px;
  margin:1px 0 10px}
.feature p {
  font-size:12px;
  line-height:1.9}
.product-showcase {
  background:#e9ede3;
  padding:80px 0}
.showcase-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:85px;
  align-items:center}
.showcase-copy h2 {
  font-size:38px}
.showcase-copy>p {
  font-size:13px;
  line-height:1.9;
  margin-top:19px;
  max-width:330px}
.stage-switch {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  max-width:330px;
  margin-top:30px}
.stage-switch button {
  font-size:13px;
  background:none;
  border:0;
  border-bottom:1px solid #ccd5c3;
  padding:13px 0;
  text-align:left;
  color:#78856d;
  position:relative}
.stage-switch button.selected {
  color:var(--forest);
  font-weight:500}
.stage-switch button.selected:after {
  content:"→";
  position:absolute;
  right:0;
  font-size:20px;
  top:7px}
.showcase-copy .stage-description {
  font-size:11px;
  min-height:62px;
  color:#78886d;
  margin-top:16px}
.next-product {
  padding:62px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px}
.next-product h2 {
  font-size:29px}
.next-product p {
  font-size:12px;
  margin-top:10px}
.next-product .eyebrow {
  margin-bottom:14px}
.next-product .text-link {
  font-size:12px}

/* Single-window layered mock UI: DOM panels, editable invoice vectors. */
.single-hero {
  grid-template-columns:.92fr 1.08fr;
  gap:35px;
  min-height:650px}
.single-hero h1 {
  font-size:49px;
  line-height:1.48}
.single-hero .hero-subtitle {
  font-size:19px}
.single-hero .actions {
  gap:10px}
.single-hero .button {
  font-size:12px;
  padding-inline:21px}
.single-visual {
  position:relative;
  padding:40px 0 45px;
  margin-right:10px}
.single-visual>.app-window {
  position:relative;
  z-index:2;
  transform:rotate(-1deg);
  margin-left:-7px;
  width:100%}
.single-visual .app-sidebar {
  width:100px}
.single-visual .app-main {
  padding:23px 20px}
.single-visual .app-heading h3 {
  font-size:16px}
.paper-backdrop {
  position:absolute;
  inset:10px -15px 10px 25px;
  background:#c9d1bb;
  transform:rotate(-7deg);
  border-radius:4px;
  opacity:.65}
.invoice-sheet {
  position:absolute;
  width:155px;
  height:207px;
  right:-27px;
  top:0;
  background:#fffef7;
  box-shadow:0 15px 25px #2b3a2524;
  z-index:3;
  transform:rotate(6deg);
  padding:20px 17px;
  border-radius:2px}
.invoice-sheet>span {
  display:block;
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.1em}
.invoice-sheet>small {
  display:block;
  font-size:5px;
  letter-spacing:.13em;
  margin-top:5px}
.invoice-lines {
  margin:19px 0 13px}
.invoice-lines i {
  display:block;
  height:3px;
  background:#dbded2;
  width:53%;
  margin:6px 0}
.invoice-lines i:last-child {
  width:35%}
.invoice-grid {
  height:58px;
  border:1px solid #d4dacb;
  background:repeating-linear-gradient(0deg,transparent,transparent 10px,#d4dacb 11px,#d4dacb 12px),repeating-linear-gradient(90deg,transparent,transparent 28px,#d4dacb 29px,#d4dacb 30px)}
.invoice-sheet small.invoice-note {
  font-size:6px;
  color:#8d957f;
  letter-spacing:0;
  margin-top:12px}
.receipt-card {
  position:absolute;
  z-index:4;
  right:-12px;
  bottom:12px;
  background:#fffef8;
  border:1px solid #e0e4d6;
  border-radius:5px;
  padding:18px 23px;
  display:flex;
  gap:13px;
  align-items:center;
  box-shadow:0 12px 30px #263d2420}
.receipt-card>span {
  width:35px;
  height:35px;
  background:#dfe9d5;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  color:#4f734b}
.receipt-card strong {
  display:block;
  font-size:13px;
  font-weight:500}
.receipt-card small {
  display:block;
  font-size:9px;
  color:#929b87;
  margin-top:4px}
.learning-section {
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:65px;
  padding:65px 0 80px;
  border-block:1px solid var(--line)}
.learning-intro>p {
  font-size:13px;
  margin-top:18px;
  max-width:330px}
.learning-intro>p.design-note {
  font-size:10px}
.document-flow {
  display:flex;
  gap:17px;
  align-items:center}
.document-flow article {
  flex:1;
  text-align:center;
  position:relative;
  padding:25px 7px;
  background:#ecefe5;
  border-top:2px solid #9cae91}
.document-flow article>svg {
  display:block;
  margin:0 auto 21px}
.flow-number {
  font:11px var(--serif);
  display:block;
  color:#a1ad95;
  margin-bottom:22px}
.document-flow h3 {
  font:20px var(--serif);
  margin-bottom:15px}
.document-flow p {
  font-size:10px;
  line-height:2}
.document-flow>b {
  font:20px var(--serif);
  color:#8e9d83;
  font-weight:400}

/* Teaching solution page: two linked products, never an implied integration. */
.solutions-hero {
  padding:55px 0 0}
.solutions-title {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
  margin-bottom:43px}
.solutions-title h1 {
  font-size:53px;
  line-height:1.5;
  letter-spacing:-.04em}
.solutions-title>div {
  padding-right:75px}
.solutions-title p {
  font-size:20px;
  line-height:1.9;
  color:#4b6350;
  margin-bottom:23px}
.solution-canvas {
  background:#e5e9dd;
  position:relative;
  padding:24px 37px 20px;
  border:1px solid #d6decb;
  border-radius:7px}
.canvas-label {
  font-size:11px;
  letter-spacing:.07em;
  margin-bottom:16px}
.canvas-label>small {
  float:right;
  font-size:9px;
  color:#8b9681}
.solution-apps {
  display:grid;
  grid-template-columns:1fr 55px 1fr;
  gap:0;
  align-items:center}
.solution-app-title {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#496444;
  margin:0 0 11px}
.solution-app-title>a {
  font-size:24px;
  line-height:1}
.solution-apps .app-sidebar {
  width:95px}
.solution-apps .app-main {
  padding:20px}
.solution-apps .app-heading h3 {
  font-size:15px}
.solution-apps .app-port {
  height:117px}
.solution-apps .app-table {
  margin-bottom:16px}
.solution-apps .app-table dt,.solution-apps .app-table dd {
  padding:8px}
.solution-apps .form-preview {
  margin-top:20px}
.solution-apps .app-action {
  min-height:30px}
.solution-apps .app-layout {
  min-height:355px}
.solution-apps .app-data {
  margin-top:16px}
.connector {
  text-align:center;
  font-size:29px;
  line-height:1.6;
  color:#79926c}
.connector>span {
  display:block;
  font-size:9px;
  letter-spacing:.15em;
  line-height:1.7}
.canvas-footnote {
  text-align:center;
  font-size:9px;
  color:#818e77;
  margin-top:19px}
.solution-journey {
  padding:65px 0}
.journey-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:25px;
  margin-top:40px}
.journey-grid article {
  position:relative;
  border-right:1px solid var(--line);
  padding-right:22px}
.journey-grid article:last-child {
  border-right:0}
.journey-number {
  position:absolute;
  right:22px;
  top:10px;
  font:13px var(--serif);
  color:#8a9a7d}
.journey-grid .icon-wrap {
  height:56px;
  width:56px;
  margin-bottom:20px}
.journey-grid h3 {
  font:21px/1.6 var(--serif);
  margin-bottom:10px}
.journey-grid p {
  font-size:11px;
  line-height:1.9}
.teaching-section {
  background:#ebeee5;
  padding:75px 0}
.teaching-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:start}
.teaching-grid>div>p {
  max-width:380px;
  font-size:13px;
  line-height:2;
  margin-top:20px}
.teaching-grid>div>p.design-note {
  font-size:10px}
.teaching-options {
  border-top:1px solid #bcc8b0}
.teaching-options details {
  border-bottom:1px solid #bcc8b0}
.teaching-options summary {
  list-style:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:22px;
  display:flex;
  gap:24px;
  align-items:center;
  padding:20px 0}
.teaching-options summary::-webkit-details-marker {
  display:none}
.teaching-options summary>span {
  font-size:12px;
  font-family:var(--sans);
  color:#8b9b7e}
.teaching-options summary>b {
  font-weight:300;
  margin-left:auto;
  font-family:var(--sans);
  color:#617c54}
.teaching-options details[open] summary>b {
  transform:rotate(45deg)}
.teaching-options details>p {
  font-size:12px;
  margin:0 25px 24px 41px;
  line-height:2}
.solution-bottom {
  padding:65px 0 80px;
  text-align:center}
.solution-bottom h2 {
  font-size:35px}
.solution-bottom p {
  margin-top:19px;
  font-size:13px;
  line-height:2}

/* Footer and local-only inquiry dialog. */
.contact-band {
  position:relative;
  background:var(--forest);
  color:var(--ivory);
  overflow:hidden}
.contact-band:after {
  content:"";
  position:absolute;
  inset:-160px -50px -250px 40%;
  background:repeating-radial-gradient(ellipse at 60% 60%,transparent 0,transparent 20px,#b6c8a710 21px,#b6c8a710 22px);
  transform:rotate(-15deg);
  pointer-events:none}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:46px 0;
  position:relative;
  z-index:1}
.contact-inner .eyebrow {
  font-size:8px;
  margin-bottom:12px}
.contact-inner h2 {
  font-size:30px;
  letter-spacing:0}
.contact-inner .button {
  font-size:13px}
.site-footer {
  padding:36px 0 22px}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding-bottom:30px}
.footer-top .brand>span {
  font-size:19px}
.footer-top .brand small {
  font-size:6px}
.footer-top>p {
  font:14px var(--serif);
  letter-spacing:.13em}
.back-top {
  font-size:10px;
  color:#7d8c72}
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:17px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  color:#8b9480}
.demo-dialog {
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px;
  width:min(540px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  background:var(--ivory);
  color:var(--ink);
  box-shadow:0 20px 100px #142d2940;
  overflow:auto}
.demo-dialog::backdrop {
  background:#102c2580;
  backdrop-filter:blur(3px)}
.demo-dialog h2 {
  font-size:28px}
.dialog-close {
  position:absolute;
  right:15px;
  top:12px;
  border:0;
  background:transparent;
  font-size:26px;
  color:#63745a;
  width:38px;
  height:38px}
.dialog-intro {
  font-size:12px;
  margin:12px 0 22px;
  line-height:1.9}
.demo-form label {
  display:block;
  font-size:12px;
  margin:15px 0 5px}
.demo-form input,.demo-form select,.demo-form textarea {
  display:block;
  width:100%;
  padding:11px 12px;
  background:#fffef9;
  border:1px solid #cdd5c4;
  border-radius:4px;
  font-size:13px;
  color:var(--ink)}
.demo-form textarea {
  resize:vertical;
  min-height:88px}
.demo-form .button {
  margin-top:22px;
  width:100%}
.dialog-privacy {
  font-size:10px;
  color:#7f8b74;
  margin-top:12px}
.inquiry-result {
  margin-top:20px;
  padding:16px;
  background:#e7eddf;
  border:1px solid #cbd8c0;
  border-radius:5px}
.inquiry-result[hidden] {
  display:none}
.inquiry-result>p {
  font-size:11px;
  color:#53684a;
  margin:0 0 9px}
.inquiry-result textarea {
  font:11px/1.9 var(--sans);
  width:100%;
  min-height:160px;
  border:1px solid #c9d5bd;
  border-radius:3px;
  background:#fcfdf7;
  padding:10px;
  resize:vertical}
.copy-status {
  font-size:11px;
  color:var(--forest);
  margin-top:8px;
  min-height:20px}
body.modal-open {
  overflow:hidden}

/* Laptop: preserve breathing room while reducing editorial type. */
@media(max-width:1200px) {
  .container {
  width:calc(100% - 72px)}
.main-nav {
  gap:24px}
.main-nav .nav-demo {
  margin-left:6px}
.home-hero {
  min-height:570px}
.home-hero h1 {
  font-size:57px}
.world-visual {
  margin-right:-20px}
.product-card h3 {
  font-size:20px}
.product-card-copy {
  padding-left:24px}
.product-number {
  font-size:7px;
  gap:7px}
.product-card p {
  font-size:10px}
.philosophy {
  gap:30px;
  grid-template-columns:.6fr 1.8fr 1.2fr}
.product-hero h1 {
  font-size:44px}
.hero-subtitle {
  font-size:18px}
.product-hero .button {
  padding-inline:19px;
  font-size:12px}
.shipment-card {
  left:40px;
  padding:20px}
.single-hero h1 {
  font-size:43px}
.single-hero .hero-subtitle {
  font-size:17px}
.single-visual .app-sidebar {
  width:84px}
.single-visual .app-sidebar span {
  font-size:8px;
  gap:6px}
.single-visual .app-main {
  padding:20px 16px}
.single-visual .app-heading h3 {
  font-size:14px}
.single-visual .app-heading .status-tag {
  display:none}
.invoice-sheet {
  width:127px;
  height:184px;
  right:-22px;
  padding:17px 13px}
.invoice-sheet>span {
  font-size:15px}
.invoice-lines {
  margin-top:14px}
.invoice-grid {
  height:51px}
.showcase-grid {
  gap:45px}
.feature-grid {
  gap:22px}
.feature {
  padding-left:22px;
  grid-template-columns:45px 1fr;
  gap:0 14px}
.feature .icon-wrap {
  height:45px;
  width:45px}
.feature .line-icon {
  height:29px;
  width:29px}
.feature h3 {
  font-size:19px}
.feature p {
  font-size:11px}
.solutions-title>div {
  padding-right:20px}
.solution-canvas {
  padding-inline:25px}
.solution-apps .app-sidebar {
  width:80px}
.solution-apps .app-sidebar span {
  font-size:8px;
  gap:5px}
.solution-apps .app-main {
  padding:16px}
.solution-apps .app-heading h3 {
  font-size:13px}
.solution-apps .app-data strong {
  font-size:8px}
.solution-apps .app-table {
  font-size:9px}
.solution-apps .form-preview span {
  font-size:8px}
.solution-apps .app-layout {
  min-height:330px}
.solution-apps .app-port {
  height:111px}
.solution-apps .app-table dt,.solution-apps .app-table dd {
  padding:7px}
.document-flow {
  gap:11px}
.document-flow p {
  font-size:9px}
.learning-section {
  gap:35px}
.contact-inner h2 {
  font-size:27px}
}

/* Tablet. */
@media(max-width:960px) {
  .container {
  width:calc(100% - 48px)}
.brand>span {
  font-size:20px}
.brand img {
  width:43px;
  height:43px}
.main-nav {
  gap:20px;
  font-size:12px}
.dropdown-toggle {
  font-size:12px}
.main-nav .nav-demo {
  padding:8px 13px;
  font-size:11px;
  gap:10px}
.home-hero h1 {
  font-size:47px}
.home-hero {
  min-height:510px}
.home-hero .hero-copy {
  padding:45px 0 35px}
.hero-lead {
  font-size:16px}
.hero-description {
  font-size:12px}
.home-hero .eyebrow {
  font-size:9px}
.home-hero .button {
  min-height:44px;
  padding:10px 20px;
  font-size:12px}
.hero-caption {
  font-size:7px;
  margin-top:30px}
.world-visual {
  margin-left:-20px}
.visual-label {
  right:20px;
  bottom:3px;
  font-size:8px}
.section-heading h2 {
  font-size:29px}
.product-grid {
  gap:16px}
.product-card {
  grid-template-columns:1fr;
  min-height:470px}
.product-card-copy {
  padding:25px 23px}
.product-card h3 {
  font-size:24px}
.product-number {
  margin-bottom:16px;
  font-size:8px}
.product-card p {
  font-size:11px;
  margin:14px 0 15px}
.product-preview {
  height:185px;
  margin-top:-16px}
.product-preview .app-window {
  top:10px;
  left:70px;
  transform:rotate(-3deg)}
.philosophy {
  grid-template-columns:1.5fr 1fr;
  gap:30px}
.section-index {
  grid-column:1/-1}
.philosophy h2 {
  font-size:28px}
.about-grid {
  gap:45px}
.about-grid h2 {
  font-size:33px}
.about-lead {
  font-size:17px}
.product-hero {
  grid-template-columns:1fr 1fr;
  gap:24px;
  min-height:540px}
.product-hero h1 {
  font-size:36px}
.product-hero .eyebrow {
  font-size:7px;
  letter-spacing:.12em}
.hero-subtitle {
  font-size:16px}
.product-hero .hero-description {
  font-size:11px}
.product-hero .button {
  font-size:10px;
  min-height:44px;
  padding-inline:13px;
  gap:10px}
.topic-tags>span {
  font-size:9px;
  padding:4px 11px}
.topic-tags {
  gap:6px}
.shipment-card {
  left:15px;
  right:8px;
  bottom:30px;
  padding:17px}
.shipment-card h3 {
  font-size:15px}
.shipment-route strong {
  font-size:15px}
.shipment-route>span {
  font-size:7px}
.shipment-no {
  font-size:6px}
.workflow li {
  gap:10px}
.workflow li>span {
  font-size:15px;
  width:38px;
  height:38px}
.workflow strong {
  font-size:16px}
.workflow b {
  margin-right:5px;
  font-size:16px}
.feature-grid {
  gap:20px}
.feature {
  display:block;
  padding-left:20px}
.feature .icon-wrap {
  margin-bottom:16px}
.feature h3 {
  font-size:19px}
.feature p {
  font-size:11px}
.showcase-grid {
  grid-template-columns:.8fr 1.2fr;
  gap:30px}
.showcase-copy h2 {
  font-size:30px}
.showcase-copy>p {
  font-size:11px}
.showcase-app .app-sidebar {
  width:76px;
  padding:14px 7px}
.showcase-app .app-sidebar span {
  font-size:7px;
  gap:5px}
.showcase-app .app-main {
  padding:16px}
.showcase-app .app-heading h3 {
  font-size:12px}
.showcase-app .app-data strong {
  font-size:7px}
.showcase-app .app-data small {
  font-size:6px}
.showcase-app .app-port {
  height:110px}
.next-product h2 {
  font-size:25px}
.next-product .text-link {
  max-width:240px;
  font-size:11px}
.single-hero {
  gap:20px;
  min-height:600px}
.single-hero h1 {
  font-size:38px}
.single-hero .hero-subtitle {
  font-size:15px}
.single-visual .app-sidebar {
  width:66px;
  padding:12px 5px}
.single-visual .app-sidebar span {
  font-size:6px;
  gap:3px}
.single-visual .app-sidebar>small {
  font-size:3px}
.single-visual .app-main {
  padding:16px 12px}
.single-visual .app-heading h3 {
  font-size:12px}
.single-visual .app-heading small {
  font-size:5px}
.single-visual .window-bar {
  font-size:8px;
  padding:0 8px}
.single-visual .window-bar>small {
  font-size:6px}
.single-visual .form-preview {
  gap:4px}
.single-visual .form-preview small {
  font-size:6px}
.single-visual .form-preview span {
  font-size:6px;
  padding:5px}
.single-visual .app-tabs {
  font-size:7px;
  gap:12px}
.single-visual .app-table {
  font-size:7px}
.single-visual .app-table dt,.single-visual .app-table dd {
  padding:7px 6px}
.single-visual .app-action {
  font-size:8px}
.invoice-sheet {
  width:108px;
  height:164px;
  padding:12px}
.invoice-sheet>span {
  font-size:12px}
.invoice-sheet>small {
  font-size:4px}
.invoice-grid {
  height:43px}
.invoice-sheet .invoice-note {
  font-size:5px!important}
.receipt-card {
  padding:12px 15px;
  right:-18px}
.receipt-card strong {
  font-size:11px}
.receipt-card small {
  font-size:7px}
.receipt-card>span {
  width:29px;
  height:29px;
  font-size:17px}
.learning-section {
  grid-template-columns:1fr;
  gap:35px}
.learning-intro>p {
  max-width:none}
.document-flow {
  max-width:650px}
.document-flow p {
  font-size:11px}
.solutions-title h1 {
  font-size:43px}
.solutions-title>div {
  padding:0}
.solutions-title p {
  font-size:17px}
.solution-canvas {
  padding:20px}
.solution-apps {
  grid-template-columns:1fr 32px 1fr}
.solution-apps .app-sidebar {
  display:none}
.solution-apps .window-bar {
  font-size:8px;
  height:30px;
  padding:0 10px}
.solution-apps .window-bar>small {
  font-size:6px}
.solution-apps .app-main {
  padding:15px}
.solution-apps .app-layout {
  min-height:320px}
.connector {
  font-size:22px}
.connector>span {
  font-size:7px}
.solution-apps .app-heading h3 {
  font-size:12px}
.solution-apps .status-tag {
  font-size:7px}
.solution-apps .app-heading small {
  font-size:6px}
.solution-apps .app-data strong {
  font-size:7px}
.solution-apps .app-data small {
  font-size:6px}
.solution-apps .app-port {
  height:107px}
.solution-apps .app-table {
  font-size:8px}
.solution-apps .form-preview {
  margin-top:20px;
  gap:4px}
.solution-apps .form-preview small {
  font-size:7px}
.solution-apps .form-preview span {
  font-size:7px;
  padding:6px}
.solution-apps .app-tabs {
  font-size:8px;
  margin-top:18px}
.solution-apps .app-table dt,.solution-apps .app-table dd {
  padding:6px}
.journey-grid {
  gap:16px}
.journey-grid article {
  padding-right:15px}
.journey-number {
  right:15px;
  font-size:11px}
.journey-grid h3 {
  font-size:18px}
.journey-grid p {
  font-size:10px}
.teaching-grid {
  gap:45px}
.teaching-grid h2 {
  font-size:29px}
.teaching-options summary {
  font-size:19px}
.contact-inner h2 {
  font-size:24px}
.contact-inner .button {
  font-size:12px;
  padding:10px 18px}
.footer-top>p {
  font-size:11px}
.footer-bottom {
  font-size:8px}
}

/* Mobile: real reflow, not a scaled screenshot. */
@media(max-width:720px) {
  html {
  scroll-padding-top:20px}
.container {
  width:calc(100% - 40px)}
.nav-wrap {
  min-height:77px}
.brand {
  gap:9px}
.brand>span {
  font-size:20px}
.brand small {
  font-size:6px}
.brand img {
  width:41px;
  height:41px}
.menu-toggle {
  display:block;
  width:38px;
  height:38px;
  padding:8px;
  border:1px solid #b9c5ae;
  border-radius:3px;
  background:transparent}
.menu-toggle span {
  display:block;
  height:1px;
  background:var(--forest);
  margin:6px 0;
  transition:transform .2s}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)}
.main-nav {
  display:none;
  position:absolute;
  top:77px;
  left:0;
  right:0;
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  box-shadow:0 16px 22px #1d372510;
  padding:16px 20px 24px;
  gap:4px;
  align-items:stretch;
  flex-direction:column;
  font-size:14px}
.main-nav.is-open {
  display:flex}
.main-nav>a:not(.button),.dropdown-toggle {
  padding:12px 0;
  width:100%;
  text-align:left}
.main-nav>a[aria-current]:after,.dropdown-toggle.active:after {
  display:none}
.main-nav>a[aria-current],.dropdown-toggle.active {
  font-weight:600;
  color:var(--forest)}
.dropdown-toggle {
  font-size:14px;
  display:flex;
  justify-content:space-between}
.dropdown {
  position:static;
  width:100%;
  margin:3px 0 9px;
  box-shadow:none;
  background:#ecefe5;
  border:none}
.dropdown a {
  font-size:12px;
  padding:12px}
.dropdown small {
  font-size:8px}
.main-nav .nav-demo {
  margin:13px 0 0;
  min-height:43px;
  font-size:13px}
.home-hero {
  grid-template-columns:1fr;
  min-height:auto}
.home-hero .hero-copy {
  padding:43px 0 0}
.home-hero h1 {
  font-size:clamp(34px,8.7vw,56px);
  line-height:1.45;
  letter-spacing:-.06em}
.home-hero .eyebrow {
  font-size:8px;
  margin-bottom:21px}
.hero-lead {
  font-size:16px;
  line-height:1.8;
  margin-top:18px}
.hero-description {
  font-size:12px;
  margin-top:14px}
.home-hero .actions {
  margin-top:23px}
.home-hero .button {
  min-height:43px;
  font-size:12px;
  padding:9px 20px}
.hero-caption {
  display:none}
.world-visual {
  margin:-14px -11px 0 9px;
  max-width:570px;
  justify-self:center;
  width:100%}
.visual-label {
  right:18px;
  bottom:14px;
  font-size:8px}
.products-section {
  padding:33px 0 40px}
.section-heading {
  display:block;
  margin-bottom:22px}
.section-heading h2 {
  font-size:26px;
  line-height:1.6}
.section-heading .eyebrow {
  font-size:8px;
  margin-bottom:10px}
.section-heading>p {
  font-size:11px;
  margin:10px 0 0;
  white-space:normal}
.product-grid {
  grid-template-columns:1fr;
  gap:18px}
.product-card {
  grid-template-columns:1.05fr .95fr;
  min-height:285px}
.product-card-copy {
  padding:24px 0 24px 21px}
.product-number {
  font-size:6px;
  gap:6px;
  margin-bottom:24px;
  white-space:nowrap}
.product-number i {
  width:18px}
.product-card h3 {
  font-size:19px;
  line-height:1.6}
.product-card p {
  font-size:10px;
  line-height:1.9;
  margin:14px 0 22px}
.product-card p>br {
  display:none}
.product-card .text-link {
  font-size:11px}
.product-preview {
  height:auto;
  margin-top:0}
.product-preview .app-window {
  width:360px;
  top:62px;
  left:13px;
  transform:rotate(-2deg)}
.product-preview .app-sidebar {
  width:70px}
.product-preview .app-main {
  padding:14px 11px}
.product-preview .app-heading h3 {
  font-size:10px}
.product-preview .app-port {
  height:80px}
.product-preview .app-data {
  padding:7px}
.product-preview .app-table dt,.product-preview .app-table dd {
  padding:5px}
.design-note {
  font-size:9px;
  margin-top:15px}
.philosophy {
  grid-template-columns:1fr;
  gap:24px;
  padding:38px 0 42px}
.section-index {
  font-size:8px;
  padding:0}
.philosophy h2 {
  font-size:27px}
.philosophy>div>p {
  font-size:12px;
  margin:16px 0 20px}
.philosophy .text-link {
  font-size:12px}
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
  margin-top:13px}
.principles>div {
  padding:25px 0 0;
  border-top:1px solid var(--line)}
.principles>div+div {
  padding:25px 0 0}
.principles span,.principles>div+div span {
  top:7px;
  font-size:9px}
.principles h3 {
  font-size:17px;
  margin-bottom:8px}
.principles p {
  font-size:10px;
  line-height:1.8}
.about-section {
  padding:43px 0}
.about-grid {
  grid-template-columns:1fr;
  gap:20px}
.about-grid .eyebrow {
  font-size:8px;
  margin-bottom:18px}
.about-grid h2 {
  font-size:31px}
.about-grid>div:last-child {
  padding:0}
.about-lead {
  font-size:16px}
.about-lead+p {
  font-size:12px;
  margin-top:17px}
.about-signature {
  margin-top:24px;
  gap:13px}
.about-signature img {
  width:45px;
  height:45px}
.about-signature span {
  font-size:11px}
.breadcrumb {
  padding-top:22px;
  gap:11px;
  font-size:9px}
.product-hero {
  grid-template-columns:1fr;
  min-height:auto;
  padding:32px 0 37px;
  gap:27px}
.product-hero h1 {
  font-size:clamp(32px,8.7vw,46px);
  line-height:1.5}
.product-hero .eyebrow {
  font-size:8px;
  margin-bottom:21px}
.product-hero .hero-subtitle {
  font-size:17px;
  margin-top:18px}
.product-hero .hero-description {
  font-size:12px;
  line-height:1.9;
  margin-top:15px}
.product-hero .actions {
  margin-top:22px;
  gap:11px}
.product-hero .button {
  font-size:11px;
  min-height:43px;
  padding:10px 17px;
  gap:13px}
.topic-tags {
  margin-top:22px;
  gap:8px}
.topic-tags>span {
  font-size:10px;
  padding:5px 14px}
.freight-visual {
  padding-bottom:110px;
  max-width:520px;
  width:100%;
  justify-self:center;
  margin-top:12px}
.visual-topline {
  font-size:8px;
  margin-bottom:14px}
.port-hero {
  border-top-left-radius:55px}
.shipment-card {
  bottom:0;
  left:35px;
  right:10px;
  padding:19px}
.shipment-card h3 {
  font-size:17px;
  margin-bottom:15px}
.shipment-route strong {
  font-size:16px}
.shipment-route>span {
  font-size:9px}
.shipment-no {
  font-size:7px}
.workflow {
  gap:8px;
  padding:19px 0;
  justify-content:space-between}
.workflow li {
  flex:0 1 auto;
  flex-direction:column;
  gap:9px;
  position:relative}
.workflow li>span {
  font-size:14px;
  width:35px;
  height:35px}
.workflow strong {
  font-size:14px}
.workflow b {
  position:absolute;
  left:calc(100% + 9px);
  top:9px;
  font-size:12px;
  line-height:1;
  margin:0}
.features-section {
  padding:38px 0 42px}
.feature-grid {
  grid-template-columns:1fr;
  gap:23px;
  padding-top:8px}
.feature {
  display:grid;
  grid-template-columns:51px 1fr;
  gap:0 17px;
  border:0;
  border-top:1px solid var(--line);
  padding:22px 0 0}
.feature:first-child {
  padding:0}
.feature .icon-wrap {
  height:49px;
  width:49px;
  margin:0}
.feature h3 {
  font-size:20px;
  margin:0 0 9px}
.feature p {
  font-size:12px}
.product-showcase {
  padding:41px 0}
.showcase-grid {
  grid-template-columns:1fr;
  gap:31px}
.showcase-copy .eyebrow {
  font-size:8px;
  margin-bottom:15px}
.showcase-copy h2 {
  font-size:29px}
.showcase-copy>p {
  font-size:12px;
  max-width:none;
  margin-top:15px}
.stage-switch {
  max-width:none;
  margin-top:21px;
  flex-direction:row;
  gap:17px}
.stage-switch button {
  flex:1;
  font-size:10px;
  white-space:nowrap;
  padding:9px 0}
.stage-switch button.selected:after {
  display:none}
.stage-switch button.selected {
  border-bottom-color:var(--forest)}
.showcase-copy .stage-description {
  font-size:11px;
  min-height:42px;
  margin-top:13px}
.showcase-app .app-sidebar {
  width:75px}
.showcase-app .app-main {
  padding:15px}
.showcase-app .app-port {
  height:119px}
.showcase-app .app-heading h3 {
  font-size:12px}
.showcase-app .app-heading .status-tag {
  font-size:7px}
.showcase-app .app-steps {
  margin:22px 0 16px}
.showcase-app .app-data strong {
  font-size:6px}
.showcase-app .window-bar {
  height:34px;
  font-size:9px}
.interface-caption {
  font-size:8px;
  margin-top:12px}
.next-product {
  padding:38px 0;
  display:block}
.next-product h2 {
  font-size:25px}
.next-product .eyebrow {
  font-size:7px;
  margin-bottom:12px}
.next-product p {
  font-size:11px}
.next-product .text-link {
  max-width:none;
  margin-top:20px;
  font-size:11px;
  gap:16px}
.single-hero h1 {
  font-size:41px}
.single-hero .hero-subtitle {
  font-size:16px}
.single-hero .actions {
  gap:10px}
.single-visual {
  margin:8px 12px 0 0;
  padding:38px 0 46px;
  max-width:540px;
  width:calc(100% - 5px);
  justify-self:center}
.single-visual>.app-window {
  margin-left:0}
.single-visual .app-sidebar {
  width:70px;
  padding:15px 7px}
.single-visual .app-sidebar span {
  font-size:7px;
  gap:4px;
  padding:10px 3px}
.single-visual .app-main {
  padding:17px 13px}
.single-visual .app-heading h3 {
  font-size:12px}
.single-visual .app-heading small {
  font-size:6px}
.single-visual .app-table {
  font-size:8px}
.single-visual .app-tabs {
  font-size:8px}
.single-visual .form-preview span {
  font-size:7px}
.single-visual .form-preview {
  margin-top:23px}
.single-visual .app-table dt,.single-visual .app-table dd {
  padding:8px 7px}
.single-visual .window-bar {
  font-size:8px;
  height:34px}
.single-visual .invoice-sheet {
  right:-19px}
.receipt-card {
  right:-16px;
  bottom:13px;
  padding:12px 18px}
.receipt-card strong {
  font-size:12px}
.receipt-card small {
  font-size:8px}
.single-hero+.container .workflow strong {
  font-size:12px}
.single-hero+.container .workflow b {
  left:calc(100% + 13px)}
.learning-section {
  padding:38px 0 43px;
  gap:30px}
.learning-intro h2 {
  font-size:28px}
.learning-intro .eyebrow {
  font-size:8px;
  margin-bottom:16px}
.learning-intro>p {
  font-size:12px}
.learning-intro>p.design-note {
  font-size:9px;
  margin-top:12px}
.document-flow {
  gap:7px}
.document-flow article {
  padding:18px 5px}
.document-flow h3 {
  font-size:16px}
.document-flow p {
  font-size:8px;
  line-height:1.9}
.document-flow .line-icon {
  width:29px;
  height:29px}
.document-flow>b {
  font-size:14px}
.flow-number {
  font-size:9px;
  margin-bottom:15px}
.solutions-hero {
  padding-top:35px}
.solutions-hero>.eyebrow {
  font-size:8px;
  margin-bottom:18px}
.solutions-title {
  display:block;
  margin-bottom:28px}
.solutions-title h1 {
  font-size:clamp(32px,9.5vw,50px);
  line-height:1.5}
.solutions-title p {
  font-size:15px;
  line-height:1.9;
  margin:19px 0}
.solutions-title .button {
  font-size:11px;
  min-height:43px}
.solution-canvas {
  padding:17px 14px 15px;
  margin:0 -4px}
.canvas-label {
  font-size:8px;
  letter-spacing:0;
  margin-bottom:16px}
.canvas-label>small {
  font-size:7px}
.solution-apps {
  grid-template-columns:1fr;
  gap:0}
.solution-app-title {
  font-size:10px;
  margin-bottom:9px}
.solution-app-title>a {
  font-size:20px}
.solution-apps .app-sidebar {
  display:flex;
  width:73px;
  padding:14px 7px}
.solution-apps .app-sidebar span {
  font-size:7px;
  gap:5px}
.solution-apps .app-sidebar>small {
  font-size:4px}
.solution-apps .app-layout {
  min-height:290px}
.solution-apps .app-main {
  padding:16px 13px}
.solution-apps .app-port {
  height:100px}
.solution-apps .app-heading h3 {
  font-size:12px}
.solution-apps .app-data {
  padding:9px}
.solution-apps .app-data strong {
  font-size:6px}
.solution-apps .app-steps {
  margin:21px 0 14px}
.solution-apps .app-table {
  font-size:8px}
.solution-apps .app-table dt,.solution-apps .app-table dd {
  padding:6px}
.solution-apps .form-preview {
  margin-top:19px}
.solution-apps .app-tabs {
  margin-top:17px}
.solution-apps .form-preview span {
  font-size:6px}
.solution-apps .app-heading .status-tag {
  font-size:6px;
  padding:2px 5px}
.connector {
  font-size:23px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  height:49px;
  transform:none}
.connector>span {
  font-size:8px;
  line-height:1.6}
.connector>span br {
  display:none}
.canvas-footnote {
  font-size:8px;
  line-height:1.8;
  margin-top:16px}
.solution-journey {
  padding:38px 0 43px}
.journey-grid {
  grid-template-columns:1fr;
  gap:19px;
  margin-top:27px}
.journey-grid article {
  padding:0 25px 19px 73px;
  min-height:75px;
  border-right:0;
  border-bottom:1px solid var(--line)}
.journey-grid article:last-child {
  border-bottom:0;
  padding-bottom:0}
.journey-grid .icon-wrap {
  position:absolute;
  left:0;
  top:0;
  width:50px;
  height:50px;
  margin:0}
.journey-grid .icon-wrap svg {
  width:30px;
  height:30px}
.journey-number {
  right:0;
  top:2px;
  font-size:11px}
.journey-grid h3 {
  font-size:20px;
  margin-bottom:8px}
.journey-grid p {
  font-size:11px}
.teaching-section {
  padding:40px 0}
.teaching-grid {
  grid-template-columns:1fr;
  gap:26px}
.teaching-grid .eyebrow {
  font-size:8px;
  margin-bottom:17px}
.teaching-grid h2 {
  font-size:29px}
.teaching-grid>div>p {
  font-size:12px;
  margin-top:16px}
.teaching-grid>div>p.design-note {
  font-size:9px}
.teaching-options summary {
  font-size:20px;
  padding:18px 0;
  gap:19px}
.teaching-options details>p {
  margin:0 20px 20px 35px;
  font-size:11px}
.solution-bottom {
  padding:40px 0 47px}
.solution-bottom .eyebrow {
  font-size:7px;
  margin-bottom:17px}
.solution-bottom h2 {
  font-size:29px}
.solution-bottom p {
  font-size:12px;
  margin-top:18px}
.contact-inner {
  display:block;
  padding:36px 0}
.contact-inner .eyebrow {
  font-size:7px;
  margin-bottom:15px}
.contact-inner h2 {
  font-size:25px;
  line-height:1.7;
  max-width:300px}
.contact-inner .button {
  margin-top:24px;
  min-height:43px;
  font-size:11px;
  padding:9px 20px}
.contact-band:after {
  inset:-40px -160px -200px 10%;
  opacity:.8}
.site-footer {
  padding:29px 0 20px}
.footer-top {
  display:grid;
  grid-template-columns:1fr auto;
  gap:21px;
  padding-bottom:25px}
.footer-top .brand>span {
  font-size:19px}
.footer-top .brand img {
  width:39px;
  height:39px}
.footer-top>p {
  grid-column:1/-1;
  grid-row:2;
  font-size:11px;
  letter-spacing:.1em}
.back-top {
  font-size:9px}
.footer-bottom {
  display:block;
  font-size:8px;
  line-height:1.9}
.footer-bottom>span {
  display:block}
.footer-bottom>span+span {
  margin-top:6px}
.demo-dialog {
  padding:25px 22px}
.demo-dialog .eyebrow {
  font-size:8px;
  margin-bottom:13px}
.demo-dialog h2 {
  font-size:25px}
.demo-dialog .dialog-intro {
  font-size:11px}
.demo-dialog .demo-form label {
  font-size:11px}
.demo-dialog .demo-form input,.demo-dialog .demo-form select,.demo-dialog .demo-form textarea {
  font-size:12px}
.demo-dialog .button {
  font-size:12px;
  min-height:45px}
.dialog-close {
  right:10px;
  top:8px}
}

@media(max-width:370px) {
  .container {
  width:calc(100% - 32px)}
.home-hero h1 {
  font-size:32px}
.product-card h3 {
  font-size:17px}
.product-card-copy {
  padding-left:17px}
.product-number {
  font-size:5px}
.product-card p {
  font-size:9px}
.product-hero h1 {
  font-size:31px}
.product-hero .hero-subtitle {
  font-size:14px}
.product-hero .button {
  font-size:10px;
  padding-inline:13px}
.topic-tags>span {
  font-size:9px}
.workflow li>span {
  width:31px;
  height:31px}
.workflow strong {
  font-size:12px}
.workflow b {
  left:calc(100% + 8px);
  font-size:10px}
.single-hero h1 {
  font-size:36px}
.single-visual .app-sidebar {
  width:58px}
.single-visual .app-sidebar span {
  font-size:6px}
.single-visual .app-main {
  padding:15px 10px}
.single-visual .app-table {
  font-size:7px}
.single-visual .app-table dt,.single-visual .app-table dd {
  padding:7px 5px}
.single-visual .invoice-sheet {
  width:94px;
  height:150px;
  right:-15px}
.invoice-sheet>span {
  font-size:11px}
.single-visual .app-heading h3 {
  font-size:10px}
.single-visual .app-tabs {
  font-size:7px;
  gap:9px}
.single-visual .form-preview span {
  font-size:6px}
.solution-apps .app-sidebar {
  width:62px}
.solution-apps .app-sidebar span {
  font-size:6px}
.solution-apps .app-heading h3 {
  font-size:10px}
.solution-apps .app-main {
  padding:14px 10px}
.solution-apps .app-data strong {
  font-size:5px}
.solution-apps .app-table {
  font-size:7px}
.solution-apps .form-preview small {
  font-size:6px}
.solution-apps .app-heading .status-tag {
  display:none}
.solutions-title h1 {
  font-size:32px}
.section-heading h2 {
  font-size:24px}
.contact-inner h2 {
  font-size:23px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important;
  animation:none!important}
}

@media print {
  .site-header,.site-footer,.contact-band,.actions,.demo-dialog,.stage-switch,.menu-toggle {
  display:none!important}
.container {
  width:100%}
body {
  background:white;
  font-size:12px}
.home-hero {
  min-height:0}
.product-hero {
  min-height:0}
.app-window {
  box-shadow:none}
.product-card {
  break-inside:avoid}
.product-showcase,.teaching-section {
  background:#f3f4ed}
section {
  break-inside:avoid}
}

/* Production refinements: preserve the original visual identity while keeping
   public-facing copy and controls readable on smaller screens. */
.design-note,.interface-caption,.canvas-footnote,.footer-bottom,.back-top {
  color:var(--muted);
  font-size:12px;
}
.product-card p {
  font-size:13px;
}
.not-found {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:28px;
  padding-block:60px;
}
.not-found h1 {
  font-size:clamp(28px,4vw,48px);
  line-height:1.5;
}
@media(max-width:960px) {
  .main-nav {
    gap:16px;
  }
  .main-nav .nav-demo {
    margin-left:0;
  }
  .single-visual .invoice-sheet,.single-visual .receipt-card {
    right:0;
  }
  .single-visual .paper-backdrop {
    right:8px;
    transform:rotate(-4deg);
  }
}
@media(max-width:720px) {
  .menu-toggle {
    width:44px;
    height:44px;
  }
  .main-nav>a:not(.button),.dropdown-toggle {
    min-height:44px;
  }
  .hero-description,.product-hero .hero-description,
  .product-card p,.section-heading>p,
  .principles p,.about-lead+p,.feature p,
  .showcase-copy>p,.showcase-copy .stage-description,
  .next-product p,.learning-intro>p,
  .document-flow p,.journey-grid p,
  .teaching-grid>div>p,.teaching-options details>p,
  .solution-bottom p {
    font-size:14px;
  }
  .product-card-copy {
    padding-right:12px;
  }
  .product-card .text-link,.stage-switch button,
  .next-product .text-link,.contact-inner .button,
  .home-hero .button,.product-hero .button,
  .solutions-title .button {
    font-size:13px;
    min-height:44px;
  }
  .stage-switch {
    gap:12px;
  }
  .document-flow {
    display:grid;
    grid-template-columns:1fr;
  }
  .document-flow article {
    padding:24px 16px;
  }
  .document-flow>b {
    transform:rotate(90deg);
    justify-self:center;
  }
  .document-flow p br {
    display:none;
  }
  .next-product .text-link {
    max-width:100%;
    align-items:flex-start;
  }
  .footer-bottom {
    font-size:12px;
  }
}