/* ===== Placecard product page — plum & gold, Slatefox craft ===== */
@font-face{
  font-family:"Fraunces";
  src:url("/fonts/Fraunces-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/fonts/Fraunces-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/fonts/Fraunces-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Mulish";
  src:url("/fonts/Mulish-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Mulish";
  src:url("/fonts/Mulish-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --night:#141215; --night-hi:#1B171B; --card-d:#211C21; --line-d:#332B33;
  --cream:#FBF3E9; --soft:#A79E90; --faint:#7C736B;
  --plum:#6E2A48; --plum-deep:#521D35; --plum-fill:#8A3559; --rose:#D98CAE;
  --gold:#C79A4A; --gold-hi:#D9B778;
  --ivory:#F6F2EC; --ivory-hi:#FFFFFF; --ink:#1C1A17; --ink-soft:#726B60; --line-l:#EAE3D8;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--night); color:var(--cream);
  font-family:var(--sans); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
a{color:var(--rose); text-decoration:none}
::selection{background:var(--plum); color:var(--cream)}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--gold-hi); outline-offset:3px; border-radius:4px}

.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--night);
  padding:10px 16px; border-radius:0 0 10px 0; font-weight:600; z-index:100}
.skip:focus{left:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:15px; padding:13px 24px; border-radius:14px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-plum{background:linear-gradient(180deg,var(--plum-fill),var(--plum-deep)); color:var(--cream);
  box-shadow:0 14px 30px -12px rgba(110,42,72,.65)}
.btn-plum:hover{box-shadow:0 18px 36px -12px rgba(110,42,72,.8)}
.btn-ghost{background:transparent; color:var(--cream); border-color:var(--line-d)}
.btn-ghost:hover{border-color:var(--faint)}
.btn-lg{font-size:17px; padding:16px 30px}

.eyebrow{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-hi); margin:0 0 16px}
.light .eyebrow{color:var(--plum)}

/* ---------- nav ---------- */
.pcnav{position:absolute; top:0; left:0; right:0; z-index:10}
.pcnav-inner{display:flex; align-items:center; justify-content:space-between; height:84px}
.pcbrand{display:flex; align-items:center; gap:12px; color:var(--cream); font-family:var(--serif);
  font-weight:600; font-size:21px; letter-spacing:-.01em}
.pcbrand svg{display:block}
.pclinks{display:flex; align-items:center; gap:26px}
.pclinks a{color:var(--soft); font-size:15px; font-weight:600}
.pclinks a:hover{color:var(--cream)}
.pclinks .to-slatefox{color:var(--faint); font-weight:400}
@media (max-width:640px){ .pclinks a:not(.to-slatefox){display:none} }

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:clamp(150px,20vw,215px) 0 clamp(70px,10vw,110px);
  background:
    radial-gradient(900px 520px at 82% -10%, rgba(199,154,74,.16), transparent 62%),
    radial-gradient(760px 560px at 6% 108%, rgba(110,42,72,.4), transparent 62%),
    linear-gradient(180deg, var(--night-hi), var(--night) 58%)}
.hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-glow::before, .hero-glow::after{content:""; position:absolute; border-radius:50%; filter:blur(80px)}
.hero-glow::before{width:52vw; height:44vw; max-width:700px; max-height:600px; top:-14%; right:0;
  background:radial-gradient(circle, rgba(199,154,74,.17), transparent 66%);
  animation:drift-a 18s ease-in-out infinite alternate}
.hero-glow::after{width:46vw; height:46vw; max-width:620px; max-height:620px; bottom:-24%; left:-6%;
  background:radial-gradient(circle, rgba(138,53,89,.30), transparent 66%);
  animation:drift-b 23s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:translate(0,0)} to{transform:translate(-46px,34px)}}
@keyframes drift-b{from{transform:translate(0,0)} to{transform:translate(40px,-30px)}}

.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(24px,5vw,56px); align-items:center}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; gap:44px}
  .hero-art{max-width:330px; margin:0 auto}
}
.hero-title{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(40px,7.4vw,82px); margin:0 0 22px; text-wrap:balance}
.hero-title .gold{color:var(--gold-hi); font-style:italic; font-weight:400}
.ln{display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em}
.ln > span{display:block; transform:translateY(130%); animation:lift .9s cubic-bezier(.2,.7,.2,1) forwards}
.ln:nth-child(2) > span{animation-delay:.12s}
@keyframes lift{to{transform:translateY(0)}}
.hero-lede{font-size:clamp(17px,2.3vw,20px); color:var(--soft); max-width:46ch; margin:0 0 34px; line-height:1.6}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.appstore-badge{display:inline-flex; align-items:center; gap:12px; padding:13px 22px;
  border:1px solid var(--line-d); border-radius:14px; color:var(--cream); background:rgba(33,28,33,.6);
  text-decoration:none; cursor:pointer; transition:border-color .3s ease, background .3s ease}
.appstore-badge:hover{border-color:rgba(199,154,74,.55); background:rgba(45,38,45,.7)}
.appstore-badge svg{flex:0 0 auto}
.appstore-badge .l1{display:block; font-size:11px; color:var(--soft); line-height:1.2}
.appstore-badge .l2{display:block; font-family:var(--sans); font-weight:600; font-size:17px; line-height:1.25}

/* emblem */
.hero-art{position:relative; display:flex; align-items:center; justify-content:center}
.emblem-halo{position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(199,154,74,.28), transparent 64%); filter:blur(26px);
  animation:halo 7s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.75; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}}
.emblem{width:min(430px,86%); height:auto; position:relative}
.emblem .ringpath{animation:spin 140s linear infinite; transform-origin:100px 100px}
@keyframes spin{to{transform:rotate(360deg)}}
.emblem .seat{transform-box:fill-box; transform-origin:center; animation:breathe 5.6s ease-in-out infinite}
.emblem .seat:nth-of-type(2){animation-delay:.7s}
.emblem .seat:nth-of-type(3){animation-delay:1.4s}
.emblem .seat:nth-of-type(4){animation-delay:2.1s}
.emblem .seat:nth-of-type(5){animation-delay:2.8s}
.emblem .seat:nth-of-type(6){animation-delay:3.5s}
.emblem .seat:nth-of-type(7){animation-delay:4.2s}
.emblem .seat:nth-of-type(8){animation-delay:4.9s}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.14)}}

.hero-scroll{position:relative; z-index:1; margin-top:clamp(44px,7vw,72px); text-align:center;
  color:var(--faint); font-size:12px; letter-spacing:.22em; text-transform:uppercase}
.hero-scroll i{display:block; width:1px; height:34px; margin:0 auto 10px;
  background:linear-gradient(180deg, var(--gold), transparent); animation:sink 2.2s ease-in-out infinite}
@keyframes sink{0%,100%{opacity:.35; transform:scaleY(.7); transform-origin:top} 50%{opacity:1; transform:scaleY(1)}}

/* ---------- marquee ---------- */
.marq{overflow:hidden; border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
  background:var(--night-hi); padding:15px 0; white-space:nowrap}
.marq .track{display:inline-block; animation:marq 34s linear infinite}
.marq span{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--soft)}
.marq b{color:var(--gold); font-weight:400}
@keyframes marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marq .track,.emblem .ringpath,.emblem .seat,.emblem-halo,.hero-glow::before,.hero-glow::after,
  .hero-scroll i{animation:none}
  .ln > span{transform:none; animation:none}
}

/* ---------- sections ---------- */
.section{padding:clamp(70px,10vw,120px) 0; position:relative}
.section-title{font-family:var(--serif); font-weight:600; letter-spacing:-.015em; line-height:1.08;
  font-size:clamp(30px,4.6vw,46px); margin:0 0 16px; text-wrap:balance}
.section-lede{max-width:58ch; font-size:clamp(16px,2vw,19px); margin:0 0 44px}

/* light (daylight) sections */
.light{background:
  radial-gradient(820px 420px at 88% 0%, rgba(110,42,72,.07), transparent 60%),
  linear-gradient(180deg, var(--ivory-hi), var(--ivory) 46%);
  color:var(--ink)}
.light .section-lede{color:var(--ink-soft)}
.light a{color:var(--plum)}

/* feature cards (spotlight) */
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:860px){ .feats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .feats{grid-template-columns:1fr} }
.feat{position:relative; background:var(--ivory-hi); border:1px solid var(--line-l); border-radius:20px;
  padding:26px; overflow:hidden;
  box-shadow:0 1px 2px rgba(28,26,23,.05), 0 14px 34px -18px rgba(28,26,23,.18)}
.feat::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%), rgba(199,154,74,.14), transparent 70%)}
.feat:hover::before{opacity:1}
.feat-ic{width:46px; height:46px; border-radius:14px; background:#F3E7EC; color:var(--plum);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.feat h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:0 0 8px; letter-spacing:-.01em}
.feat p{margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55}

/* ---------- screenshots ---------- */
.shots{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,26px); align-items:start}
@media (max-width:860px){
  .shots{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px;
    margin:0 -24px; padding-left:24px; padding-right:24px}
  .shot{flex:0 0 62vw; max-width:290px; scroll-snap-align:center}
}
.shot{border-radius:34px; overflow:hidden; border:7px solid #24202480;
  outline:1px solid var(--line-l);
  box-shadow:0 2px 5px rgba(28,26,23,.08), 0 30px 60px -26px rgba(28,26,23,.38);
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.shot:hover{transform:translateY(-8px)}
.shot img{width:100%}
.shot:nth-child(2){transform:translateY(26px)} .shot:nth-child(2):hover{transform:translateY(18px)}
.shot:nth-child(4){transform:translateY(26px)} .shot:nth-child(4):hover{transform:translateY(18px)}
@media (max-width:860px){ .shot:nth-child(2),.shot:nth-child(4){transform:none} }

/* ---------- demo ---------- */
.demo-stage{position:relative; margin:0 auto; max-width:660px; user-select:none; -webkit-user-select:none}
.demo-board{position:relative; height:420px; border-radius:26px; border:1px solid var(--line-d);
  background:
    radial-gradient(340px 250px at 50% 40%, rgba(199,154,74,.10), transparent 70%),
    linear-gradient(180deg, var(--night-hi), var(--card-d))}
.demo-table{position:absolute; left:50%; top:44%; width:150px; height:150px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--card-d); border:1px solid var(--line-d);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(251,243,233,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.demo-table .t1{font-family:var(--serif); font-weight:600; font-size:24px; color:var(--cream)}
.demo-table .t2{font-size:11px; color:var(--faint); letter-spacing:.08em}
.demo-seat{position:absolute; width:44px; height:44px; border-radius:50%; transform:translate(-50%,-50%);
  border:1.6px dashed var(--faint); background:rgba(251,243,233,.045);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; font-size:16px; color:var(--cream);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease}
.demo-seat.near{border-color:var(--gold-hi); box-shadow:0 0 0 6px rgba(199,154,74,.15)}
.demo-seat.filled{border-style:solid; border-color:transparent; background:linear-gradient(180deg,var(--plum-fill),var(--plum-deep));
  box-shadow:0 10px 22px -10px rgba(110,42,72,.8)}
.demo-seat.filled.gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:#4A3208}
.demo-seat.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
.demo-swap{position:absolute; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--night-hi); border:1.5px solid var(--gold); color:var(--gold-hi);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; box-shadow:0 8px 18px -8px rgba(0,0,0,.7);
  transition:transform .2s ease, box-shadow .2s ease; animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
.demo-swap:hover{transform:translate(-50%,-50%) scale(1.14); box-shadow:0 0 0 6px rgba(199,154,74,.14)}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.7)} 100%{transform:translate(-50%,-50%) scale(1)}}
.demo-tray{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:22px; min-height:52px}
.chip{display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 9px; border-radius:100px;
  background:var(--card-d); border:1px solid var(--line-d); color:var(--cream);
  font-weight:600; font-size:14.5px; cursor:grab; touch-action:none;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6); transition:box-shadow .2s ease, opacity .3s ease}
.chip:active{cursor:grabbing}
.chip .ci{width:30px; height:30px; border-radius:50%; background:#3A2430; color:var(--rose);
  font-family:var(--serif); display:flex; align-items:center; justify-content:center; font-size:13px}
.chip .p1{font-size:11px; font-weight:600; color:var(--gold-hi); border:1px solid rgba(199,154,74,.5);
  border-radius:100px; padding:2px 8px}
.chip.dragging{position:fixed; z-index:60; pointer-events:none; box-shadow:0 26px 50px -18px rgba(0,0,0,.8)}
.chip.seated{opacity:0; pointer-events:none; transform:scale(.7); transition:opacity .3s, transform .3s}
.demo-note{text-align:center; color:var(--faint); font-size:13.5px; margin-top:16px}
.demo-note button{background:none; border:none; color:var(--rose); font:inherit; font-weight:600; cursor:pointer; padding:0}
.demo-done{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:26px; background:rgba(20,18,21,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .5s ease}
.demo-done.show{opacity:1}
.demo-done p{font-family:var(--serif); font-style:italic; font-size:clamp(21px,3vw,27px); color:var(--gold-hi); margin:0}

/* ---------- privacy strip ---------- */
.priv{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
@media (max-width:760px){ .priv{grid-template-columns:1fr} }
.priv-item{border:1px solid var(--line-d); border-radius:18px; padding:22px; background:var(--night-hi)}
.priv-item h3{font-family:var(--serif); font-weight:600; font-size:19px; margin:8px 0 6px}
.priv-item p{margin:0; color:var(--soft); font-size:14.5px}
.priv-item .dot{width:10px; height:10px; border-radius:50%; background:var(--gold); display:block}

/* ---------- pricing ---------- */
.price-card{max-width:620px; margin:0 auto; text-align:center; border:1px solid var(--line-d);
  border-radius:26px; padding:clamp(30px,5vw,48px);
  background:
    radial-gradient(420px 240px at 50% -10%, rgba(199,154,74,.13), transparent 70%),
    var(--night-hi)}
.price-card .big{font-family:var(--serif); font-weight:600; font-size:clamp(40px,6vw,56px); margin:6px 0 2px}
.price-card .per{color:var(--soft); margin:0 0 22px; font-size:15px}
.price-feats{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:10px; text-align:left;
  max-width:340px; margin-left:auto; margin-right:auto}
.price-feats li{display:flex; gap:10px; align-items:baseline; color:var(--cream); font-size:15.5px}
.price-feats li::before{content:"◆"; color:var(--gold); font-size:10px; flex:0 0 auto}
.price-note{color:var(--faint); font-size:13.5px; margin-top:16px}

/* ---------- support / footer ---------- */
.support-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.site-foot{border-top:1px solid var(--line-d); padding:34px 0 44px; margin-top:20px}
.foot-links{display:flex; flex-wrap:wrap; gap:22px; margin-bottom:14px}
.foot-links a{color:var(--soft); font-size:14px}
.foot-links a:hover{color:var(--cream)}
.foot-legal,.foot-copy{color:var(--faint); font-size:12.5px; line-height:1.7}

/* ---------- reveals ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} }