:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #193229;
  background: #f5f4ed;
  --ink: #193229;
  --deep-ink: #0c2119;
  --muted: #66766d;
  --paper: #fcfcf7;
  --canvas: #f5f4ed;
  --line: #d9ddd2;
  --lime: #c9fb54;
  --rose: #f2d9cf;
  --shadow: 0 24px 60px rgba(23, 50, 39, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1240px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.4rem 0;
}

.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: inline-grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: .58rem; background: var(--ink); color: var(--lime); font-size: .85rem; font-weight: 900; letter-spacing: -.08em; }
nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
nav a { color: #486056; font-size: .9rem; font-weight: 650; text-decoration: none; }
nav a:hover { color: var(--ink); }
.nav-api { padding: .5rem .8rem; border: 1px solid #cdd5cc; border-radius: 999px; }
main:not(.home-main) { width: min(1080px, 90vw); margin: 3rem auto; }

/* Landing page */
.home-main { width: min(1240px, calc(100% - 3rem)); margin: 0 auto; }
.home-hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr); align-items: center; gap: clamp(3rem, 7vw, 8rem); min-height: 655px; padding: 3.5rem 0 5.5rem; }
.hero-copy { max-width: 620px; }
.hero-kicker, .eyebrow { margin: 0 0 1rem; color: #567064; font-size: .76rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.hero-kicker span { color: #8fbc30; font-size: 1rem; }
h1, h2, h3, p { overflow-wrap: break-word; }
.home-hero h1 { max-width: 620px; margin: 0; color: var(--deep-ink); font-size: clamp(3.3rem, 6.2vw, 5.8rem); font-weight: 750; letter-spacing: -.078em; line-height: .94; }
.home-hero h1 em { color: #6e897c; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.075em; }
.hero-intro { max-width: 535px; margin: 1.75rem 0 0; color: #52675d; font-size: 1.1rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 1.45rem; margin-top: 2.1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; min-height: 3.25rem; padding: .8rem 1.15rem; border-radius: .8rem; font-weight: 800; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-lime { background: var(--lime); color: #15301d; box-shadow: 0 10px 22px rgba(113, 152, 36, .18); }
.text-link { color: #26483a; font-size: .95rem; font-weight: 750; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: .25em; }
.hero-footnote { margin: 2.3rem 0 0; color: #7b8b83; font-size: .78rem; }

.product-preview { position: relative; padding: 1.25rem 0 1.7rem; }
.product-preview::before { position: absolute; z-index: -1; top: 3%; right: -10%; width: 86%; height: 91%; border-radius: 3rem; background: var(--rose); content: ""; transform: rotate(4deg); }
.preview-window { overflow: hidden; border: 8px solid #143124; border-radius: 1.35rem; background: #fbfbf7; box-shadow: 17px 24px 0 #afc5b8, 0 32px 55px rgba(27, 52, 39, .18); transform: rotate(-3.2deg); }
.preview-window::before { display: block; height: 23px; border-bottom: 1px solid #e5e9e2; background: #f1f4ed; content: ""; }
.preview-sidebar { display: flex; float: left; flex-direction: column; align-items: center; width: 13%; min-height: 385px; padding: 1rem .4rem; background: #18362a; gap: 1rem; }
.preview-logo { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; margin-bottom: .6rem; border-radius: .45rem; background: var(--lime); color: #18362a; font-size: .75rem; font-weight: 900; }
.preview-nav { width: 1.1rem; height: .26rem; border-radius: 1rem; background: #718a7c; }
.preview-nav.active { background: var(--lime); }
.preview-nav-bottom { margin-top: auto; }
.preview-content { min-height: 385px; padding: 1.65rem 1.9rem; margin-left: 13%; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; color: #809087; font-size: .64rem; }
.preview-topline p { margin: 0; }
.preview-avatar { display: grid; width: 1.55rem; height: 1.55rem; place-items: center; border-radius: 50%; background: #e7c5b7; color: #5c4037; font-size: .6rem; font-weight: 800; }
.preview-title-row { display: flex; align-items: center; justify-content: space-between; margin-top: 1.35rem; }
.preview-title-row h2 { margin: 0; color: #1a3428; font-size: 1.35rem; letter-spacing: -.06em; }
.preview-new { padding: .42rem .55rem; border-radius: .35rem; background: #d7f580; color: #385121; font-size: .55rem; font-weight: 800; }
.preview-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1rem; }
.preview-stat-row div { padding: .75rem; border: 1px solid #e5e9e1; border-radius: .55rem; background: #fff; }
.preview-stat-row span, .preview-stat-row small { display: block; color: #819086; font-size: .54rem; }
.preview-stat-row strong { display: block; margin: .15rem 0; color: #173126; font-size: .95rem; letter-spacing: -.04em; }
.preview-panel { margin-top: 1rem; padding: .85rem; border-radius: .6rem; background: #f4f6f1; }
.preview-panel-heading { display: flex; justify-content: space-between; margin-bottom: .55rem; color: #769082; font-size: .57rem; }
.preview-panel-heading strong { color: #30483d; }
.preview-shipment { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: center; gap: .4rem; min-height: 1.7rem; padding: .28rem 0; border-top: 1px solid #e3e8e1; color: #75867c; font-size: .51rem; }
.preview-shipment b { color: #4d7636; font-size: .49rem; }
.preview-carrier { display: inline-grid; width: fit-content; padding: .18rem .27rem; border-radius: .2rem; font-size: .45rem; font-weight: 900; letter-spacing: -.03em; }
.preview-carrier.dhl { background: #ffe055; color: #bd1926; }.preview-carrier.post { background: #ffe900; color: #202e83; }.preview-carrier.ups { background: #402515; color: #f3c467; }
.preview-caption { position: absolute; right: 6%; bottom: 0; margin: 0; color: #596d62; font-size: .73rem; font-weight: 700; }.preview-caption span { color: #b2e331; font-size: .65rem; }

.benefits { padding: 6.25rem 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.section-heading h2, .how-it-works h2, .registration-copy h2 { max-width: 620px; margin: 0; color: var(--deep-ink); font-size: clamp(2rem, 3.7vw, 3.45rem); letter-spacing: -.07em; line-height: 1; }
.benefit-grid { display: grid; grid-template-columns: 1.1fr .95fr .95fr; gap: 1rem; }
.benefit-card { min-height: 280px; padding: 1.5rem; border-radius: 1.1rem; }
.benefit-card h3 { margin: 4.3rem 0 .65rem; font-size: 1.25rem; letter-spacing: -.04em; }
.benefit-card p { max-width: 300px; margin: 0; font-size: .92rem; line-height: 1.6; }
.benefit-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: .75rem; font-size: 1.45rem; font-weight: 500; }
.benefit-dark { background: var(--deep-ink); color: #ebf0e9; }.benefit-dark .benefit-icon { background: var(--lime); color: var(--deep-ink); }.benefit-dark p { color: #bdd0c3; }
.benefit-lime { background: var(--lime); color: #173124; }.benefit-lime .benefit-icon { background: #e5ffad; }
.benefit-paper { border: 1px solid #dfe3dc; background: var(--paper); color: #21382e; }.benefit-paper .benefit-icon { background: var(--rose); }

.how-it-works { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6rem; padding: 5.8rem 0; border-top: 1px solid var(--line); }
.steps { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }.steps li > span { color: #80a339; font-size: .75rem; font-weight: 850; letter-spacing: .06em; }.steps h3 { margin: 0 0 .25rem; color: var(--ink); font-size: 1rem; }.steps p { margin: 0; color: #65766d; font-size: .9rem; }

.registration-section { display: grid; grid-template-columns: .9fr 1fr; gap: clamp(2rem, 8vw, 8rem); align-items: center; margin-bottom: 5rem; padding: clamp(2rem, 6vw, 5rem); border-radius: 1.5rem; background: #e7ecdf; }
.registration-copy p:not(.eyebrow) { max-width: 445px; margin: 1.35rem 0 0; color: #56695f; line-height: 1.65; }
.registration-note { display: flex; gap: .55rem; margin-top: 1.6rem; color: #52655a; font-size: .82rem; }.registration-note span { color: #61881f; font-weight: 900; }
.card { padding: 1.6rem; border-radius: 1rem; background: #fffefa; box-shadow: var(--shadow); }.form-card { max-width: 520px; }.form-card h3 { margin: 0 0 .4rem; color: var(--deep-ink); font-size: 1.35rem; letter-spacing: -.04em; }
form { display: grid; gap: .9rem; }label { display: grid; gap: .37rem; color: #32493d; font-size: .78rem; font-weight: 750; }input { width: 100%; border: 1px solid #cbd4c9; border-radius: .55rem; padding: .72rem .75rem; background: #fff; color: var(--ink); font: inherit; }input:focus { border-color: #769d2d; outline: 3px solid rgba(182, 232, 81, .28); }small { margin-top: -.5rem; color: #73837a; font-size: .71rem; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3rem; border: 0; border-radius: .6rem; padding: .75rem 1rem; background: var(--deep-ink); color: #f6f9ed; cursor: pointer; font: inherit; font-weight: 800; }button:hover { background: #234c39; }button:focus-visible, a:focus-visible { outline: 3px solid #85ad35; outline-offset: 3px; }button.secondary { background: #667085; }.notice { min-height: 1.3em; margin: 0; color: #9a3434; font-size: .8rem; }.notice.success { color: #397224; }
.home-footer { display: flex; align-items: center; gap: .6rem; padding: 0 0 2.5rem; color: #74847c; font-size: .8rem; }.home-footer .brand-mark { width: 1.5rem; height: 1.5rem; border-radius: .42rem; font-size: .68rem; }.home-footer a { margin-left: auto; color: #426152; font-weight: 700; text-decoration: none; }

/* Portal and administration views */
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: .3rem 0 1rem; }h2 { margin-top: 0; font-size: 1.1rem; }.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }.dashboard-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }.dashboard-header h1 { color: var(--deep-ink); font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -.07em; }.dashboard-header .eyebrow { margin-bottom: .35rem; }li { margin: .45rem 0; }.pending-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #e3e7ee; }.pending-item:last-child { border-bottom: 0; }
.admin-layout { display: grid; gap: 1rem; }.admin-section, .purchase-section { margin-top: 1.25rem; }.section-title { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }.section-title .eyebrow { margin-bottom: .45rem; }.section-title h2 { color: var(--deep-ink); font-size: 1.35rem; letter-spacing: -.045em; }.section-intro { max-width: 760px; margin: .35rem 0 1.1rem; color: #607268; font-size: .9rem; line-height: 1.55; }.section-intro code { padding: .1rem .3rem; border-radius: .25rem; background: #e1e7dc; color: #324a3c; }.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }.form-grid .form-span-2 { grid-column: 1 / -1; }.form-grid select { width: 100%; min-height: 2.75rem; border: 1px solid #cbd4c9; border-radius: .55rem; padding: .55rem .7rem; background: #fff; color: var(--ink); font: inherit; }.form-grid select:focus { border-color: #769d2d; outline: 3px solid rgba(182, 232, 81, .28); }.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }.compact-form { min-height: 100%; padding: 1rem; border: 1px solid #dce2d8; border-radius: .8rem; background: #f9faf5; }.compact-form h3 { grid-column: 1 / -1; margin: 0; color: #1d372c; font-size: 1rem; }.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; margin-top: 1.25rem; }.plan-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 160px; padding: 1rem; border: 1px solid #dce2d8; border-radius: .8rem; background: #f9faf5; }.plan-card h3 { margin: .55rem 0 .35rem; color: #1d372c; font-size: 1rem; }.plan-card p { margin: 0; color: #4e655a; font-size: .82rem; line-height: 1.45; }.plan-card .plan-description { margin-top: .5rem; color: #718177; }.plan-card .checksum { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }.plan-card button { margin-top: auto; }.plan-card .compact { min-height: 2.1rem; padding: .35rem .65rem; font-size: .75rem; }.status-pill { display: inline-flex; padding: .22rem .48rem; border-radius: 999px; background: #e7d7d2; color: #77443b; font-size: .68rem; font-weight: 800; }.status-pill.active { background: #dff4a3; color: #42661f; }

@media (max-width: 900px) { .home-hero { grid-template-columns: 1fr; gap: 3.5rem; padding-top: 2.5rem; }.hero-copy { max-width: 690px; }.product-preview { width: min(610px, 92%); margin: 0 auto; }.benefit-grid { grid-template-columns: 1fr 1fr; }.benefit-card:first-child { grid-column: 1 / -1; min-height: 225px; }.benefit-card h3 { margin-top: 2.7rem; }.how-it-works, .registration-section { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 640px) { .site-header, .dashboard-header { align-items: flex-start; flex-direction: column; }.site-header, .home-main { width: min(100% - 2rem, 1240px); }.site-header { padding: 1rem 0; }.site-header nav { gap: .7rem 1rem; }.nav-api { display: none; }.home-hero { min-height: 0; padding: 2.5rem 0 4rem; }.home-hero h1 { font-size: clamp(2.95rem, 16vw, 4.4rem); }.hero-actions { align-items: flex-start; flex-direction: column; gap: 1.1rem; }.product-preview { width: 94%; }.product-preview::before { right: -10%; width: 100%; }.preview-window { border-width: 5px; box-shadow: 10px 14px 0 #afc5b8, 0 22px 45px rgba(27, 52, 39, .18); }.preview-sidebar { min-height: 315px; }.preview-content { min-height: 315px; padding: 1rem; }.preview-title-row { margin-top: .85rem; }.preview-panel { margin-top: .6rem; padding: .6rem; }.preview-shipment { grid-template-columns: 2rem 1fr; }.preview-shipment b { display: none; }.benefits { padding: 4rem 0; }.section-heading { display: block; }.section-heading h2 { font-size: 2.35rem; }.benefit-grid { grid-template-columns: 1fr; }.benefit-card, .benefit-card:first-child { min-height: 215px; }.how-it-works { gap: 2rem; padding: 4rem 0; }.registration-section { margin-bottom: 3.5rem; padding: 1.35rem; border-radius: 1rem; }.card { padding: 1.2rem; }.home-footer { padding-bottom: 1.5rem; }.form-grid, .management-grid { grid-template-columns: 1fr; }.form-grid .form-span-2 { grid-column: auto; } }