/* Landing-only presentation. Legal pages and the inventory app keep their styles. */
.landing {
  --ink: #163044;
  --muted: #53687a;
  --accent: #096da9;
  --accent-dark: #075685;
  --soft: #f1f6fa;
  --line: #d9e3eb;
  font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif;
  line-height: 1.8;
}
.landing .wrap {max-width: 74rem; padding-inline: 2rem;}
.landing .site-header {border-bottom: 0;}
.landing .site-header .wrap {padding-block: 1.3rem; gap: 1rem 2rem;}
.landing .brand {font-size: 1rem; font-weight: 750;}
.landing .brand img {width: 40px; height: 40px; border-radius: 10px;}
.landing .site-nav {width: min(20rem, 40%);}
.landing .language-picker {gap: .75rem;}
.landing .language-picker select {min-height: 44px; border-color: var(--line);}
.landing .hero {padding: 3.5rem 0 4.5rem; background: var(--soft);}
.landing .hero-grid {grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 5rem;}
.landing .hero-copy {min-width: 0;}
.store-line {font-size: .95rem; font-weight: 650; margin: 0 0 1.4rem;}
.store-line span {color: var(--muted); margin-inline: .55rem;}
.landing .hero h1 {font-size: clamp(2.5rem, 3.5vw, 3.6rem); line-height: 1.35; letter-spacing: -.035em; margin-bottom: 1.35rem; font-weight: 800; text-wrap: balance; overflow-wrap: anywhere;}
.landing .hero .lede {font-size: 1.12rem; margin-bottom: 2rem;}
.landing .cta-row {gap: .7rem; margin-bottom: .9rem;}
.landing .btn {padding: .95rem 1.3rem; min-height: 54px; border-radius: 10px; font-size: 1rem;}
.landing .btn--store {background: var(--ink); border-color: var(--ink); color: #fff;}
.landing .btn--store:hover {background: var(--accent-dark); border-color: var(--accent-dark);}
.landing .btn--ghost {background: #fff; border-color: #b2c7d8;}
.landing .purchase-note {margin: 0;}
.landing .android-note {margin: .7rem 0 0;}
.product-preview {margin: 0; display: grid; justify-items: center; gap: 1.2rem; min-width: 0;}
.phone-frame {width: 255px; max-width: 100%; border: 5px solid #fff; border-radius: 35px; overflow: hidden; box-shadow: 0 12px 32px #16304414, 0 0 0 1px #cad7e1; background: #f1f1f6;}
.phone-frame img {display: block; width: 100%; height: auto;}
.product-preview figcaption {max-width: 26rem; font-size: .77rem; color: var(--muted); line-height: 1.6; text-align: center;}
.landing section {padding-block: 4rem;}
.landing section + section {border-top: 0;}
.landing h2 {font-size: clamp(1.65rem, 2.1vw, 2.15rem); line-height: 1.4; font-weight: 750; letter-spacing: -.02em; text-wrap: balance;}
.landing h3 {font-size: 1.13rem; line-height: 1.5;}
.landing h2, .landing h3 {overflow-wrap: anywhere; hyphens: auto;}
.landing p {overflow-wrap: anywhere;}
.store-columns {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;}
.store-columns h2 {font-size: 1.35rem; margin-bottom: .8rem;}
.store-columns p {margin: 0; color: var(--muted); font-size: .97rem;}
.store-columns > div + div {border-inline-start: 1px solid var(--line); padding-inline-start: 3rem;}
.landing .alert-feature {padding-block: 2.5rem; background: #eaf4fb;}
.alert-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;}
.alert-grid p {margin: .9rem 0 0; color: var(--muted);}
.stock-transition {display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; align-items: center;}
.stock-state {padding: .8rem 1rem; background: #fff; border-radius: 9px; display: inline-flex; gap: .5rem; align-items: center; font-size: .93rem; font-weight: 650;}
.stock-state--off {color: #596471;}
.stock-state--on {color: #176246;}
.status-dot {display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor;}
.change-arrow {font-size: 1.6rem; color: var(--muted);}
.journey {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem; list-style: none; padding: 0; margin: 2.5rem 0; counter-reset: journey;}
.journey li {counter-increment: journey; border-top: 2px solid var(--line); padding-top: 1.4rem;}
.journey li::before {content: counter(journey); display: block; font-size: 1.2rem; color: var(--accent-dark); font-weight: 750;}
.journey h3 {margin: .65rem 0;}
.journey p {color: var(--muted); font-size: .95rem; margin: .65rem 0 0;}
.language-note {border-top: 1px solid var(--line); padding-top: 1.5rem; margin: 0; font-weight: 650; color: var(--accent-dark);}
.landing .start-section {background: var(--soft);}
.start-grid {display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 5rem;}
.start-grid h2 {margin-bottom: 1.2rem;}
.start-grid .fine {margin-bottom: 0;}
.landing .faq-section {padding-block: 3rem;}
.landing details {border-bottom: 1px solid var(--line); padding-block: 1.1rem;}
.landing summary {font-weight: 650; cursor: pointer; padding-block: .25rem;}
.landing details p {color: var(--muted); font-size: .95rem; margin: .7rem 0 0;}
.landing .site-footer {margin-top: 0; padding-block: 2.5rem; background: #fff;}
.landing .site-footer .brand {margin-bottom: 1.5rem;}
.landing .site-footer nav {gap: 1rem 2rem;}
.landing .analytics-settings {max-width: 70rem; margin-block: 0 2rem;}
@media (max-width: 60rem) {
  .landing .hero-grid {gap: 2.5rem;}
  .alert-grid {grid-template-columns: 1fr; gap: 1.75rem;}
  .stock-transition {justify-content: flex-start;}
  .start-grid {gap: 2.5rem;}
}
@media (max-width: 47rem) {
  .landing .wrap {padding-inline: 1.3rem;}
  .landing .site-header .wrap {padding-block: .9rem; gap: .85rem;}
  .landing .site-nav {width: 100%;}
  .landing .hero {padding-block: 2.6rem 3rem;}
  .landing .hero-grid {grid-template-columns: 1fr; gap: 2.3rem;}
  .landing .hero h1 {font-size: clamp(2.2rem, 8vw, 3.2rem);}
  .landing .hero .lede {font-size: 1.04rem;}
  .store-line {font-size: .85rem;}
  .phone-frame {width: 235px;}
  .landing section {padding-block: 2.6rem;}
  .store-columns, .start-grid, .journey {grid-template-columns: 1fr; gap: 1.8rem;}
  .store-columns > div + div {border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; padding-top: 1.8rem;}
  .journey {margin-block: 1.8rem;}
  .journey li {padding-top: 1rem;}
  .stock-transition {gap: .55rem;}
  .stock-state {font-size: .88rem;}
}