/* ==========================================================================
   Pickd marketing site
   Transcribed from the Claude Design export (pickd-website.dc.html).
   Values here are read out of the export's inline styles, not approximated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted woff2 extracted from the design bundle.
   Montserrat and DM Sans ship as variable fonts, so one file per unicode
   subset covers the whole weight range. The export declared the same file
   once per weight; a range declaration is equivalent and far shorter.
   -------------------------------------------------------------------------- */

/* DM Sans — body, weights 300/400/500 */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — display, weights 600/700/800/900 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   The export authors solid accent fills in oklch, which is outside sRGB.
   #7634DC is the sRGB fallback and is also the literal colour the export uses
   for every glow and shadow (rgba(118,52,220,…)), so both values are real.
   -------------------------------------------------------------------------- */
:root {
  --base: #080810;
  --surface: #16162a;
  --accent: #7634dc;
  --accent-soft: #a082ff;
  --lavender: #c9b6ff;

  /* Shadow/glow colour, kept as channels so alpha can vary per use. */
  --accent-rgb: 118, 52, 220;

  --phone-shadow:
    0 34px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 60px rgba(var(--accent-rgb), 0.16);
}

@supports (color: oklch(63% 0.28 290)) {
  :root {
    --accent: oklch(63% 0.28 290);
    --accent-soft: oklch(70% 0.20 290);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
}

body {
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--lavender);
  text-decoration: none;
}
a:hover { color: #fff; }

/* height:auto is load-bearing — the width/height attributes on each <img> are
   there to reserve layout space, and without this the attribute height wins. */
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users land here first. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--surface);
  color: #fff;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

@keyframes pkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes pkPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.08); }
}

/* Shared building blocks --------------------------------------------------- */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow {
  /* The export used a <div> here; as a <p> the UA's 1em margin would add
     ~12px and push everything below it out of position. */
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.wordmark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.wordmark .pick { color: var(--accent); }
.wordmark .d { color: #fff; }

.btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 50px;
  background: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease;
}

/* Phone frame — the export repeats this treatment for every screenshot. */
.phone {
  position: relative;
}
.phone::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.34), transparent 66%);
  filter: blur(38px);
  pointer-events: none;
}
.phone img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 7px solid var(--surface);
  box-shadow: var(--phone-shadow);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: rgba(8, 8, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand .wordmark { font-size: 21px; }
.brand .beta {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.nav-link:hover { color: #fff; }

.btn-nav {
  font-size: 13.5px;
  padding: 11px 20px;
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.4);
}
.btn-nav:hover { transform: translateY(-1px); color: #fff; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 118px 40px 96px;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-glow {
  position: absolute;
  top: -60px;
  left: 8%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.30), transparent 68%);
  filter: blur(40px);
  animation: pkPulse 7s ease-in-out infinite;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 56px;
  align-items: center;
}
.hero .eyebrow { margin-bottom: 30px; }
.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -2.6px;
  margin: 0 0 30px;
  text-wrap: balance;
}
.hero-sub {
  font-size: 21px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
  margin: 0 0 40px;
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.btn-lg {
  font-size: 15px;
  padding: 18px 34px;
  box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.42);
}
.btn-lg:hover { transform: translateY(-2px); color: #fff; }
.hero-cta-note { font-size: 14px; color: #fff; }

.hero-phone {
  display: flex;
  justify-content: center;
  animation: pkFloat 8s ease-in-out infinite;
}
.hero-phone .phone { width: 320px; }
.hero-phone .phone img { border-radius: 42px; }

/* --------------------------------------------------------------------------
   "Works with" strip
   -------------------------------------------------------------------------- */
.services {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 34px 40px;
}
.services .wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.services-label {
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.services-list {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.how-intro {
  padding: 118px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.how-intro .eyebrow { margin-bottom: 26px; }
.how-intro h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  margin: 0 0 20px;
  max-width: 760px;
  text-wrap: balance;
}

.steps {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px 130px;
}
.step {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(210px, 280px);
  gap: 36px;
  align-items: center;
  padding: 50px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.step:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.step-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 54px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.13);
  letter-spacing: -2px;
}
.step h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(23px, 2.3vw, 29px);
  line-height: 1.16;
  letter-spacing: -0.6px;
  margin: 0 0 14px;
}
.step p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  max-width: 440px;
  margin: 0;
  text-wrap: pretty;
}
.step-shot {
  display: flex;
  justify-content: center;
}
.step-shot .phone { width: 250px; }
.step-shot .phone img { border-radius: 33px; }

/* --------------------------------------------------------------------------
   Waitlist
   -------------------------------------------------------------------------- */
.waitlist {
  position: relative;
  padding: 0 40px 150px;
}
.waitlist-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.waitlist-glow {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.26), transparent 66%);
  filter: blur(46px);
  pointer-events: none;
}
.waitlist-content { position: relative; }
.waitlist h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  margin: 0 0 22px;
  text-wrap: balance;
}
.waitlist-sub {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  max-width: 520px;
  margin: 0 auto 44px;
}

.waitlist-form {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.waitlist-form input {
  flex: 1;
  min-width: 0;
  padding: 19px 22px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  outline: none;
}
.waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.38); }
.waitlist-form input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}
.btn-submit {
  font-size: 15px;
  padding: 19px 32px;
  box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.42);
}
.btn-submit:hover:not(:disabled) { transform: translateY(-2px); }
.btn-submit:disabled { opacity: .62; cursor: default; }

/* Success state — mirrors the export's joined branch. */
.waitlist-success {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 34px;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.waitlist-success .emoji { font-size: 24px; }
.waitlist-success .msg {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 17px;
}

/* Failure state — the export had none; an insert can fail and must say so. */
.waitlist-error {
  max-width: 520px;
  margin: 18px auto 0;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255, 86, 86, 0.10);
  border: 1px solid rgba(255, 86, 86, 0.38);
  color: #ffb4b4;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}
.waitlist-error a { color: #ffd0d0; text-decoration: underline; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 44px 40px;
}
.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer .wordmark { font-size: 17px; }
.footer-copy {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.28);
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 13px;
}
.footer-links a { color: rgba(255, 255, 255, 0.45); }
.footer-links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Legal pages (privacy, terms)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 40px 120px;
}
.legal h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -1.8px;
  margin: 0 0 14px;
}
.legal .updated {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 48px;
}
.legal h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.4px;
  margin: 44px 0 14px;
}
.legal h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 28px 0 10px;
}
.legal p,
.legal li {
  font-size: 16.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.62);
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal strong { color: rgba(255, 255, 255, 0.86); font-weight: 500; }
.legal a { text-decoration: underline; }

/* ==========================================================================
   Responsive
   The export is a fixed desktop layout with no breakpoints. Everything below
   is additive: it only engages under 1080px, so the design renders untouched
   at its intended width.
   ========================================================================== */

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    justify-items: start;
  }
  .hero-phone { justify-content: flex-start; }
  .hero-sub { max-width: 560px; }

  /* Number and copy share a row; the screenshot drops below and left-aligns
     with the copy so the step still reads as one unit. */
  .step {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 20px 36px;
  }
  .step-shot {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 12px;
  }
}

@media (max-width: 760px) {
  .site-header { padding: 16px 22px; }
  .site-nav { gap: 16px; }
  .nav-link { font-size: 13.5px; }
  .btn-nav { font-size: 12.5px; padding: 10px 16px; }

  .hero { padding: 72px 22px 64px; }
  .hero h1 {
    font-size: clamp(38px, 9.2vw, 56px);
    letter-spacing: -1.6px;
  }
  .hero-sub { font-size: 18px; }
  .hero-glow { width: 320px; height: 320px; top: -30px; left: -10%; }

  .services { padding: 28px 22px; }
  .services .wrap { gap: 18px; }
  .services-list { gap: 20px; font-size: 14px; }

  .how-intro { padding: 72px 22px 24px; }
  .how-intro h2 { font-size: clamp(30px, 7vw, 42px); letter-spacing: -1px; }

  .steps { padding: 0 22px 80px; }
  .step {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 38px 0;
  }
  .step-num { font-size: 40px; margin-bottom: 12px; }
  .step h3 { font-size: clamp(21px, 5.4vw, 25px); }
  .step p { font-size: 16px; }
  .step-shot {
    grid-column: 1;
    justify-content: center;
    margin-top: 26px;
  }

  .waitlist { padding: 0 22px 96px; }
  .waitlist h2 { font-size: clamp(30px, 8vw, 42px); letter-spacing: -1.2px; }
  .waitlist-sub { font-size: 17px; margin-bottom: 32px; }
  .waitlist-glow { width: 320px; height: 300px; }

  /* Side-by-side field and button stop fitting well before 375px. */
  .waitlist-form { flex-direction: column; gap: 10px; }
  .btn-submit { width: 100%; }

  .waitlist-success { padding: 18px 22px; gap: 12px; text-align: left; }
  .waitlist-success .msg { font-size: 15.5px; }

  .site-footer { padding: 34px 22px; }
  .site-footer .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .legal { padding: 56px 22px 88px; }
}

/* Wordmark + anchor + CTA stop fitting on one line here. The CTA is the
   conversion path, so the anchor link gives way — the same section is still
   reachable by scrolling. */
@media (max-width: 560px) {
  .site-header { padding: 14px 18px; }
  .nav-link { display: none; }
  .brand { gap: 8px; }
}

@media (max-width: 420px) {
  .hero-phone .phone { width: 100%; max-width: 300px; }
  .step-shot .phone { width: 100%; max-width: 250px; }
  .brand .wordmark { font-size: 19px; }
  .brand .beta { font-size: 10px; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-phone,
  .hero-glow {
    animation: none;
  }
  * { transition: none !important; }
}