@font-face{font-family:Edu;src:url('edu-diatype-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Edu;src:url('edu-diatype-light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:Portrait;src:url('portrait-light.otf') format('opentype');font-weight:300;font-display:swap}
:root{--ink:#2a2a2a;--muted:#636363;--line:#e6e6e6;--paper:#f7f7f1;--white:#fff;--blue:#3e6cff;--blue-soft:#dfecff;--green:#c3ffb8;--green-ink:#255535;--gray-soft:#f0f0ec;--radius:22px;--shadow:0 18px 60px rgba(42,42,42,.07)}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:Edu,'Arial',sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 88% 0%,rgba(223,236,255,.82),transparent 34rem),var(--paper)}
a{color:inherit}
.page-shell{max-width:1160px;margin:0 auto;padding:0 36px}
.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(42,42,42,.11)}
.brand{display:inline-flex;align-items:center;text-decoration:none}.brand img{width:252px;height:auto;display:block}
.secure-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;letter-spacing:.015em}.secure-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(62,108,255,.12)}
.intro{padding:86px 0 96px;max-width:880px}.eyebrow{margin:0 0 12px;color:var(--blue);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
h1,h2,p{margin-top:0}h1{font-family:Portrait,Georgia,serif;font-size:clamp(42px,6vw,70px);line-height:1.02;font-weight:300;letter-spacing:-.035em;margin-bottom:18px}h2{font-family:Portrait,Georgia,serif;font-size:29px;line-height:1.1;font-weight:300;letter-spacing:-.02em;margin:0}
.lede{max-width:590px;color:var(--muted);font-size:18px;line-height:1.55;margin-bottom:38px}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.demo-card{min-height:148px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;align-items:flex-start;gap:13px;text-decoration:none;box-shadow:0 4px 16px rgba(42,42,42,.025);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.demo-card:hover{transform:translateY(-3px);border-color:rgba(62,108,255,.35);box-shadow:var(--shadow)}.demo-card>span:nth-child(2){display:grid;gap:6px;padding-top:2px}.demo-card strong{font-size:15px;font-weight:400}.demo-card small{font-size:13px;line-height:1.4;color:var(--muted)}.demo-icon{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:grid;place-items:center;font-size:13px}.icon-blue{color:var(--blue);background:var(--blue-soft)}.icon-green{color:var(--green-ink);background:var(--green)}.icon-gray{color:var(--muted);background:var(--gray-soft)}.arrow{margin-left:auto;color:var(--blue);font-size:16px}
.prototype-note{margin:22px 0 0;padding:14px 16px;background:rgba(195,255,184,.45);border-radius:12px;color:#39513c;font-size:13px;line-height:1.5}.prototype-note strong{font-weight:400}
.content{padding:27px 0 66px}.back-link{font-size:14px;color:var(--muted);text-decoration:none;display:inline-block;margin:0 0 26px}.back-link:hover{color:var(--blue)}.demo-banner{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--muted);font-size:10px;letter-spacing:.12em}.demo-banner-mark{display:grid;place-items:center;width:21px;height:21px;background:var(--green);color:var(--green-ink);border-radius:7px;font-size:11px;letter-spacing:0}.demo-separator{color:#b4b4ad}
.hero-card{position:relative;overflow:hidden;min-height:184px;border-radius:var(--radius);padding:32px 36px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.hero-card:after{content:'';position:absolute;right:-54px;bottom:-123px;width:250px;height:250px;border-radius:50%;background:var(--blue-soft);opacity:.7;pointer-events:none}.hero-card>div,.hero-card>.type-badge{position:relative;z-index:1}.hero-card h1{font-size:clamp(37px,5vw,56px);margin-bottom:10px}.hero-subtitle{color:var(--muted);margin:0;font-size:15px}.type-badge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 13px;border-radius:999px;font-size:12px;white-space:nowrap}.type-badge.blue{background:var(--blue-soft);color:#3156c2}.type-badge.green{background:var(--green);color:var(--green-ink)}.type-badge.gray{background:var(--gray-soft);color:var(--muted)}
.data-section{margin-top:25px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:25px 26px 8px;box-shadow:0 6px 25px rgba(42,42,42,.03)}.compact-section{padding-bottom:24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:20px}.section-heading .eyebrow{margin-bottom:6px}.count-badge{border:1px solid var(--line);background:var(--paper);color:var(--muted);padding:7px 11px;border-radius:999px;font-size:12px;white-space:nowrap}.table-wrap{width:100%;overflow-x:auto}table{width:100%;min-width:760px;border-collapse:collapse;text-align:left}th{padding:11px 12px;background:var(--paper);color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}th:first-child{border-radius:9px 0 0 9px}th:last-child{border-radius:0 9px 9px 0}td{padding:14px 12px;font-size:13px;line-height:1.45;vertical-align:top;border-bottom:1px solid #ededeb;color:#515151}tbody tr:last-child td{border-bottom:0}.emphasis{color:var(--ink);font-weight:400}.nowrap{white-space:nowrap}.numeric{text-align:right}.status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 9px;border-radius:999px;background:var(--gray-soft);font-size:11px;color:var(--muted)}.status:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.status.positive{background:rgba(195,255,184,.46);color:#34613c}.status.blue{background:var(--blue-soft);color:#3456b2}.status.muted{background:#f1f1ef;color:#777}
.parcel-hero{background:var(--blue);color:var(--white);border:0}.parcel-hero:after{background:rgba(195,255,184,.22)}.parcel-hero .eyebrow,.parcel-hero .hero-subtitle{color:rgba(255,255,255,.78)}.parcel-hero .type-badge{background:var(--green);color:var(--green-ink)}.dot-separator{margin:0 7px;color:var(--green)}
.parcel-panel{margin-top:25px;padding:25px 29px 30px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 25px rgba(42,42,42,.03)}.parcel-code{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 20px;border-bottom:1px solid var(--line)}.parcel-code span,.parcel-details span{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.parcel-code strong{font-size:24px;letter-spacing:.04em;color:var(--blue);font-weight:400}.parcel-details{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px;padding-top:21px}.parcel-details>div{display:grid;gap:9px}.parcel-details>div>span{font-size:11px}.parcel-details>div>strong{font-size:15px;font-weight:400}.parcel-details .status{justify-self:start}
.holder-panel{display:flex;align-items:center;gap:16px;margin-top:16px;padding:22px 25px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}.holder-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--green);color:var(--green-ink);font-size:18px}.holder-panel .eyebrow{margin-bottom:6px}.holder-panel h2{font-size:25px}
.empty-state{min-height:460px;margin-top:5px;padding:70px 28px 66px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.empty-icon{position:relative;width:76px;height:76px;margin-bottom:29px;border-radius:25px;background:var(--blue-soft);display:grid;place-items:center}.empty-icon:before,.empty-icon:after,.empty-icon span{content:'';position:absolute;background:var(--blue);border-radius:9px}.empty-icon:before{width:29px;height:3px;transform:rotate(45deg)}.empty-icon:after{width:29px;height:3px;transform:rotate(-45deg)}.empty-state h1{font-size:clamp(39px,5vw,58px);margin-bottom:14px}.empty-copy{max-width:480px;color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 22px}.footer{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(42,42,42,.11);color:var(--muted);font-size:12px}.footer span:first-child{color:var(--ink)}
@media(max-width:820px){.page-shell{padding:0 22px}.intro{padding:65px 0}.demo-grid{grid-template-columns:1fr}.demo-card{min-height:100px;align-items:center}.hero-card{padding:27px;min-height:165px}.data-section{padding:22px 17px 8px}.parcel-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.footer{padding:17px 0;align-items:flex-start;flex-direction:column;justify-content:center}}
@media(max-width:520px){.page-shell{padding:0 16px}.topbar{height:82px}.brand img{width:205px}.secure-label{font-size:0;gap:0}.secure-dot{width:9px;height:9px}.content{padding-top:20px}.hero-card{padding:23px 20px;min-height:152px}.hero-card h1{font-size:39px}.type-badge{font-size:11px;min-height:29px;padding:0 10px}.parcel-code{align-items:flex-start;flex-direction:column;gap:9px}.parcel-code strong{font-size:21px}.parcel-panel{padding:22px 19px}.empty-state{padding:52px 22px;min-height:420px}.empty-copy{font-size:15px}h2{font-size:26px}}
@media print{body{background:#fff}.page-shell{max-width:none;padding:0 18px}.topbar{height:75px}.back-link,.demo-banner,.footer .no-print{display:none}.content{padding:10px 0 0}.hero-card,.data-section,.parcel-panel,.holder-panel,.empty-state{box-shadow:none;break-inside:avoid}.data-section{overflow:visible}.table-wrap{overflow:visible}table{min-width:0;font-size:10px}th,td{padding:7px 6px;font-size:9px}}

.open-form{margin-top:4px}.open-button{min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--blue);color:var(--white);font:inherit;font-size:15px;cursor:pointer;box-shadow:0 8px 20px rgba(62,108,255,.18)}.open-button:hover{background:#315be8}.open-button:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Mobile refinements: make dense records scannable without sideways scrolling. */
@media (max-width: 640px) {
  html { font-size: 15px; }
  .page-shell { padding-inline: 18px; }
  .topbar { height: 72px; gap: 12px; }
  .brand img { width: min(48vw, 184px); }
  .secure-label { flex: 0 0 auto; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); font-size: 10px; white-space: nowrap; }
  .secure-dot { width: 7px; height: 7px; box-shadow: none; }
  .intro { padding: 48px 0 54px; }
  .intro h1 { max-width: 8ch; font-size: clamp(40px, 12vw, 56px); }
  .lede { margin-bottom: 25px; font-size: 16px; }
  .demo-grid { gap: 10px; }
  .demo-card { min-height: 82px; padding: 16px; border-radius: 15px; gap: 12px; }
  .demo-card strong { font-size: 15px; }
  .demo-card small { font-size: 12px; }
  .prototype-note { margin-top: 16px; padding: 12px 13px; font-size: 12px; }
  .content { padding: 18px 0 36px; }
  .back-link { min-height: 40px; display: inline-flex; align-items: center; margin-bottom: 13px; }
  .demo-banner { margin-bottom: 12px; font-size: 9px; }
  .hero-card { min-height: 0; padding: 23px 20px; flex-direction: column; align-items: flex-start; gap: 13px; border-radius: 18px; }
  .hero-card h1 { max-width: 100%; font-size: clamp(32px, 9vw, 43px); overflow-wrap: anywhere; }
  .hero-subtitle { font-size: 14px; line-height: 1.5; }
  .hero-card:after { right: -115px; bottom: -165px; }
  .data-section { margin-top: 15px; padding: 19px 15px 9px; border-radius: 18px; }
  .section-heading { align-items: flex-start; margin-bottom: 14px; }
  .section-heading h2 { font-size: 24px; }
  .count-badge { padding: 6px 8px; font-size: 10px; }
  .table-wrap { overflow: visible; }
  table { display: block; min-width: 0; width: 100%; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  tbody { display: grid; gap: 10px; }
  tbody tr { display: grid; gap: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
  td, tbody tr:last-child td { display: grid; grid-template-columns: minmax(82px, 30%) minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #ededeb; font-size: 12px; overflow-wrap: anywhere; }
  td:before { content: attr(data-label); color: var(--muted); font-size: 10px; letter-spacing: .035em; text-transform: uppercase; }
  td:last-child { border-bottom: 0; }
  td.numeric { text-align: left; }
  td .status { justify-self: start; }
  .parcel-panel { margin-top: 15px; padding: 20px 17px; border-radius: 18px; }
  .parcel-code { padding-bottom: 15px; }
  .parcel-code span { font-size: 10px; }
  .parcel-code strong { font-size: 22px; }
  .parcel-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding-top: 17px; }
  .parcel-details>div { gap: 6px; min-width: 0; }
  .parcel-details>div>span { font-size: 9px; letter-spacing: .04em; }
  .parcel-details>div>strong { font-size: 14px; overflow-wrap: anywhere; }
  .holder-panel { margin-top: 10px; padding: 17px; gap: 12px; border-radius: 18px; }
  .holder-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; }
  .holder-panel h2 { font-size: 21px; overflow-wrap: anywhere; }
  .holder-panel .eyebrow { font-size: 9px; line-height: 1.5; }
  .empty-state { min-height: 0; padding: 54px 20px; border-radius: 18px; }
  .empty-icon { width: 64px; height: 64px; margin-bottom: 22px; border-radius: 21px; }
  .empty-state h1 { font-size: clamp(35px, 10vw, 46px); }
  .empty-copy { font-size: 14px; }
  .footer { min-height: 0; padding: 17px 0 22px; gap: 5px; font-size: 11px; }
}

@media (max-width: 360px) {
  .page-shell { padding-inline: 14px; }
  .brand img { width: 45vw; }
  .secure-label { padding: 6px 7px; font-size: 9px; }
  .parcel-details { grid-template-columns: 1fr 1fr; }
  td, tbody tr:last-child td { grid-template-columns: 74px minmax(0, 1fr); gap: 7px; font-size: 11px; }
}

.open-form { margin-top: 4px; }
.open-button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--blue); color: var(--white); font: inherit; font-size: 15px; cursor: pointer; box-shadow: 0 8px 20px rgba(62,108,255,.18); }
.open-button:hover { background: #315be8; }
.open-button:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }