:root{
  --page:#F4F4F1;
  --card:#FFFFFF;
  --ink:#151514;
  --grey:#6E6E6B;
  --grey-2:#8B8B88;
  --inner:#F3F3F0;
  --line:#E7E7E3;
  --shadow:0 1px 2px rgba(20,20,18,.04), 0 6px 22px rgba(20,20,18,.055);
  --shadow-hover:0 2px 4px rgba(20,20,18,.06), 0 12px 30px rgba(20,20,18,.09);
  --radius:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */
header.masthead{background:var(--card);border-bottom:1px solid var(--line)}
header.masthead .wrap{padding:30px 28px}
.wordmark{
  display:block;text-align:center;font-family:"Source Serif 4",Georgia,serif;font-weight:500;
  font-size:22px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
  text-indent:.34em;text-decoration:none;
}

/* ---------- menu (index) ---------- */
main .wrap{padding:52px 28px 40px}
.layout{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}

.passport{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:44px;display:flex;flex-direction:column;
}
.passport h1{font-weight:700;font-size:clamp(32px,4.4vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0}
.idrow{display:flex;align-items:center;gap:10px;margin-top:20px;color:var(--grey)}
.idrow .qr{flex:0 0 auto;color:var(--grey-2)}
.idrow .id{font-size:18px;letter-spacing:.02em;word-break:break-all}

.data-box{margin-top:auto;background:var(--inner);border-radius:5px;padding:26px 28px}
.data-box .dh{font-weight:700;font-size:15.5px;color:var(--grey);margin-bottom:16px}
.data-box .row{display:flex;align-items:center;gap:13px;padding:5px 0}
.data-box .row .chk{flex:0 0 auto;color:var(--grey-2)}
.data-box .row .t{font-size:17px;color:var(--grey)}

.menu{display:flex;flex-direction:column;gap:20px}
.item{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:25px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-decoration:none;color:var(--ink);flex:1;
  transition:box-shadow .17s ease,transform .17s ease;
}
.item .name{font-weight:700;font-size:21px;letter-spacing:-.005em}
.item .chev{flex:0 0 auto;color:var(--ink);transition:transform .17s ease}
.item:hover,.item:focus-visible{box-shadow:var(--shadow-hover);transform:translateY(-1px);outline:none}
.item:hover .chev,.item:focus-visible .chev{transform:translateX(4px)}

/* ---------- inner category pages ---------- */
.page{max-width:820px;margin:0 auto}
.back{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--grey);
  text-decoration:none;font-weight:600;margin-bottom:26px;
}
.back:hover{color:var(--ink)}
.back .bchev{transition:transform .15s ease}
.back:hover .bchev{transform:translateX(-3px)}

.page-head{margin-bottom:26px}
.page-head .crumb{font-size:12.5px;letter-spacing:.03em;color:var(--grey-2);margin-bottom:11px;word-break:break-all}
.page-head h1{font-weight:700;font-size:clamp(28px,4vw,38px);line-height:1.1;letter-spacing:-.015em;margin:0}
.page-head .prod-line{color:var(--grey);font-size:16px;margin-top:10px}
.page-head .flags{margin-top:16px;display:flex;flex-wrap:wrap;gap:9px}

.subcard{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 30px;margin-top:20px;
}
.subhead{display:flex;align-items:center;flex-wrap:wrap;gap:11px;margin-bottom:4px}
.subhead h2{
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);
  font-weight:700;margin:0;
}

.fields{margin:0}
.field{
  display:grid;grid-template-columns:minmax(150px,38%) 1fr;gap:20px;
  padding:14px 0;border-top:1px solid var(--line);
}
.field:first-of-type{border-top:0}
.field dt{margin:0;color:var(--grey);font-size:14.5px;line-height:1.45}
.field dd{margin:0;color:var(--ink);font-size:15.5px;font-weight:500;line-height:1.5}

/* badges + notes */
.badge{
  display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:100px;border:1px solid transparent;
}
.badge .d{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.badge-restricted{background:#EEF0F1;color:#48535E;border-color:#DCE0E3}
.badge-restricted .d{background:#7B8794}
.badge-caution{background:#F6EBD6;color:#835412;border-color:#E9D6B2}
.badge-caution .d{background:#B67D22}

.note{background:var(--inner);border-radius:5px;padding:13px 15px;font-size:13.5px;color:var(--grey);line-height:1.55;margin:14px 0 2px}
.note.caution{background:#FaF3E4;color:#6F5416}

/* bottom page navigation */
.pagenav{
  max-width:820px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.pagenav a{font-size:13.5px;font-weight:600;color:var(--grey);text-decoration:none;line-height:1.35}
.pagenav a:hover{color:var(--ink)}
.pagenav .mid a{color:var(--ink)}
.pagenav .right{text-align:right}

/* ---------- footer ---------- */
footer{padding:40px 0 60px}
footer .wrap{padding:0 28px;max-width:820px}
.sample-flag{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--line);border-radius:4px;padding:6px 12px;background:var(--card);
}
.powered{margin:16px 0 0;font-size:13px;color:var(--grey-2)}
.powered strong{color:var(--ink);font-weight:700}

body:has(.layout) footer .wrap{max-width:1120px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:760px){
  .layout{grid-template-columns:1fr;gap:20px}
  .passport{padding:34px 30px}
  .data-box{margin-top:32px}
}
@media (max-width:560px){
  .field{grid-template-columns:1fr;gap:3px}
  .subcard{padding:24px 22px}
  .pagenav{font-size:13px}
}