/* ============================================================
   Airwallex Bridge Company
   Design direction: "radiology reading room" — cool clinical
   greys, hairline rules, stamped spec plates, one teal signal
   colour and one amber verification colour. Nothing decorative.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:        #0B1622;
  --ink-2:      #11212F;
  --ink-3:      #1B303F;
  --steel:      #5B7286;
  --steel-soft: #8FA6B5;
  --line:       #DCE4EA;
  --line-dark:  #22394B;
  --paper:      #F2F5F7;
  --paper-2:    #E7EDF1;
  --white:      #FFFFFF;

  --cyan:       #0E8F8C;
  --cyan-deep:  #0A6E6C;
  --cyan-glow:  #17B3AF;
  --amber:      #E8A33D;
  --amber-soft: #FEF7EC;
  --red:        #D6453D;
  --red-soft:   #FDF2F1;
  --green:      #2E9E63;

  --display: 'Archivo', 'Helvetica Neue', sans-serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --shell: 1280px;
  --gut: 28px;
  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(11,22,34,.06), 0 4px 14px rgba(11,22,34,.05);
  --shadow-md: 0 2px 6px rgba(11,22,34,.07), 0 18px 44px rgba(11,22,34,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em; }
h1{ font-size:clamp(2.3rem,5.2vw,4rem); }
h2{ font-size:clamp(1.75rem,3.4vw,2.7rem); }
h3{ font-size:1.25rem; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
:focus-visible{ outline:2px solid var(--cyan-glow); outline-offset:3px; }

/* ---------- layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--gut); }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--ink{ background:var(--ink); color:var(--white); }
.section--paper{ background:var(--paper); }
.grid{ display:grid; gap:24px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }

/* ---------- typographic utilities ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan-deep); margin:0 0 14px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--cyan); flex:none; }
.section--ink .eyebrow{ color:var(--cyan-glow); }
.section--ink .eyebrow::before{ background:var(--cyan-glow); }
.lede{ font-size:1.1rem; color:var(--steel); max-width:62ch; }
.section--ink .lede{ color:var(--steel-soft); }
.mono{ font-family:var(--mono); }
.muted{ color:var(--steel); }
.center{ text-align:center; }
.section-head{ max-width:66ch; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--radius);
  font-family:var(--display); font-weight:600; font-size:.94rem; letter-spacing:.01em;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease),
    border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--cyan); color:#fff; }
.btn--primary:hover{ background:var(--cyan-deep); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--ink-3); }
.btn--ghost{ border-color:var(--line); background:transparent; color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--onink{ border-color:rgba(255,255,255,.28); color:#fff; }
.btn--onink:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.btn--sm{ padding:9px 16px; font-size:.84rem; }
.btn--block{ width:100%; }
.btn--danger{ background:var(--red); color:#fff; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- header ---------- */
.topbar{
  background:var(--ink); color:var(--steel-soft);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.topbar .shell{ display:flex; justify-content:space-between; gap:20px; padding-block:9px; }
.topbar a:hover{ color:#fff; }
.topbar__set{ display:flex; gap:22px; }

.masthead{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.masthead .shell{ display:flex; align-items:center; gap:34px; height:76px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__name{ font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em; line-height:1.1; }
.brand__sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:10px 14px; font-size:.92rem; font-weight:500; border-radius:var(--radius);
  color:var(--ink-2); position:relative; transition:color .16s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--cyan-deep); }

.head-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.cart-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--line); border-radius:var(--radius); font-size:.88rem; }
.cart-btn:hover{ border-color:var(--ink); }
.cart-btn__count{
  min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--cyan);
  color:#fff; font-family:var(--mono); font-size:11px; display:grid; place-items:center;
}
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); background:none; border-radius:var(--radius); }
.burger span{ display:block; width:18px; height:1.5px; background:var(--ink); margin:4px auto; transition:.2s; }

/* ---------- hero ---------- */
.hero{
  background:var(--ink); color:#fff; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-dark);
}
.hero::before{ /* faint technical grid, like a light box */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:88px 88px; mask-image:radial-gradient(ellipse 90% 70% at 70% 20%,#000 20%,transparent 78%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; padding:84px 0 76px; }
.hero h1{ margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--cyan-glow); }
.hero__lede{ color:var(--steel-soft); font-size:1.12rem; max-width:52ch; margin-bottom:32px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }
.hero__stats{ display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid var(--line-dark); padding-top:24px; }
.hero__stat b{ display:block; font-family:var(--display); font-size:1.65rem; letter-spacing:-.02em; }
.hero__stat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-soft); }

.hero__panel{ position:relative; }
.hero__frame{ border:1px solid var(--line-dark); background:var(--ink-2); padding:14px; }
.hero__frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--ink-3); }
.hero__plate{
  position:absolute; left:-22px; bottom:26px; background:var(--white); color:var(--ink);
  border-left:3px solid var(--cyan); padding:16px 20px; box-shadow:var(--shadow-md); max-width:270px;
}
.hero__plate dt{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); }
.hero__plate dd{ margin:2px 0 12px; font-family:var(--display); font-weight:600; font-size:.95rem; }
.hero__plate dd:last-child{ margin-bottom:0; }

/* ---------- marquee of capabilities ---------- */
.ticker{ background:var(--ink-2); border-top:1px solid var(--line-dark); overflow:hidden; }
.ticker__track{ display:flex; gap:0; white-space:nowrap; animation:slide 34s linear infinite; }
.ticker__track span{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel-soft); padding:13px 28px; border-right:1px solid var(--line-dark);
}
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.card:hover{ border-color:#B9C7D1; box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card__media{ position:relative; background:var(--paper-2); aspect-ratio:4/3; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__media img{ transform:scale(1.035); }
.card__tag{
  position:absolute; top:12px; left:12px; background:rgba(11,22,34,.86); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px;
}
.card__body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.card__sku{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--steel); margin-bottom:8px; }
.card__title{ font-family:var(--display); font-weight:650; font-size:1.02rem; line-height:1.25; margin:0 0 8px; }
.card__desc{ font-size:.88rem; color:var(--steel); margin:0 0 16px; }
.card__foot{ margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.card__price b{ font-family:var(--display); font-size:1.18rem; letter-spacing:-.02em; display:block; }
.card__price span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

/* category tiles */
.cat{
  position:relative; display:block; border:1px solid var(--line); overflow:hidden;
  background:var(--paper-2); min-height:230px; border-radius:var(--radius);
}
.cat img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; transition:transform .55s var(--ease); }
.cat::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,22,34,.9) 8%,rgba(11,22,34,.15) 70%); }
.cat:hover img{ transform:scale(1.05); }
.cat__body{ position:relative; z-index:2; padding:22px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; min-height:230px; color:#fff; }
.cat__body h3{ margin:0 0 4px; font-size:1.08rem; }
.cat__body p{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-soft); }

/* ---------- signature: spec plate ---------- */
.plate{ border:1px solid var(--line); border-top:3px solid var(--ink); background:#fff; }
.plate__head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--paper);
}
.plate__head h4{ margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.plate__stamp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--cyan-deep); }
.plate__row{ display:grid; grid-template-columns:minmax(140px,38%) 1fr; gap:16px; padding:11px 18px; border-bottom:1px dashed var(--line); font-size:.9rem; }
.plate__row:last-child{ border-bottom:0; }
.plate__row dt{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.plate__row dd{ margin:0; font-weight:500; }

/* ---------- signature: clearance chain ---------- */
.chain{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); background:#fff; }
.chain__step{ padding:16px 18px 18px; border-right:1px solid var(--line); position:relative; }
.chain__step:last-child{ border-right:0; }
.chain__led{
  width:9px; height:9px; border-radius:50%; background:var(--line); margin-bottom:12px;
  box-shadow:0 0 0 4px var(--paper);
}
.chain__step.is-done .chain__led{ background:var(--cyan); box-shadow:0 0 0 4px rgba(14,143,140,.16); }
.chain__step.is-current .chain__led{ background:var(--amber); box-shadow:0 0 0 4px rgba(232,163,61,.2); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(232,163,61,.08);} }
.chain__step b{ display:block; font-family:var(--display); font-size:.92rem; margin-bottom:3px; }
.chain__step span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }
.chain__step.is-done::before{
  content:''; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--cyan);
}

/* ---------- status pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
}
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill--wait{ background:var(--paper-2); color:var(--steel); }
.pill--review{ background:var(--amber-soft); color:#8A5D12; }
.pill--ok{ background:rgba(46,158,99,.12); color:#1F7449; }
.pill--bad{ background:var(--red-soft); color:#A32C25; }

/* ---------- notice band ---------- */
.notice{ border:1px solid var(--amber); background:var(--amber-soft); padding:18px 20px; border-radius:var(--radius); }
.notice__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#8A5D12; margin-bottom:6px; }
.notice p{ margin:0; font-size:.92rem; line-height:1.6; }
.notice--info{ border-color:var(--cyan); background:#F1F7F7; }
.notice--info .notice__label{ color:var(--cyan-deep); }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:7px;
}
.input,select.input,textarea.input{
  width:100%; padding:13px 14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); font-size:.95rem; transition:border-color .16s, box-shadow .16s;
}
.input:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(14,143,140,.13); outline:none; }
textarea.input{ min-height:130px; resize:vertical; }
.field--split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hint{ font-size:.8rem; color:var(--steel); margin-top:6px; }
.file-drop{
  border:1.5px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center;
  background:var(--paper); cursor:pointer; transition:border-color .18s, background .18s;
}
.file-drop:hover{ border-color:var(--cyan); background:#F1F7F7; }
.file-drop input{ display:none; }
.file-drop b{ font-family:var(--display); display:block; margin-bottom:4px; }
.file-drop span{ font-size:.84rem; color:var(--steel); }

/* ---------- panels & tables ---------- */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.panel--flush{ padding:0; overflow:hidden; }
.panel__head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.panel__head h3{ margin:0; font-size:1.02rem; }

.table{ width:100%; border-collapse:collapse; }
.table th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper); white-space:nowrap;
}
.table td{ padding:14px 16px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--paper); }
.table .num{ text-align:right; font-family:var(--mono); }
.table-wrap{ overflow-x:auto; }

/* ---------- flash messages ---------- */
.flash-stack{ position:fixed; top:92px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:380px; }
.flash{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--cyan);
  box-shadow:var(--shadow-md); padding:14px 18px; font-size:.9rem; border-radius:var(--radius);
  animation:slidein .3s var(--ease);
}
.flash--error{ border-left-color:var(--red); }
.flash--info{ border-left-color:var(--ink); }
@keyframes slidein{ from{ opacity:0; transform:translateX(16px);} }

/* ---------- shop layout ---------- */
.shop{ display:grid; grid-template-columns:262px 1fr; gap:36px; align-items:start; }
.filters{ position:sticky; top:100px; border:1px solid var(--line); border-radius:var(--radius); }
.filters__group{ padding:18px 20px; border-bottom:1px solid var(--line); }
.filters__group:last-child{ border-bottom:0; }
.filters h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin:0 0 12px; }
.filters a{ display:flex; justify-content:space-between; gap:8px; padding:7px 0; font-size:.9rem; color:var(--ink-2); }
.filters a:hover{ color:var(--cyan-deep); }
.filters a.is-active{ color:var(--cyan-deep); font-weight:600; }
.filters a em{ font-family:var(--mono); font-style:normal; font-size:11px; color:var(--steel); }
.shop__bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.shop__count{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }

/* ---------- product detail ---------- */
.pd{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; }
.pd__media{ border:1px solid var(--line); background:var(--paper-2); padding:16px; }
.pd__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#fff; }
.pd__price{ font-family:var(--display); font-size:2.2rem; letter-spacing:-.02em; }
.pd__meta{ display:flex; gap:22px; flex-wrap:wrap; margin:18px 0 24px; }
.pd__meta div span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); display:block; }
.pd__meta div b{ font-weight:600; font-size:.94rem; }
.qty{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.qty button{ width:42px; background:var(--paper); border:0; cursor:pointer; font-size:1.1rem; color:var(--ink); }
.qty button:hover{ background:var(--paper-2); }
.qty input{ width:64px; border:0; text-align:center; font-family:var(--mono); }
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent; padding:12px 16px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.tabs button.is-active{ color:var(--ink); border-bottom-color:var(--cyan); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* ---------- cart / checkout ---------- */
.checkout{ display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:start; }
.summary{ position:sticky; top:100px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.summary__body{ padding:22px; }
.summary__line{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:.92rem; }
.summary__line--total{ border-top:1px solid var(--line); margin-top:10px; padding-top:16px; font-family:var(--display); font-size:1.25rem; font-weight:700; }
.mini-item{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.mini-item img{ width:56px; height:56px; object-fit:cover; background:var(--paper-2); border:1px solid var(--line); }
.mini-item b{ font-size:.88rem; font-weight:600; display:block; line-height:1.3; }
.mini-item span{ font-family:var(--mono); font-size:10.5px; color:var(--steel); }

/* ---------- account ---------- */
.acct{ display:grid; grid-template-columns:242px 1fr; gap:34px; align-items:start; }
.acct-nav{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:sticky; top:100px; }
.acct-nav a{ display:block; padding:13px 18px; border-bottom:1px solid var(--line); font-size:.92rem; }
.acct-nav a:last-child{ border-bottom:0; }
.acct-nav a:hover{ background:var(--paper); }
.acct-nav a.is-active{ background:var(--ink); color:#fff; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
.stat{ border:1px solid var(--line); border-top:3px solid var(--cyan); padding:18px; background:#fff; }
.stat b{ display:block; font-family:var(--display); font-size:1.9rem; letter-spacing:-.02em; line-height:1.1; }
.stat span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); }

.thread{ display:flex; flex-direction:column; gap:14px; }
.msg{ border:1px solid var(--line); border-left:3px solid var(--ink); padding:14px 18px; background:#fff; }
.msg--admin{ border-left-color:var(--cyan); background:#F5FAFA; }
.msg--system{ border-left-color:var(--steel-soft); background:var(--paper); }
.msg__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; display:flex; gap:10px; flex-wrap:wrap; }
.msg p{ margin:0; font-size:.93rem; }

/* ---------- page banner ---------- */
.page-head{ background:var(--ink); color:#fff; padding:66px 0 58px; position:relative; overflow:hidden; }
.page-head::after{
  content:''; position:absolute; inset:0; opacity:.45;
  background-image:linear-gradient(90deg,var(--line-dark) 1px,transparent 1px); background-size:64px 100%;
  mask-image:linear-gradient(to right,#000,transparent 65%);
}
.page-head .shell{ position:relative; z-index:2; }
.page-head h1{ font-size:clamp(2rem,4vw,3.1rem); margin-bottom:12px; }
.page-head p{ color:var(--steel-soft); max-width:60ch; margin:0; }
.crumbs{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-soft); margin-bottom:16px; }
.crumbs a:hover{ color:#fff; }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:var(--steel-soft); padding:66px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px; padding-bottom:44px; }
.footer h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin:0 0 16px; }
.footer a:hover{ color:#fff; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.9rem; }
.footer__bar{ border-top:1px solid var(--line-dark); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; }
.footer__brand p{ font-size:.9rem; max-width:34ch; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- empty state ---------- */
.empty{ text-align:center; padding:64px 24px; border:1px dashed var(--line); border-radius:var(--radius); }
.empty h3{ margin-bottom:8px; }
.empty p{ color:var(--steel); max-width:44ch; margin:0 auto 20px; }

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; padding:64px 0; }
  .hero__plate{ left:auto; right:16px; bottom:16px; }
  .split,.pd,.checkout{ grid-template-columns:1fr; gap:36px; }
  .shop{ grid-template-columns:1fr; }
  .filters{ position:static; }
  .acct{ grid-template-columns:1fr; }
  .acct-nav{ position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .acct-nav a{ border-bottom:0; border-right:1px solid var(--line); text-align:center; }
  .summary{ position:static; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  :root{ --gut:20px; }
  .section{ padding:64px 0; }
  .topbar__set:first-child{ display:none; }
  .nav{
    position:fixed; inset:76px 0 auto; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; padding:12px 20px 20px; gap:0; display:none; box-shadow:var(--shadow-md);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px 4px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav a::after{ display:none; }
  .burger{ display:block; order:3; }
  .head-actions{ margin-left:auto; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .chain{ grid-template-columns:1fr 1fr; }
  .chain__step:nth-child(2){ border-right:0; }
  .chain__step:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .field--split{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:28px; }
  .flash-stack{ left:16px; right:16px; top:84px; max-width:none; }
  .hero__plate{ position:static; margin-top:-4px; max-width:none; }
}
@media (max-width:520px){
  .chain{ grid-template-columns:1fr; }
  .chain__step{ border-right:0; border-bottom:1px solid var(--line); }
  .chain__step:last-child{ border-bottom:0; }
  .stat-row{ grid-template-columns:1fr; }
  .plate__row{ grid-template-columns:1fr; gap:2px; }
}

/* ---------- print (invoice) ---------- */
@media print{
  .masthead,.topbar,.footer,.no-print,.flash-stack{ display:none !important; }
  body{ background:#fff; font-size:12px; }
  .section{ padding:0; }
  .panel{ border:0; padding:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .ticker__track{ animation:none; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}