/* BACKPAICK · web system v3 "paper and punch"
   Shared by backpaick.com (SITE/) and the beta application (BETA-SITE/). Built from APP/app.css:
   white or black base, white containers lifted with layered shadows, Inter for everything,
   Instrument Serif italic for one phrase, color only as accents and buttons. */
:root{
  /* PALETTE v4 (official 2026-10-28): black and white carry the page; color is sparing and always color on color.
     fields / ink: Red/Pink · Pink/Green (display only) · Green/Lime · Lime/Cerulean · Cerulean/Sky. Tints are 70/45/25% over Paper, never for type. */
  --red:#6A0D0F;--pink:#FF8ED1;--green:#0F5B2E;--lime:#D7F87C;--cerulean:#0F5B7A;--sky:#7FEDFF;--sage:#D9DED4;
  --ink:#000;--paper:#FFFFFF;--gray:#444;--mute:#6E6F69;--line:#D9DED4;--soft:#F3F3EE;
  /* older names now point at the new fields so every existing rule lands on the palette */
  --orange:var(--red);--peach:var(--sage);--forest:var(--green);--lilac:var(--pink);--violet:var(--cerulean);
  --sh:0 0 0 1px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.05),0 10px 24px -6px rgba(0,0,0,.12);
  --sh2:0 0 0 1px rgba(0,0,0,.04),0 2px 4px rgba(0,0,0,.06),0 18px 40px -10px rgba(0,0,0,.18);
  --sh3:0 1px 2px rgba(0,0,0,.08),0 10px 20px -6px rgba(0,0,0,.18),0 34px 60px -18px rgba(0,0,0,.28);
  --gut:clamp(20px,4vw,56px);--max:1360px;--nav:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.45 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;text-align:left}
input,textarea,select{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- type ---------- */
.display{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.86}
.display .ln{display:block;white-space:nowrap}
.display .i,.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.012em}
.display .i{font-size:1.06em}
.h2{font:900 clamp(34px,6.4vw,88px)/.9 Inter;text-transform:uppercase;letter-spacing:-.045em}
.h2 .i{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.012em;font-size:1.06em}
.h3{font:800 clamp(22px,2.6vw,30px)/1.05 Inter;letter-spacing:-.035em}
.hx{font:400 clamp(30px,4.4vw,56px)/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-.012em}
.hx small{display:block;font-size:.6em;line-height:1.15;color:var(--gray);margin-top:.2em}
.eyebrow{font:700 11px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.cap{font:500 12px/1.5 Inter;color:var(--gray);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.lead{font:600 clamp(17px,1.5vw,21px)/1.3 Inter;letter-spacing:-.015em;max-width:34ch}
.body{font:400 16px/1.45 Inter;max-width:36ch}
.body+.body{margin-top:12px}
.body b{font-weight:700}
.narrow{max-width:30ch}
.mark{background:var(--lime);padding:0 .08em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark.l{background:var(--lilac)}.mark.p{background:var(--peach)}.mark.o{background:var(--orange)}

/* ---------- the lockup (same geometry as the app) ---------- */
.lockup{--wmh:16px;display:inline-flex;align-items:center;gap:calc(var(--wmh)*.283);flex:none}
.lockup .pk{height:calc(var(--wmh)*1.417);width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22)) drop-shadow(0 5px 9px rgba(0,0,0,.16))}
.lockup .wm{height:var(--wmh);width:auto}
.lockup.big{--wmh:34px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:60;display:flex;align-items:center;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .links{display:flex;gap:4px;align-items:center}
.nav .links a{font:600 14px Inter;padding:9px 12px;border-radius:999px}
.nav .links a:hover{background:var(--soft)}
@media(max-width:760px){.nav .links a:not(.btn){display:none}}
body.dark .nav{background:rgba(17,17,17,.82);color:#fff}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font:600 15px Inter;white-space:nowrap;box-shadow:0 10px 22px -8px rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.violet{background:var(--violet);color:#fff;box-shadow:0 10px 22px -8px rgba(122,76,238,.55)}
.btn.pink{background:var(--pink);color:var(--ink);box-shadow:0 10px 22px -8px rgba(214,90,214,.45)}
.btn.white{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.sm{height:40px;padding:0 16px;font-size:14px}
.btn.lg{height:60px;padding:0 28px;font-size:17px}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.nav .btn{height:40px;padding:0 16px;font-size:14px}
.num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:800 12px Inter;box-shadow:inset 0 0 0 1.5px currentColor;flex:none}
.num.fill{background:var(--ink);color:#fff;box-shadow:none}
.num.lime{background:var(--lime);box-shadow:none}.num.lilac{background:var(--lilac);box-shadow:none}.num.peach{background:var(--peach);box-shadow:none}.num.orange{background:var(--orange);box-shadow:none}
.tag{display:inline-flex;align-items:center;font:700 12px Inter;background:var(--soft);color:var(--ink);border-radius:999px;padding:6px 11px;white-space:nowrap}
.tag.need{background:var(--orange)}.tag.up{background:var(--lime)}.tag.bring{background:var(--lilac)}.tag.info{background:var(--peach)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:999px;background:#fff;box-shadow:var(--sh);font:600 14px Inter;color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}

/* pills = real inputs with a styled span (Netlify reads the inputs) */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-flex;align-items:center;gap:9px;font:600 15px/1 Inter;padding:14px 18px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:var(--sh);transition:transform .12s,background .12s,box-shadow .12s;user-select:none}
.pills span::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background .12s}
.pills label:active span{transform:scale(.96)}
.pills input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.pills input:checked+span::before{background:var(--lime);box-shadow:none}
.pills input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.pills.big span{font-size:17px;padding:16px 20px}
.field{margin-bottom:12px}
.field label{display:block;font:700 13px Inter;margin-bottom:7px}
.field label small{font-weight:500;color:var(--gray)}
.field input,.field textarea{width:100%;font:500 17px Inter;padding:15px 16px;border:0;border-radius:16px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);-webkit-appearance:none}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--mute)}
.field textarea{min-height:110px;resize:vertical;line-height:1.4}

/* ---------- containers ---------- */
.card{background:#fff;border-radius:26px;box-shadow:var(--sh);padding:24px}
.card.lift{box-shadow:var(--sh2)}
.card.deep{box-shadow:var(--sh3)}
.card.dark{background:var(--ink);color:#fff;box-shadow:none}
.card.soft{background:var(--soft);box-shadow:none}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec.tight{padding:clamp(48px,6vw,88px) 0}
.sec.black{background:var(--ink);color:#fff}
.sec.black .eyebrow,.sec.black .cap{color:#fff}
.sec.black .cap{opacity:.72}
.sec.black .num{color:#fff}
.sec.black .btn.white{box-shadow:none}
.sec.soft{background:var(--soft)}
.sec.soft .card{box-shadow:var(--sh2)}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,36px)}
.kicker .eyebrow{white-space:nowrap}
.kicker .rule{flex:1;height:1px;background:currentColor;opacity:.16}
@media(max-width:640px){.kicker .cap{display:none}}
.row{display:grid;gap:clamp(24px,4vw,64px);align-items:start}
@media(min-width:880px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}.row.c21{grid-template-columns:2fr 1fr}.row.c12{grid-template-columns:1fr 2fr}.row.c32{grid-template-columns:3fr 2fr}}

/* ---------- photos: full color, punchy, with a halftone print over them ---------- */
.cut{position:relative;display:block;width:100%;min-width:0}
.cut .ph{position:relative;z-index:2;overflow:hidden;background:var(--soft)}
.cut .ph img{width:100%;height:100%;object-fit:cover;filter:contrast(1.18) saturate(1.3);transition:transform 1.2s ease}
.cut .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,0,0,.55) .8px,transparent 1.5px);background-size:5px 5px;mix-blend-mode:multiply;opacity:.55}
.cut.flat .ph::after{display:none}
.cut:hover .ph img{transform:scale(1.03)}
.cut .blk{position:absolute;z-index:1;inset:auto;background:var(--lime)}
.cut.arch .ph{border-radius:999px 999px 28px 28px;aspect-ratio:3/4}
.cut.circle .ph{border-radius:50%;aspect-ratio:1}
.cut.pill .ph{border-radius:999px;aspect-ratio:1/1.9}
.cut.slab .ph{border-radius:28px;aspect-ratio:4/3}
.cut.wide .ph{border-radius:28px;aspect-ratio:16/10}
.cut.tall .ph{border-radius:28px;aspect-ratio:3/4}
.cut .blk.tr{top:-14px;right:-14px;width:56%;height:56%;border-radius:28px}
.cut .blk.bl{bottom:-16px;left:-16px;width:62%;height:48%;border-radius:999px}
.cut .blk.l{left:-18px;top:18%;width:40%;height:64%;border-radius:999px}
.cut .blk.lime{background:var(--lime)}.cut .blk.lilac{background:var(--lilac)}.cut .blk.peach{background:var(--peach)}.cut .blk.orange{background:var(--orange)}.cut .blk.pink{background:var(--pink)}.cut .blk.violet{background:var(--violet)}
.cut figcaption{margin-top:30px;position:relative;z-index:2}

/* ---------- the ticker (black strip, words on a loop) ---------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;font:800 13px/1 Inter;letter-spacing:.14em;text-transform:uppercase;padding:14px 0}
.ticker .run{display:inline-flex;gap:0;animation:tick 48s linear infinite;will-change:transform}
.ticker span{display:inline-flex;align-items:center;gap:22px;padding-right:22px}
.ticker i{font-style:normal;color:var(--lime)}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .run{animation:none}}

/* ---------- the phone (390×844 inside, scaled to fit) ---------- */
.phone{--k:.77;width:calc(390px*var(--k));height:calc(844px*var(--k));position:relative;flex:none}
.phone .frame{position:absolute;inset:0;border-radius:calc(56px*var(--k));background:#111;padding:calc(6px*var(--k));box-shadow:0 0 0 1px #3a3a3a,0 30px 70px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.1)}
.phone .scr{position:relative;width:100%;height:100%;border-radius:calc(50px*var(--k));overflow:hidden;background:#fff}
.phone .fit{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--k));transform-origin:0 0;font-family:Inter,system-ui,sans-serif;color:var(--ink)}
.phone .island{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;background:#000;border-radius:20px;z-index:9}
.phone .sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 34px 0 40px;font:600 16px Inter;z-index:8}

/* ---------- the opening ---------- */
.sting{position:fixed;inset:0;background:#fff;overflow:hidden;z-index:100}
.sting .fit{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}
.sting .coin{position:absolute;z-index:3;will-change:transform;background:center/contain no-repeat;filter:drop-shadow(0 6px 6px rgba(0,0,0,.16)) drop-shadow(0 22px 30px rgba(0,0,0,.18))}
.sting .shadow{position:absolute;border-radius:50%;background:radial-gradient(rgba(0,0,0,.26),rgba(0,0,0,0) 70%);z-index:1}
.sting svg.pen{position:absolute;left:0;top:0;width:1600px;height:900px;z-index:2;overflow:visible}
.sting .tap{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);font:600 13px Inter;color:var(--gray);background:var(--soft);border-radius:999px;padding:10px 18px;z-index:5;opacity:0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .cut .ph img{transition:none}
}

/* ---------- footer ---------- */
.foot{padding:56px 0 48px;border-top:1px solid var(--line)}
.foot .grid{display:grid;gap:28px}
@media(min-width:760px){.foot .grid{grid-template-columns:1fr auto}}
.foot .cap a{text-decoration:underline;text-underline-offset:3px}
.foot .cap+.cap{margin-top:6px}


/* ===== Palette v4 · pairs (field, then the ink that sits on it) ===== */
.nav{background:rgba(255,255,255,.88)}
::selection{background:var(--lime);color:var(--cerulean)}
.mark{background:var(--lime);color:var(--cerulean)}
.mark.l{background:var(--pink);color:var(--ink)}.mark.p{background:var(--sage);color:var(--ink)}.mark.o{background:var(--red);color:var(--pink)}
/* the primary button: Blood Red with Pastel Magenta type. On a black ground it flips to Light Lime with Cerulean type */
.btn.violet{background:var(--red);color:var(--pink);box-shadow:0 10px 22px -8px rgba(106,13,15,.45)}
.btn.pink{background:var(--pink);color:var(--ink);box-shadow:0 10px 22px -8px rgba(255,142,209,.55)}
.fx .btn.violet,body.ink .btn.violet{background:var(--lime);color:var(--cerulean);box-shadow:none}
/* chips and numbers */
.num.lime{background:var(--lime);color:var(--cerulean)}.num.lilac{background:var(--pink);color:var(--ink)}.num.peach{background:var(--sage);color:var(--ink)}.num.orange{background:var(--red);color:var(--pink)}
.num.fill{background:var(--ink);color:#fff}
/* states */
.tag.need{background:var(--red);color:var(--pink)}.tag.up{background:var(--lime);color:var(--cerulean)}.tag.bring{background:var(--pink);color:var(--ink)}.tag.info{background:var(--sage);color:var(--ink)}
.tag.changed{background:var(--cerulean);color:var(--sky)}.tag.done{background:var(--green);color:var(--lime)}
.sec.black{background:var(--ink);color:#fff}

/* a full-size tap target for the logo in the top bar */
.nav .lockup{padding:10px 0;margin:-10px 0}