/* PostBD — static site CSS (compiled from the design-system tokens, no framework). */

/* ---- Tokens ---- */
:root {
  --ink-950: #0B0E12; --ink-900: #14181E; --ink-800: #1F242C; --ink-700: #2C333D;
  --gray-600: #4A5560; --gray-500: #66717D; --gray-400: #8B95A1; --gray-300: #C2C9D2;
  --gray-200: #DEE3E9; --gray-100: #EEF1F4; --gray-50: #F7F8FA; --white: #FFFFFF;
  --brand-700: #A93408; --brand-600: #CC400C; --brand-500: #EB5017; --brand-400: #F2703F;
  --brand-200: #F9C4AC; --brand-100: #FCDFD0; --brand-50: #FDF0E8;
  --status-booked: var(--gray-500); --status-booked-bg: var(--gray-100);
  --status-transit: #1A5FD0; --status-transit-bg: #E7EFFC;
  --status-atbranch: #9A6700; --status-atbranch-bg: #FBF0D9;
  --status-ready: var(--brand-600); --status-ready-bg: var(--brand-50);
  --status-delivered: #1A7F4E; --status-delivered-bg: #E3F3EA;
  --status-exception: #C42847; --status-exception-bg: #FBE7EC;
  --text-primary: var(--ink-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500);
  --text-inverse: #fff; --text-inverse-dim: rgba(255,255,255,0.64);
  --surface-page: var(--gray-50); --surface-card: #fff; --surface-sunken: var(--gray-100);
  --surface-ink: var(--ink-900); --surface-ink-raised: var(--ink-800);
  --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-inverse: rgba(255,255,255,0.14);
  --focus-ring: 0 0 0 3px rgba(235, 80, 23, 0.32);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(11,14,18,0.06); --shadow-raised: 0 4px 12px rgba(11,14,18,0.10);
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 120ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; }

/* ---- Logo ---- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink-900); }
.logo__word em { font-style: normal; color: var(--brand-500); }
.logo--inverse .logo__word { color: var(--text-inverse); }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(1px); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn { height: 40px; padding: 0 16px; font-size: 15px; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 17px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn--inverse { background: #fff; color: var(--ink-900); }
.btn--inverse:hover { background: var(--gray-100); }

/* ---- Nav ---- */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(247,248,250,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); }
.nav__in { max-width: 1120px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 14px; }
.nav__links { display: flex; gap: 4px; flex: 1; margin-left: 14px; }
.nav__links a { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 8px 12px; border-radius: var(--radius-md); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav__links a:hover { color: var(--text-primary); background: var(--gray-100); }

/* ---- Hero ---- */
.hero { background: var(--surface-ink); color: var(--text-inverse); position: relative; overflow: hidden; }
.hero__in { max-width: 1120px; margin: 0 auto; padding: 96px 32px 110px; position: relative; }
.hero__route { position: absolute; right: -40px; top: 70px; width: 520px; pointer-events: none; }
.hero__kicker { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-400); border: 1px solid var(--border-inverse); border-radius: var(--radius-pill); padding: 6px 14px; margin-bottom: 28px; }
.hero h1 { font-family: var(--font-display); font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 20px; max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--brand-500); }
.hero__lede { font-size: 20px; color: var(--text-inverse-dim); margin: 0 0 36px; max-width: 46ch; }
.hero__ctas { display: flex; gap: 12px; }
.hero__stats { display: flex; gap: 48px; margin-top: 64px; }
.hero__stats strong { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.hero__stats span { font-size: 13px; color: var(--text-inverse-dim); }

/* ---- Sections ---- */
.sect { max-width: 1120px; margin: 0 auto; padding: 88px 32px; }
.sect--narrow { max-width: 720px; }
.sect__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-600); margin: 0 0 10px; }
.sect h2 { font-family: var(--font-display); font-size: 44px; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 12px; line-height: 1.1; }
.sect__lede { font-size: 17px; color: var(--text-secondary); margin: 0 0 44px; max-width: 56ch; }

/* ---- How it works ---- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how__step { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px; }
.how__num { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.08em; }
.how__step h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 14px 0 6px; }
.how__step p { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* ---- Track band & form ---- */
.band { background: var(--surface-card); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.band__in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.track-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.track-form__row { display: flex; gap: 10px; }
.input { flex: 1; height: 40px; padding: 0 12px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 15px; color: var(--text-primary); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.input--mono { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }

/* ---- Pricing ---- */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price__card { background: var(--surface-card); border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.price__card--featured { border-color: var(--brand-500); }
.price__size { display: flex; align-items: center; justify-content: space-between; }
.price__size strong { font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.price__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-600); background: var(--brand-50); border-radius: var(--radius-pill); padding: 4px 10px; }
.price__amount { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.02em; }
.price__amount small { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.price__desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; }
.price__feat { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.price__feat li { padding-left: 22px; position: relative; }
.price__feat li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; background: var(--status-delivered); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---- Branches ---- */
.branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.branch { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px; }
.branch h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.branch p { margin: 0 0 4px; font-size: 13px; color: var(--text-secondary); }
.branch small { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.branch--soon { border-style: dashed; background: transparent; box-shadow: none; }

/* ---- Cards, badges, code chips (track page) ---- */
.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card--pad { padding: 24px; }
.muted { color: var(--text-secondary); font-size: 13px; }
.code-chip { display: inline-block; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 5px 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; font-weight: 600; }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--booked { color: var(--status-booked); background: var(--status-booked-bg); }
.badge--transit { color: var(--status-transit); background: var(--status-transit-bg); }
.badge--atbranch { color: var(--status-atbranch); background: var(--status-atbranch-bg); }
.badge--ready { color: var(--status-ready); background: var(--status-ready-bg); }
.badge--delivered { color: var(--status-delivered); background: var(--status-delivered-bg); }
.badge--exception { color: var(--status-exception); background: var(--status-exception-bg); }
.track-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__row { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.timeline__row:last-child { padding-bottom: 0; }
.timeline__node { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 1; }
.timeline__row--done .timeline__node { background: var(--ink-900); }
.timeline__row--done .timeline__node::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.timeline__row--current .timeline__node { background: var(--brand-500); box-shadow: 0 0 0 5px var(--brand-50); }
.timeline__row--current .timeline__node::after { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.timeline__row:not(:last-child)::before { content: ''; position: absolute; left: 10px; top: 26px; bottom: 4px; border-left: 2px solid var(--ink-900); }
.timeline__row--current:not(:last-child)::before { border-left-style: dashed; border-left-color: var(--gray-300); }
.timeline__label { font-size: 15px; font-weight: 600; }
.timeline__row--current .timeline__label { color: var(--brand-600); }
.timeline__detail { font-size: 13px; color: var(--text-secondary); }
.timeline__time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ---- Footer ---- */
.footer { background: var(--surface-ink); color: var(--text-inverse); }
.footer__in { max-width: 1120px; margin: 0 auto; padding: 64px 32px 40px; }
.footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 48px; border-bottom: 1px solid var(--border-inverse); flex-wrap: wrap; }
.footer__cta h2 { font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.footer__cols { display: flex; justify-content: space-between; gap: 32px; padding-top: 36px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.footer__col--brand p { color: var(--text-inverse-dim); max-width: 26ch; margin: 4px 0 0; }
.footer__col strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-inverse-dim); font-weight: 600; }
.footer__col a { color: var(--text-inverse-dim); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: var(--text-inverse); }
.footer__legal { margin-top: 44px; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--text-inverse-dim); flex-wrap: wrap; }

/* ---- Auth & account ---- */
.auth-form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.auth-form .input { width: 100%; height: 52px; padding: 0 16px; font-size: 17px; border-radius: var(--radius-md); }
.field-hint { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.field-error { font-size: 12px; font-weight: 400; color: var(--status-exception); }
.auth-form a { color: var(--brand-600); }
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.history-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 32px 0 12px; }
.history { display: flex; flex-direction: column; gap: 10px; }
.history-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px 16px; text-decoration: none; color: var(--text-primary); transition: border-color var(--dur-fast) var(--ease-out); }
.history-row:hover { border-color: var(--gray-400); }
.history-route { font-size: 13px; font-weight: 600; flex: 1; }
.history-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

/* ---- Booking ---- */
.book-sizes { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.book-sizes legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.book-size input { position: absolute; opacity: 0; pointer-events: none; }
.book-size__card { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: 14px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); height: 100%; }
.book-size__card strong { font-family: var(--font-display); font-size: 17px; }
.book-size__card em { font-style: normal; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.book-size__card small { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.book-size input:checked + .book-size__card { border-color: var(--brand-500); background: var(--brand-50); }
.book-size input:checked + .book-size__card strong, .book-size input:checked + .book-size__card em { color: var(--brand-600); }
.book-size input:focus-visible + .book-size__card { box-shadow: var(--focus-ring); }
.book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book-row label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
select.input { appearance: auto; }
.book-insure { flex-direction: row !important; align-items: center; gap: 10px !important; font-weight: 400 !important; font-size: 15px !important; cursor: pointer; }
.book-insure input { width: 18px; height: 18px; accent-color: var(--brand-500); }
.book-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--gray-100); padding-top: 14px; font-size: 15px; }
.book-total strong { font-family: var(--font-display); font-size: 25px; font-weight: 700; }
.code-chip--lg { font-size: 20px; padding: 10px 16px; }
.book-done { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.book-done__row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---- Pickup ---- */
.hero__more { color: var(--text-inverse-dim); font-size: 15px; font-weight: 600; text-decoration: none; align-self: center; margin-left: 8px; transition: color var(--dur-fast) var(--ease-out); }
.hero__more:hover { color: var(--text-inverse); }
.pickup-panel { background: var(--surface-ink); color: var(--text-inverse); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 16px; }
.pickup-panel__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.code-chip--ink { background: var(--surface-ink-raised); border-color: var(--surface-ink-raised); color: var(--text-inverse); }
.pickup-panel__hint { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--text-inverse-dim); }
.pickup-panel__code { font-family: var(--font-mono); font-size: 48px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; }
.pickup-panel__where { margin: 0; font-size: 13px; color: var(--text-inverse-dim); }
.pickup-panel__steps { margin: 14px 0 0; padding: 0 0 0 18px; text-align: left; font-size: 13px; color: var(--text-inverse-dim); display: flex; flex-direction: column; gap: 6px; }

/* ---- Responsive ---- */
@media (max-width: 1240px) { .hero__route { display: none; } }
@media (max-width: 900px) {
  .hero h1 { font-size: 44px; }
  .sect h2 { font-size: 32px; }
  .how, .price, .branches { grid-template-columns: 1fr; }
  .book-sizes, .book-row { grid-template-columns: 1fr; }
  .band__in { grid-template-columns: 1fr; gap: 28px; }
  .nav__links { display: none; }
  .hero__stats { flex-wrap: wrap; gap: 28px; }
}