/* ============================================================
   swish — Phase 2 landing page (editorial / Net-a-Porter feel)
   ============================================================ */
:root {
  --ink:#171513; --ink-soft:#8d857a; --bg:#ffffff; --soft:#f4f1ea; --greige:#e8e4dd; --line:#e7e1d8;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --max:1080px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font-family:inherit; font-weight:500; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:var(--ink); padding:15px 26px; border-radius:6px;
  text-decoration:none; white-space:nowrap; transition:opacity .15s, transform .12s;
}
.btn:hover { opacity:.85; }
.btn:active { transform:scale(.98); }
.btn-sm { padding:10px 18px; font-size:11px; }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { font-family:var(--serif); font-weight:700; font-size:27px; letter-spacing:.3px; text-decoration:none; color:var(--ink); }
.brand span { color:var(--ink); }

/* hero */
.hero { position:relative; overflow:hidden; padding:60px 0 48px; background:linear-gradient(180deg, var(--soft) 0%, #fff 78%); }
.hero-in { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.eyebrow { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line); padding:7px 14px; border-radius:999px; margin-bottom:22px; background:#fff; }
.hero h1 { font-family:var(--serif); font-size:clamp(42px,6.6vw,72px); line-height:1.04; font-weight:600; letter-spacing:-.5px; }
.grad { font-style:italic; font-weight:500; }
.lead { margin:22px 0 28px; font-size:17px; color:var(--ink-soft); max-width:32em; line-height:1.6; }

/* waitlist form */
.join { max-width:480px; }
.join-center { margin:0 auto; }
.join-row { display:flex; gap:10px; }
.join input[type=email] {
  flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--ink);
  padding:15px 18px; border:1px solid var(--line); border-radius:6px; background:#fff; outline:none; transition:border-color .15s;
}
.join input[type=email]:focus { border-color:var(--ink); }
.consent { display:flex; gap:9px; align-items:flex-start; margin-top:13px; font-size:12.5px; color:var(--ink-soft); }
.consent input { margin-top:2px; accent-color:var(--ink); width:15px; height:15px; flex:0 0 auto; }
.consent a { color:var(--ink); text-underline-offset:2px; }
.form-msg { font-size:14px; font-weight:600; margin-top:12px; min-height:20px; }
.form-msg.ok { color:#2f6b4f; }
.form-msg.err { color:#9c3f54; }
.proof { margin-top:22px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* hero phone */
.hero-demo { display:flex; flex-direction:column; align-items:center; gap:14px; }
.phone { width:312px; height:648px; border-radius:46px; background:#171513; padding:10px;
  box-shadow:0 50px 90px -40px rgba(20,16,12,.55), 0 0 0 2px #e7e1d8; flex:0 0 auto; }
.phone iframe { width:100%; height:100%; border:0; border-radius:38px; background:#fff; display:block; }
.demo-cap { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* sections */
section h2 { font-family:var(--serif); font-size:clamp(28px,3.8vw,40px); font-weight:600; letter-spacing:-.4px; text-align:center; }
.how, .vibe { padding:70px 0; }
.how { background:var(--soft); }
.how h2 { margin-bottom:42px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step { background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px 26px; text-align:center; }
.step-emoji { font-size:30px; }
.step h3 { font-family:var(--serif); font-size:21px; font-weight:600; margin:12px 0 9px; }
.step p { color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

.vibe h2 { margin-bottom:42px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vcard { border-radius:10px; padding:32px 28px; border:1px solid var(--line); background:#fff; }
.vcard:nth-child(2){ background:var(--ink); color:#fff; border-color:var(--ink); }
.vcard:nth-child(2) p { opacity:.82; }
.vcard h3 { font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:11px; }
.vcard p { font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.vcard:nth-child(2) h3 { color:#fff; }
.vcard:nth-child(2) p { color:rgba(255,255,255,.8); }

/* cta */
.cta { padding:78px 0; text-align:center; background:var(--soft); }
.cta-in h2 { margin-bottom:0; }
.cta-in p { color:var(--ink-soft); font-size:16px; margin:14px 0 28px; }

/* footer */
.foot { background:var(--ink); color:#bdb6ad; padding:50px 0 42px; }
.foot-brand { font-family:var(--serif); font-size:28px; margin-bottom:18px; display:inline-block; color:#fff; }
.foot-brand span { color:#fff; }
.disclosure { font-size:13px; line-height:1.65; color:#9b938a; max-width:62ch; margin-bottom:12px; }
.disclosure b { color:#efeae3; font-weight:600; }
.copy { font-size:12px; letter-spacing:.04em; color:#857d74; margin-top:16px; }
.copy a { color:#cfc8bf; text-decoration:none; }

/* legal page */
.legal { padding:44px 0 80px; }
.legal h1 { font-family:var(--serif); font-size:clamp(30px,4.2vw,42px); font-weight:600; letter-spacing:-.4px; }
.legal h2 { font-family:var(--serif); font-size:21px; font-weight:600; margin:30px 0 10px; text-align:left; }
.legal p, .legal li { color:#3a352f; font-size:15px; line-height:1.7; }
.legal ul { padding-left:20px; margin:8px 0; }
.legal li { margin-bottom:7px; }
.legal .muted { color:var(--ink-soft); font-size:13px; }
.legal code { background:var(--soft); padding:1px 6px; border-radius:5px; font-size:13px; color:var(--ink); }
.legal .note { background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:15px 17px; margin:18px 0 8px; font-size:14px; line-height:1.65; color:#5a534b; }
.legal .note code { background:#ece6dc; }
.legal a { color:var(--ink); }

/* responsive */
@media (max-width:860px){
  .hero-in { grid-template-columns:1fr; gap:40px; text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .join { width:100%; }
  .steps, .cards { grid-template-columns:1fr; }
  .hero { padding:40px 0 30px; }
}
@media (max-width:430px){
  .join-row { flex-direction:column; }
  .join input[type=email], .join .btn { width:100%; }
  .phone { width:280px; height:580px; }
}

/* ===== "Try it out" — bigger button + app modal ===== */
.btn-lg { padding:18px 36px; font-size:13px; }
.hero-cta { display:flex; flex-direction:column; gap:13px; align-items:flex-start; }
.hero-cta .note { font-size:13px; color:var(--ink-soft); letter-spacing:.01em; }
button.demo-cap { border:0; background:none; cursor:pointer; font-family:inherit; }
button.demo-cap:hover { color:var(--ink); }
@media (max-width:860px){ .hero-cta { align-items:center; } }

.app-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.app-modal[hidden] { display:none; }
.app-modal-backdrop { position:absolute; inset:0; background:rgba(20,16,12,.6); backdrop-filter:blur(6px); }
.app-modal-frame { position:relative; z-index:1; width:380px; max-width:100%; height:min(800px,90vh);
  background:#171513; padding:10px; border-radius:46px;
  box-shadow:0 60px 110px -30px rgba(0,0,0,.7), 0 0 0 2px #2a2520; animation:appPop .22s ease both; }
.app-modal-frame iframe { width:100%; height:100%; border:0; border-radius:38px; background:#fff; display:block; }
.app-modal-close { position:absolute; top:-15px; right:-15px; z-index:2; width:42px; height:42px; border-radius:50%;
  border:0; background:#fff; color:var(--ink); font-size:16px; line-height:1; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.32); display:flex; align-items:center; justify-content:center; transition:transform .12s; }
.app-modal-close:hover { transform:scale(1.09); }
@keyframes appPop { from { opacity:0; transform:scale(.93); } to { opacity:1; transform:scale(1); } }
body.modal-open { overflow:hidden; }

@media (max-width:520px){
  .app-modal { padding:0; }
  .app-modal-frame { width:100%; height:100%; border-radius:0; padding:0; box-shadow:none; }
  .app-modal-frame iframe { border-radius:0; }
  .app-modal-close { top:12px; right:12px; width:38px; height:38px; box-shadow:0 4px 14px rgba(0,0,0,.4); }
}