/* Landing page (2026-10-17): clean Swiss layout, soft tinted panels, phones in device frames. Light only. */
:root { --wash: #E4F7EF; --panel: #F5F6F4; --muted: #4A5A55; }
body { color: var(--mint-ink); }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; }
.small-print { font-size: 15px; color: var(--muted); margin-top: 14px; }

/* Header */
.bar { background: color-mix(in srgb, #fff 90%, transparent); }
.bar .links { display: flex; gap: 4px; list-style: none; padding: 0; margin-right: 8px; }
.bar .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; text-decoration: none; font-weight: 500; color: var(--muted); }
.bar .links a:hover { color: var(--mint-ink); background: var(--panel); }
@media (max-width: 720px) { .bar nav { display: none; } }

/* Hero */
.hero { padding-top: 12px; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; background: var(--wash); border-radius: 40px; padding-block: 72px 0; padding-inline: 64px 24px; overflow: hidden; max-width: calc(1200px - 32px); margin-inline: auto; }
.hero-copy { padding-bottom: 72px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: .98; letter-spacing: -.035em; max-width: 11ch; }
.lede { font-size: 19px; line-height: 1.55; max-width: 34em; margin-top: 22px; color: var(--muted); }
.hero-phones { position: relative; height: 560px; align-self: end; }
.hero-phones .phone { position: absolute; bottom: -120px; }
.hero-phones .iphone { left: 6%; transform: rotate(-4deg); z-index: 1; }
.hero-phones .galaxy { left: 42%; bottom: -60px; transform: rotate(5deg); }

/* Store badges, greyed until launch */
.stores { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin-top: 30px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 18px 8px 14px; border-radius: 14px; background: #fff; border: 1.5px dashed rgba(11, 59, 46, .28); color: var(--mint-ink); font: 600 17px/1.15 var(--text); }
.store svg { width: 24px; height: 24px; opacity: .8; }
.store small { display: block; font: 500 12px/1.2 var(--text); color: var(--muted); }

/* Device frames: iPhone (island, round corners) and Samsung Galaxy (punch hole, squarer corners) */
/* Phones are pre-drawn images (frame + screen), so they look the same in every browser */
.phone { width: 270px; height: auto; filter: drop-shadow(0 26px 26px rgba(11, 59, 46, .3)); }

/* Big example number */
.figure { text-align: center; padding-block: 112px 40px; }
.figure h2 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.figure .big { font-size: clamp(96px, 16vw, 200px); line-height: .9; letter-spacing: -.05em; color: var(--mint-deep); }
.figure .big-unit { font-size: clamp(26px, 3vw, 36px); }
.figure > p:last-child { max-width: 34em; margin: 22px auto 0; font-size: 19px; color: var(--muted); }

/* Sections */
.sec { padding-block: 72px; }
.sec-h { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; max-width: 16ch; margin-bottom: 36px; }
.sec-sub { font-size: 19px; color: var(--muted); max-width: 36em; margin: -16px 0 32px; }
.card { background: var(--panel); border-radius: 28px; padding: 14px 14px 26px; }
.card h3 { font-size: 24px; margin: 22px 10px 8px; display: flex; align-items: center; gap: 12px; }
.card p { margin-inline: 10px; color: var(--muted); }
.snip { overflow: hidden; border-radius: 20px; background: #fff; }
.snip img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); } /* fade the cut-off bottom row */
.steps, .features { list-style: none; padding: 0; display: grid; gap: 16px; }
.steps { grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(4, 1fr); }
.features h3 { font-size: 21px; }
.n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mint); font: 600 17px/1 var(--text); }

/* Trades */
.trades { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade { display: flex; flex-direction: column; align-items: center; border-radius: 36px; padding: 48px 40px 0; overflow: hidden; background: var(--wash); }
.trade.wash { background: var(--panel); }
.trade-copy { align-self: stretch; margin-bottom: 40px; }
.trade h3 { font-size: 36px; margin-bottom: 18px; }
.ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg.i { width: 22px; height: 22px; margin-top: 2px; color: var(--mint-deep); stroke-width: 2.4; }
.trade .phone { margin-bottom: -180px; }
.trades { grid-template-columns: 1fr 1fr 1fr; }
.trade { padding-inline: 32px; }
.trade.soon { background: #fff; box-shadow: inset 0 0 0 1.5px var(--sep); }
.trade.soon p { color: var(--muted); margin-bottom: 18px; }
.soon-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soon-list li { padding: 8px 14px; border-radius: 999px; background: var(--panel); font-weight: 500; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { background: var(--panel); border-radius: 28px; padding: 30px; }
.plan h3 { font-size: 22px; }
.plan .cost { margin: 14px 0 10px; color: var(--mint-ink); }
.plan .cost .num { font: 500 52px/1 var(--display); letter-spacing: -.03em; margin-right: 6px; }
.plan p:last-child { color: var(--muted); }
.plan.founding { background: var(--wash); box-shadow: inset 0 0 0 2px var(--mint); }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; }
.qs details { border-bottom: 1px solid var(--sep); }
.qs summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; font: 500 20px/1.3 var(--display); letter-spacing: -.01em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(var(--mint-ink) 0 0) center / 12px 2px no-repeat, linear-gradient(var(--mint-ink) 0 0) center / 2px 12px no-repeat, var(--panel); transition: rotate .2s var(--ease); }
.qs details[open] summary::after { rotate: 45deg; }
.qs details p { padding-bottom: 20px; max-width: 38em; color: var(--muted); }
.qs a { color: var(--mint-deep); }
.qs .ask { padding-top: 20px; color: var(--muted); }

/* Final call */
.get { text-align: center; background: var(--wash); border-radius: 40px; padding-block: 88px; margin-block: 40px 72px; max-width: calc(1200px - 32px); }
.get h2 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1; }
.get > p { font-size: 19px; color: var(--muted); margin-top: 16px; }
.get .stores { justify-content: center; }
.notify { margin-top: 20px; }

/* Footer */
.foot { border-top: 1px solid var(--sep); padding-block: 32px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.foot p { color: var(--muted); font-size: 15px; }
.foot a:not(.logo) { color: var(--mint-ink); }

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; padding: 48px 28px 0; }
  .hero-copy { padding-bottom: 0; }
  .hero-phones { height: 440px; width: 100%; max-width: 420px; margin-inline: auto; }
  .hero-phones .phone { width: 220px; }
  .hero-phones .iphone { left: 0; }
  .hero-phones .galaxy { left: auto; right: 0; }
  .steps { grid-template-columns: 1fr; }
  .steps .card { display: grid; grid-template-columns: 160px 1fr; column-gap: 16px; align-items: start; }
  .steps .snip { grid-row: span 2; }
  .steps .card h3 { margin-top: 10px; }
  .features { grid-template-columns: 1fr 1fr; }
  .trades, .faq, .plans { grid-template-columns: 1fr; }
  .faq { gap: 0; }
}
@media (max-width: 560px) {
  .hero, .get { margin-inline: 8px; }
  .hero-in, .get { border-radius: 28px; }
  .hero-in { padding-inline: 20px; }
  .hero-phones { height: 380px; }
  .hero-phones .phone { width: 172px; }
  /* keep the tilted corners inside the green panel */
  .hero-phones .iphone { left: 4%; }
  .hero-phones .galaxy { right: 5%; }
  .features { grid-template-columns: 1fr; }
  .steps .card { display: block; }
  .trade { padding: 32px 22px 0; border-radius: 28px; }
  .trade .phone { width: 240px; }
  .figure { padding-top: 80px; }
  .get { padding: 64px 20px; }
}

/* Touch and hover feedback */
html { -webkit-tap-highlight-color: rgba(111, 214, 175, .25); }
a, summary, .btn { touch-action: manipulation; }
.qs summary:hover::after { background-color: var(--wash); }
.qs summary:hover { color: var(--mint-deep); }

/* Phones: card rows swipe sideways instead of stacking, so the page stays short */
@media (max-width: 700px) {
  .sec { padding-block: 48px; }
  .sec-h { margin-bottom: 24px; }
  .figure { padding-block: 64px 16px; }
  .swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 82%; scroll-snap-align: start; }
  .steps .card { display: block; }
  .trades.swipe > * { flex-basis: 86%; }
  .trade { padding-top: 28px; }
  .trade h3 { font-size: 28px; }
  .trade-copy { margin-bottom: 24px; }
  .trade .phone { width: 210px; margin-bottom: -230px; }
  .trade.soon { padding-bottom: 28px; }
  .hero-in { padding-top: 36px; }
  .hero-phones { height: 330px; }
  .plans { gap: 10px; }
  .plan { padding: 22px; }
  .plan .cost .num { font-size: 40px; }
  .get { padding-block: 48px; margin-block: 24px 40px; }
  .hero-copy { padding-bottom: 16px; }
  .stores { flex-wrap: nowrap; gap: 8px; margin-top: 24px; }
  .store { min-height: 50px; padding: 6px 12px 6px 10px; gap: 8px; font-size: 15px; }
  .store svg { width: 20px; height: 20px; }
  .store small { font-size: 11px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan.founding { grid-column: 1 / -1; }
  .plan .cost .num { display: block; font-size: 36px; margin-bottom: 2px; }
  .plan h3 { font-size: 19px; }
}

/* Motion (2026-10-17). Content is visible by default; motion only layers on top, and base.css turns it all off for reduced motion. */
::selection { background: var(--mint); color: var(--mint-ink); }
section[id] { scroll-margin-top: 80px; }
.bar .links a { transition: background-color .2s, color .2s; }
.btn { transition: background-color .2s, box-shadow .3s var(--ease), translate .3s var(--ease), transform .15s var(--ease); }
.card, .plan, .trade { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.snip img, .trade .phone { transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { translate: 0 -2px; box-shadow: 0 10px 22px -10px rgba(23, 128, 95, .6); }
  .card:hover, .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(11, 59, 46, .35); }
  .card:hover .snip img { transform: scale(1.03); }
  .trade:hover .phone { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero: words rise in one after another, then the phones slide up */
  @keyframes rise { from { opacity: 0; translate: 0 24px; } }
  @keyframes phone-in { from { opacity: 0; translate: 0 120px; } }
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-phones .iphone { animation: phone-in 1.2s var(--ease) .2s both; }
  .hero-phones .galaxy { animation: phone-in 1.2s var(--ease) .32s both; }

  /* FAQ answers slide open */
  @supports (interpolate-size: allow-keywords) {
    .qs { interpolate-size: allow-keywords; }
    .qs details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
    .qs details[open]::details-content { height: auto; }
  }

  /* Scroll-linked effects, in browsers that support them; others just show the page */
  @supports (animation-timeline: view()) {
    @keyframes bar-lift { to { border-bottom-color: var(--sep); box-shadow: 0 6px 24px -18px rgba(11, 59, 46, .5); } }
    .bar { animation: bar-lift linear both; animation-timeline: scroll(root); animation-range: 0 80px; }

    /* Phones drift at different speeds as the hero scrolls away */
    @keyframes drift-a { to { transform: translateY(-48px) rotate(-7deg); } }
    @keyframes drift-b { to { transform: translateY(-16px) rotate(7deg); } }
    .hero-phones .iphone { animation: phone-in 1.2s var(--ease) .2s both, drift-a linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; }
    .hero-phones .galaxy { animation: phone-in 1.2s var(--ease) .32s both, drift-b linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; }

    /* Sections fade up as they come into view; cards in a row follow each other */
    @keyframes grow { from { opacity: 0; scale: .9; } }
    .sec-h, .sec-sub, .steps > *, .features > *, .trades > *, .plans > *, .qs > *, .figure > p, .get > * {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .figure h2 { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    :is(.steps, .features, .trades, .plans) > :nth-child(2) { animation-range: entry 8% entry 63%; }
    :is(.steps, .features, .trades, .plans) > :nth-child(3) { animation-range: entry 16% entry 71%; }
    :is(.steps, .features, .trades, .plans) > :nth-child(4) { animation-range: entry 24% entry 79%; }

    /* On phones the card rows scroll sideways, so the whole row fades in instead of each card */
    @media (max-width: 700px) {
      .swipe > * { animation: none; }
      .swipe { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    }
  }
}