/*
  PackSmart static pages (landing, legal, 404).
  Colours mirror lib/core/theme/app_colors.dart in the app. System fonts only:
  no web fonts, no JavaScript, nothing loaded from other sites.
*/

:root {
  --navy: #0B2545;
  --navy-raised: #13335C;
  --sky: #2E9BF0;
  --sky-on-navy: #5CC2FF;
  --sky-text: #8FD0FF;
  --sky-tint: #E0F2FD;
  --link: #0369C9;
  --green: #1C9C68;
  --green-text: #12603F;
  --green-tint: #E3F5EC;
  --orange: #D9670B;
  --orange-text: #A14B00;
  --orange-tint: #FFF1E2;
  --gold: #FFC978;
  --gold-tint: #FFF4E0;
  --bg: #F2F4F7;
  --surface: #FFFFFF;
  --ink: #0B1B2E;
  --muted: #5B6676;
  --line: #E8ECF1;
  --fill: #EEF2F7;

  --r-card: 20px;
  --r-btn: 14px;
  --shadow: 0 1px 2px rgba(11, 27, 46, .06), 0 8px 24px rgba(11, 27, 46, .06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 24px);

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

h1, h2, h3, p, ul, ol { margin: 0; }

h1, h2, h3 { text-wrap: balance; }

strong, b { font-weight: 650; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap.is-wide { max-width: 1040px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -120px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 650;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* In-app path chip, e.g. Settings › Notifications */
.ui {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-weight: 600;
  font-size: .94em;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  padding-bottom: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 21px;
  letter-spacing: -.2px;
  text-decoration: none;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(11, 27, 46, .18);
}
.brand:hover { color: var(--navy); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 27, 46, .05);
}
.pill:hover { color: var(--navy); border-color: var(--sky); }
.pill svg { flex-shrink: 0; }

.on-navy .brand, .on-navy .brand:hover { color: #FFFFFF; }
.on-navy .pill {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  box-shadow: none;
}
.on-navy .pill:hover { border-color: var(--sky-on-navy); color: #FFFFFF; }
.on-navy :focus-visible { outline-color: var(--sky-on-navy); }

/* ---------- Page head ---------- */

.page-head { padding: 24px 0 4px; }

.overline {
  font-size: 13px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
}

.page-title {
  margin-top: 10px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 7.5vw, 46px);
  line-height: 1.1;
  letter-spacing: -.6px;
}

.meta {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.lede {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.55;
}

/* ---------- "In short" card with a luggage-tag label ---------- */

.summary {
  position: relative;
  margin-top: 40px;
  padding: 32px 20px 20px;
  border: 1px solid #C7E5FB;
  border-radius: var(--r-card);
  background: var(--sky-tint);
}

.tag {
  position: absolute;
  top: -16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 12px;
  border-radius: 6px 999px 999px 6px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 15px;
  line-height: 22px;
  transform: rotate(-2deg);
}
.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky-on-navy);
}

/* Lists with check / dot bullets */
.ticks, .list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.list { margin-top: 12px; }
.ticks > li, .list > li {
  position: relative;
  padding-left: 28px;
}
.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.8em - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
}
.ticks > li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.8em - 6px);
  width: 4px;
  height: 8px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(45deg);
}
.list > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.8em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sky);
}

/* ---------- Table of contents ---------- */

.toc {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 0 20px;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 17px;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2.5px solid var(--navy);
  border-bottom: 2.5px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .2s ease-out;
}
.toc[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.toc[open] summary { border-bottom: 1px solid var(--line); }
.toc :focus-visible { outline-offset: -4px; }
.toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}
.toc li { counter-increment: toc; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 20px;
  color: var(--ink);
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  min-width: 24px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.toc a:hover { background: var(--bg); }

/* ---------- Section cards ---------- */

.sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.card {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-margin-top: 16px;
}

.card > h2 {
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -.2px;
}
.sections > .card > h2 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sections > .card > h2 > .num + * { min-width: 0; }

.num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 27px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--sky-tint);
  color: var(--link);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.card h3 {
  margin-top: 20px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 650;
}
.card p { margin-top: 12px; }
.card > h2 + p, .card > h2 + .list, .card > h2 + .rows { margin-top: 14px; }

/* Label + explanation rows inside a card */
.rows {
  list-style: none;
  margin-top: 14px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.rows > li { padding: 12px 14px; }
.rows > li + li { border-top: 1px solid var(--line); }
.rows .k {
  display: block;
  font-weight: 650;
  line-height: 1.4;
}
.rows .v {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.rows .v a { overflow-wrap: anywhere; }

.note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: var(--gold-tint);
  border: 1px solid #FBE3B6;
  color: var(--ink);
}
.note.is-sky { background: var(--sky-tint); border-color: #C7E5FB; }

.address {
  margin-top: 12px;
  font-style: normal;
  line-height: 1.9;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 64px;
  background: var(--navy);
  color: #E6EEF7;
}
.site-footer .wrap { padding-top: 32px; padding-bottom: 40px; }
.site-footer :focus-visible { outline-color: var(--sky-on-navy); }

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 20px;
  text-decoration: none;
}
.footer-brand img { width: 30px; height: 30px; border-radius: 8px; }
.footer-brand:hover { color: var(--sky-text); }

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.footer-cols h2 {
  color: var(--sky-text);
  font-size: 13px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.footer-cols ul {
  list-style: none;
  margin-top: 4px;
  padding: 0;
}
.footer-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #FFFFFF;
}
.footer-cols a:hover { color: var(--sky-text); }
.footer-cols a[aria-current="page"] { font-weight: 650; text-decoration-color: var(--sky-on-navy); text-decoration-thickness: 2.5px; }

.fine {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.8;
}
.fine a { color: #FFFFFF; }
.fine a:hover { color: var(--sky-text); }

@media (min-width: 560px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Landing ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #FFFFFF;
}
.hero::after {
  /* Faint dashed route line across the hero */
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 56px;
  height: 0;
  border-top: 2px dashed rgba(92, 194, 255, .28);
  transform: rotate(-4deg);
  pointer-events: none;
}
.hero-body {
  position: relative;
  z-index: 1;
  padding: 40px 0 72px;
  text-align: center;
}
.app-icon {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto;
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.hero h1 {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 11vw, 68px);
  line-height: 1.04;
  letter-spacing: -1px;
}
.hero .tagline {
  max-width: 560px;
  margin: 16px auto 0;
  color: #D5E4F3;
  font-size: clamp(18px, 4.6vw, 21px);
  line-height: 1.5;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}
.chips svg { flex-shrink: 0; color: var(--sky-on-navy); }

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 20px 8px 16px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .06);
  color: #FFFFFF;
  text-align: left;
}
/* A live store link; "coming soon" stores stay plain boxes. */
a.store {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
}
a.store:hover { color: #FFFFFF; border-color: var(--sky-on-navy); background: rgba(255, 255, 255, .18); }
.store svg { flex-shrink: 0; }
.store .sub {
  display: block;
  color: var(--sky-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 650;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.store .name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 22px;
  font-weight: 750;
}
.soon {
  margin-top: 14px;
  color: var(--sky-text);
  font-size: 14px;
}

.section { margin-top: 56px; }
.section-head { max-width: 620px; }
.section-title {
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.4px;
}
.section-lede {
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
}

.features {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding: 0;
}
.feature {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.feature .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sky-tint);
  color: var(--link);
}
.feature .icon.is-green { background: var(--green-tint); color: var(--green-text); }
.feature .icon.is-orange { background: var(--orange-tint); color: var(--orange-text); }
.feature .icon.is-gold { background: var(--gold-tint); color: var(--orange-text); }
.feature h3 {
  margin-top: 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 750;
}
.feature p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Reminder timeline */
.timeline {
  list-style: none;
  margin-top: 24px;
  padding: 0;
  display: grid;
  gap: 0;
}
.timeline > li {
  position: relative;
  padding: 0 0 22px 56px;
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  /* Connector between steps */
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  border-left: 2px dashed #B4BECB;
}
.timeline > li:last-child::before { display: none; }
.timeline .time {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.timeline > li:nth-child(2) .time { background: var(--sky); }
.timeline > li:nth-child(3) .time { background: var(--green); }
.timeline h3 {
  padding-top: 2px;
  color: var(--navy);
  font-size: 17px;
  line-height: 24px;
  font-weight: 650;
}
.timeline p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 15px;
}

/* Pricing */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.plan {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.plan.is-premium {
  border-color: var(--navy);
  background: var(--navy);
  color: #FFFFFF;
}
.plan h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
}
.plan .price {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.plan.is-premium .price { color: var(--gold); }
.plan .list { margin-top: 14px; }
.plan.is-premium .list > li::before { background: var(--gold); }

.privacy-band {
  margin-top: 56px;
  padding: 24px 20px;
  border-radius: var(--r-card);
  background: var(--green-tint);
  border: 1px solid #C5E8D7;
}
.privacy-band h2 {
  color: var(--green-text);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 27px;
  font-weight: 800;
}
.privacy-band p { margin-top: 8px; }
.privacy-band a { color: var(--green-text); font-weight: 600; }

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 26px; }
  .privacy-band { padding: 28px; }
}
@media (min-width: 920px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Very narrow screens: let chips wrap and tighten cards. */
@media (max-width: 359px) {
  .ui { white-space: normal; }
  .card, .summary, .feature, .plan { padding-left: 16px; padding-right: 16px; }
  .card > h2 { font-size: 19px; line-height: 25px; }
}

/* ---------- 404 ---------- */

.nf { padding-top: 32px; }
.nf p { margin-top: 12px; font-size: 18px; }
.nf .big {
  margin-top: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(88px, 28vw, 160px);
  line-height: 1;
  letter-spacing: -3px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: var(--r-btn);
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 650;
  text-decoration: none;
}
.btn:hover { color: #FFFFFF; background: var(--navy-raised); }
.btn.is-light { background: var(--surface); color: var(--navy); border: 1px solid var(--line); }
.btn.is-light:hover { color: var(--navy); background: var(--bg); }

/* ---------- Motion / print ---------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #FFFFFF; }
  .skip, .pill, .toc { display: none; }
  .card, .summary, .note, .feature, .plan { box-shadow: none; }
  .site-footer { background: #FFFFFF; color: var(--ink); }
  .site-footer a, .footer-brand { color: var(--ink); }
  .footer-cols h2 { color: var(--ink); }
}