/* Swapaboo waiting list — one shared design system for every page (open, invitation, you,
   unsubscribe, privacy). Cream is the ground, edge to edge; lighter-cream blocks float on it with
   ink outlines and coloured shadows. No page-wrapping card. Reference design: landing-v6. */
:root{
  --ink:#33415C; --slate:#5A6785; --paper:#FFF8EE; --card:#FFFDF8; --muted:#E7E4DE;
  --sun:#FFC94D; --sunT:#FFEDBE; --sky:#8FD0F2; --skyT:#D9EEFA;
  --pink:#F58FA4; --pinkT:#FBDCE2; --green:#6FBF77; --grnT:#D6EDDA;
  --ink-soft:#5A6785; --cream:#FFFDF8;   /* aliases: blocks are the lighter cream */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:'Fredoka',sans-serif;color:var(--ink);line-height:1.4;
  padding:24px 16px 60px}
a{color:var(--ink)}
img{display:block;max-width:100%}

/* the page: a centred content column on the cream ground, no frame */
.pg{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.pg > div:empty{display:none}   /* async placeholders (invite card, bubble, returning) add no gap until filled */
.hd{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:13px;border-bottom:2px solid rgba(51,65,92,.14)}
.logo{font-size:clamp(22px,3.1vw,46px);font-weight:600;letter-spacing:-.3px;display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo i{display:inline-block;border-radius:50%;border:.1em solid var(--ink);width:.64em;height:.64em}
.logo .k1{background:var(--sun)} .logo .k2{background:var(--pink);margin-left:-.17em}
.hd .inv{font-size:12.5px;color:var(--slate);font-weight:500;text-align:right}

/* headings */
.h{font-size:clamp(28px,4.6vw,46px);font-weight:600;line-height:1.1;margin:0}
.h em{font-style:normal;background:var(--sunT);padding:0 6px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub{font-size:16px;color:var(--slate);line-height:1.45;margin:0}
.hand{font-family:'Caveat',cursive;font-weight:700;font-size:20px;color:var(--pink);text-align:center}

/* ══ open page (open-final.html): wider than the shared column so desktop breathes; same order and
   content at every width, only what pairs changes. Container is .pg.pg-wide. ══ */
.pg-wide{max-width:1400px}
.tagline{font-family:'Caveat',cursive;font-weight:700;color:var(--pink);font-size:clamp(14px,1.6vw,20px)}

/* hero: headline + pitch left, video right (desktop). Mobile: headline, video, then pitch + form.
   Grid areas keep the same three pieces in one markup at both widths. */
.hero{display:grid;grid-template-columns:1fr;grid-template-areas:"head" "video" "pitch";gap:18px;align-items:center}
@media(min-width:760px){.hero{grid-template-columns:1fr 320px;grid-template-areas:"head video" "pitch video";column-gap:48px;row-gap:16px}}
.hero > .hh{grid-area:head} .hero .vidwrap{grid-area:video} .hero .pitch{grid-area:pitch}
.hh{font-weight:600;line-height:1.07;margin:0;font-size:clamp(29px,3.6vw,50px)}
.hh em{font-style:normal;background:var(--sunT);padding:0 7px;border-radius:7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vidwrap{display:flex;justify-content:center;align-items:center}
.vid{position:relative;background:var(--ink);border-radius:26px;padding:9px;box-shadow:5px 5px 0 rgba(51,65,92,.22);width:clamp(172px,20vw,210px)}
.screen{background:#C9BFAF;border-radius:18px;aspect-ratio:9/16;width:100%;object-fit:cover;display:block}
/* unmute toggle — the video autoplays muted (browsers require it); this turns the sound on */
.vidmute{position:absolute;right:15px;bottom:15px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--card);font-size:15px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--ink)}

/* one-email form + step two */
.f1{display:flex;gap:10px}
@media(max-width:559px){.f1{flex-direction:column;gap:8px}}
/* width via max-width, never flex-basis: a fixed basis resolves as a WIDTH in the desktop row but as a
   HEIGHT in the mobile column, and border-radius:999px then makes a ~420px-tall pill of the field. Basis
   auto takes its main size from width (row) or content height (column), so it can't balloon either way. */
.inp{background:var(--card);border:2.5px solid var(--ink);border-radius:999px;padding:13px 19px;color:var(--ink);font-size:clamp(14.5px,1.2vw,16px);flex:0 1 auto;width:100%;max-width:420px;min-width:0;font-family:inherit}
.inp::placeholder{color:var(--slate)}
.inp:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* step two stacks its inputs in a column, where the row's flex-basis:420 would become a 420px HEIGHT
   (a circle). Reset to content height, full column width. */
#step2form .inp{flex:0 0 auto;width:100%;max-width:none}
.f1 .btn{flex:none;width:auto;white-space:nowrap;margin-top:0;padding:13px 26px}
.why{margin:0 0 12px;font-size:clamp(13px,1.2vw,14.5px);line-height:1.45}

/* 85% band */
.band{margin-top:34px;background:var(--sunT);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--sun);padding:20px 26px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.band .n{font-size:clamp(46px,5vw,62px);font-weight:600;line-height:1}
.band .t{font-size:clamp(15px,1.5vw,19px);font-weight:600;line-height:1.3}
.band .t span{display:block;font-size:clamp(12px,1.1vw,14px);font-weight:400;color:var(--slate);margin-top:2px}
@media(max-width:559px){.band{flex-direction:column;gap:4px;text-align:center}}

.sect{margin-top:34px}
/* section kicker: small uppercase pink label above a sentence headline (the live-site rhythm) */
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:600;color:var(--pink);margin:0 0 6px}
.shd{font-size:clamp(20px,2.1vw,26px);font-weight:600;line-height:1.15;margin:0 0 15px}

/* five illustrated steps, horizontal with arrows; reflow to a list on phones */
.steps{display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:20px 14px}
.st{text-align:center;padding:0 8px;position:relative}
.st img{width:clamp(52px,8vw,104px);display:block;margin:0 auto 8px;border-radius:10px}
.st b{display:block;font-weight:600;line-height:1.3;font-size:clamp(13.5px,1.1vw,14.5px);min-height:2.6em}
.st .n{width:clamp(20px,1.7vw,24px);height:clamp(20px,1.7vw,24px);border:2.5px solid var(--ink);border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(10.5px,.9vw,12px);flex-shrink:0}
.st:not(:last-child):after{content:"\2192";position:absolute;right:-8px;top:38%;color:var(--slate);opacity:.55;font-size:clamp(15px,1.6vw,21px)}
/* the loop line: prominent, since the how-it-works headline no longer carries the cycle */
.ret{text-align:center;color:var(--ink);margin:16px auto 0;max-width:660px;background:var(--grnT);border:2.5px solid var(--ink);border-radius:999px;padding:11px 22px;font-weight:600;font-size:clamp(13.5px,1.3vw,16px);box-shadow:3px 3px 0 var(--green)}
.ret b{color:var(--ink);font-weight:700}
@media(max-width:639px){
  .steps{grid-template-columns:1fr;padding:14px 12px}
  .st{display:flex;align-items:center;gap:11px;text-align:left;padding:9px 0}
  .st+.st{border-top:2px solid rgba(51,65,92,.1)}
  .st img{margin:0}.st .n{margin:0}.st b{min-height:0}
  .st:not(:last-child):after{display:none}
}

/* three reassurance cards */
.assure{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:559px){.assure{grid-template-columns:1fr;gap:8px}}
.as{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;padding:14px 16px;font-size:clamp(13px,1.1vw,14px);line-height:1.4;box-shadow:4px 4px 0 var(--sky)}
.as:nth-child(2){box-shadow:4px 4px 0 var(--sun)}
.as:nth-child(3){box-shadow:4px 4px 0 var(--green)}
.as b{display:block;font-weight:600;margin-bottom:2px}
.as span{color:var(--slate);font-size:clamp(12px,1vw,13px)}

/* sell-vs-swap comparison — the effort argument */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
@media(max-width:639px){.two{grid-template-columns:1fr;gap:10px}}
.cmp{background:var(--card);border:2.5px solid var(--ink);border-radius:15px;padding:18px 20px}
.cmp.bad{background:var(--pinkT);box-shadow:5px 5px 0 var(--pink)}
.cmp.good{background:var(--grnT);box-shadow:5px 5px 0 var(--green)}
.cmp h5{margin:0 0 9px;font-size:clamp(14.5px,1.3vw,16px);font-weight:600}
.cmp ul{margin:0;padding:0;list-style:none}
.cmp li{display:flex;gap:8px;font-size:clamp(12.5px,1.1vw,14px);line-height:1.45;padding:5px 0}
.cmp li+li{border-top:2px solid rgba(51,65,92,.08)}
.cmp.bad li+li,.cmp.good li+li{border-top-color:rgba(51,65,92,.14)}
.mark{width:20px;height:20px;border:2.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;margin-top:1px;flex-shrink:0}
.no{background:var(--pink);color:var(--ink)} .yes{background:var(--green);color:var(--ink)}

/* sustainability block — two columns: the problem (loft stat + lead) left, the evidence (chart) right */
.green{background:var(--grnT);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--green);padding:24px 26px;margin-top:34px;display:grid;grid-template-columns:1fr 1.15fr;gap:38px;align-items:center}
@media(max-width:679px){.green{grid-template-columns:1fr;gap:20px;padding:18px}}
.loftstat .big30{font-size:clamp(40px,5vw,58px);font-weight:600;line-height:1;display:block}
.loftlab{display:block;margin-top:6px;font-size:clamp(16px,1.7vw,20px);font-weight:600;line-height:1.25}
.destlead{margin:14px 0 0;font-size:clamp(13px,1.2vw,14.5px);line-height:1.5}
/* where used textiles actually go — a small sourced bar chart (one claim, one source, checkable) */
.dest{display:flex;flex-direction:column;gap:9px;margin:0 0 12px}
.db{display:grid;grid-template-columns:126px minmax(0,260px) 30px;align-items:center;gap:9px}
.dl{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2;white-space:nowrap}
.dtrack{display:block;height:15px;background:rgba(51,65,92,.09);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.dfill{display:block;height:100%;border-radius:999px 0 0 999px;background:var(--sun)}
.dfill.bad{background:var(--pink)} .dfill.good{background:var(--green)}
.dv{font-size:14px;font-weight:700;color:var(--ink);text-align:right}
.destnote{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4}
.green .basis{text-align:left;margin:0;font-size:11px;font-weight:400;color:var(--slate)}

/* Sophie */
.kickhand{font-family:'Caveat',cursive;font-weight:700;color:var(--pink);font-size:clamp(19px,2vw,24px);margin:34px 0 12px;text-align:center}
.pg-wide .sophRow{max-width:920px;margin-left:auto;margin-right:auto}
.pg-wide .bub{box-shadow:4px 4px 0 var(--sky);font-size:clamp(13.5px,1.2vw,15.5px);padding:15px 18px}

/* invitation page: the pink banner, the perks (numbered coloured dots from the open page), Sophie's note */
.invBan{background:var(--pinkT);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--pink);text-align:center;padding:18px 22px;margin:0 0 24px}
.invBan b{display:block;font-weight:600;line-height:1.2;font-size:clamp(19px,2.2vw,26px)}
.invBan span{display:block;color:var(--slate);margin-top:4px;font-size:clamp(13px,1.3vw,15px)}
/* Before invite.js resolves the inviter's name (an RPC round trip, visible on production), the banner
   holds its full box and shows a subtle loading shimmer rather than an empty card that then shifts the
   page when the words arrive. :empty stops matching the instant renderInvite fills it. */
.pg>.invBan:empty{min-height:clamp(80px,9vw,92px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}  /* out-specify the .pg>div:empty collapse above, for this banner only */
.invBan:empty::before,.invBan:empty::after{content:"";display:block;border-radius:8px;background:var(--pink);background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.6) 50%,transparent 100%);background-size:180% 100%;background-repeat:no-repeat;animation:invShim 1.2s ease-in-out infinite}
.invBan:empty::before{width:min(360px,82%);height:24px;opacity:.6}
.invBan:empty::after{width:min(230px,62%);height:14px;opacity:.45}
@keyframes invShim{from{background-position:180% 0}to{background-position:-80% 0}}
@media(prefers-reduced-motion:reduce){.invBan:empty::before,.invBan:empty::after{animation:none}}
.pk{display:flex;gap:10px;align-items:flex-start;font-size:clamp(13px,1.15vw,14px);line-height:1.4}
.pk+.pk{margin-top:9px}
.pk .d{width:22px;height:22px;border:2.5px solid var(--ink);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.pk .d1{background:var(--sun)} .pk .d2{background:var(--pink)} .pk .d3{background:var(--sky)}
.build{margin-top:34px;background:var(--skyT);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--sky);padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media(max-width:679px){.build{grid-template-columns:1fr;gap:14px;padding:18px}}
.build p{margin:0;font-size:clamp(14px,1.3vw,16px);line-height:1.55}
.build p+p{margin-top:9px}
.build .sig{font-family:'Caveat',cursive;font-weight:700;color:var(--pink);font-size:clamp(18px,1.8vw,20px);margin-top:10px;display:block}
.bigSoph{width:74px;height:74px}
@media(max-width:679px){.bigSoph{width:56px;height:56px}}

/* expandable FAQ — real <details>, works without JS; each question its own card */
.qa-list{display:block}
.qa{background:var(--card);border:2.5px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 rgba(51,65,92,.08);margin:0 0 12px}
.qa summary{list-style:none;cursor:pointer;position:relative;padding:15px 50px 15px 18px;font-size:clamp(14.5px,1.3vw,16.5px);font-weight:600;line-height:1.35}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:25px;font-weight:700;color:var(--pink);line-height:1}
.qa[open] summary:after{content:"\2212"}
.qa p{margin:0;padding:0 18px 16px;font-size:clamp(13px,1.1vw,14.5px);color:var(--slate);line-height:1.55}

/* step two, rendered in place of the hero (inherits the column, capped and centred) */
.hero.done{display:block;max-width:920px;margin:22px auto 0}
.tick{width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;font-weight:700}
.onecol{max-width:500px;margin-left:auto;margin-right:auto}
.flab{font-weight:600;font-size:14px;margin-top:4px}
.skip,.nothanks{display:block;text-align:center;margin-top:11px;font-size:13px;color:var(--slate);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;width:100%}
/* the "save your link" block on the invitations screen */
.ownlink{margin-top:16px;background:var(--skyT);border:2.5px solid var(--ink);border-radius:14px;padding:13px 15px}
.ownlink-note{margin:0 0 9px;font-size:13px;color:var(--ink);line-height:1.45}
.ownlink-row{display:flex;gap:8px;align-items:center}
.ownlink-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:7px 10px}
.ownlink-copy{flex:none;border:2.5px solid var(--ink);border-radius:999px;background:var(--sun);padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}

/* exit popup (desktop only) */
.pop-overlay{position:fixed;inset:0;background:rgba(51,65,92,.42);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.pop{background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 rgba(51,65,92,.25);padding:26px 30px;max-width:520px;width:100%}
.pop h4{margin:0 0 8px;font-size:clamp(22px,2.2vw,26px);font-weight:600;text-align:center}
.pop p{margin:0 0 16px;font-size:15px;line-height:1.5;text-align:center;color:var(--slate)}

/* open/step-two chips flex-wrap (the invitation keeps its grid) */
.pg-wide .chips{display:flex;flex-wrap:wrap;gap:6px}
.pg-wide .chip{width:auto;padding:5px 12px;font-size:13px}

/* step-number dots — coloured, shared by the open page and the invitation how-it-works steps */
.n1{background:var(--sun)}.n2{background:var(--pink)}.n3{background:var(--sky)}.n4{background:var(--green)}.n5{background:var(--sun)}

/* the sun-card treatment: the open-page and invitation ask */
.ask{background:var(--sunT);border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--sun);padding:18px 20px;margin-top:22px}
.ask h4{margin:0 0 4px;font-size:clamp(16px,1.5vw,19px);font-weight:600}

/* returning + invite notes */
.returning{background:var(--grnT);border:2.5px solid var(--ink);border-radius:12px;padding:9px 13px;font-weight:600;font-size:13px;margin:0 0 11px}
.returning a{font-weight:700;color:var(--ink)}

/* form controls (chips, button, messages; wired to app.js / open.js / invite.js) */
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media(max-width:540px){.chips{grid-template-columns:repeat(3,1fr)}}
.chip{border:2.5px solid var(--ink);border-radius:999px;padding:6px 9px;font-size:13px;font-weight:500;background:var(--card);color:var(--ink);cursor:pointer;width:100%;font-family:inherit}
.chip.on{background:var(--sky)}
.btn{border:2.5px solid var(--ink);border-radius:999px;padding:12px 16px;text-align:center;font-size:15px;font-weight:600;
  background:var(--green);box-shadow:4px 4px 0 var(--ink);width:100%;cursor:pointer;font-family:inherit;color:var(--ink);text-decoration:none;display:block;margin-top:4px;
  transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.wl-msg{font-weight:600;font-size:14.5px;color:#2F7D3A;text-align:center;min-height:1px}
.wl-msg.err{color:var(--pink)}
.fine{font-size:12px;color:var(--slate);text-align:center;line-height:1.45;margin:4px 0 0}
.fine a{color:var(--slate)}

/* Sophie: avatar + speech bubble (open + invitation pages) */
.sophRow{display:flex;gap:11px;align-items:flex-start}
.sophCol{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.soph{width:56px;height:56px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover;object-position:top center;background:var(--card)}
.cap{font-size:10.5px;color:var(--slate);font-weight:500;white-space:nowrap}
.bub{background:var(--card);border:2.5px solid var(--ink);border-radius:4px 15px 15px 15px;padding:11px 13px;font-size:14.5px;line-height:1.45;flex:1;min-width:0;overflow-wrap:break-word}
.bub b{font-weight:600}

/* the maths basis / source line (open page) */
.basis{font-size:12px;color:var(--slate);line-height:1.45;text-align:center}

/* footer */
.foot{display:flex;justify-content:space-between;font-size:12px;color:var(--slate);padding-top:13px;border-top:2px solid rgba(51,65,92,.14);gap:12px}
.foot a{color:var(--slate)}

/* ── your page (/you/) ─────────────────────────────────────────────────── */
.loading{padding:34px 0;font-weight:600;color:var(--slate);text-align:center}
.you-head{text-align:center;margin-bottom:18px}
/* badge component — an outlined, coloured object worth screenshotting. Variants by colour; reusable. */
.badge{display:inline-flex;flex-direction:column;align-items:center;gap:1px;border:2.5px solid var(--ink);border-radius:16px;padding:11px 28px}
.badge-sun{background:var(--sunT);box-shadow:5px 5px 0 var(--sun)}
.badge-sky{background:var(--skyT);box-shadow:5px 5px 0 var(--sky)}
.badge-pink{background:var(--pinkT);box-shadow:5px 5px 0 var(--pink)}
.badge-kick{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ink)}
.badge-no{font-size:clamp(40px,11vw,54px);font-weight:600;line-height:1.02;color:var(--ink)}
.badge-no .of{font-size:.42em;font-weight:600;color:var(--slate)}
.badge-title{font-size:clamp(20px,5vw,25px);font-weight:600;color:var(--ink);line-height:1.1}
.you-hi{margin:12px auto 0;font-size:16px;font-weight:500;color:var(--slate);max-width:46ch}
.you-h3{font-size:17px;font-weight:600;margin:26px 0 11px}
.benefits{display:flex;flex-direction:column;gap:10px;background:var(--card);border:2.5px solid var(--ink);border-radius:16px;padding:16px 18px}
/* the five steps as a vertical list (the narrow /you column; the grid version is for the wide pages) */
.steps-list{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:6px 16px}
.steps-list .st{display:flex;align-items:center;gap:13px;text-align:left;padding:11px 0;border-top:2px solid rgba(51,65,92,.1);position:static}
.steps-list .st:first-child{border-top:none}
.steps-list .st img{width:52px;margin:0;border-radius:10px}
.steps-list .st .n{margin:0}
.steps-list .st b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;min-height:0}
.steps-list .st:after{display:none}
.invites{display:flex;flex-direction:column;gap:11px}
.inv{border:2.5px solid var(--ink);border-radius:14px;padding:14px 15px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;background:var(--card)}
.inv .ico{font-size:24px;line-height:1;flex:none}
.inv b{font-size:16px;font-weight:600;display:block;line-height:1.2}
.inv .sub{display:block;font-weight:500;font-size:14px;color:var(--slate);margin-top:3px}
.inv .sub a{font-weight:700;color:var(--ink)}
.inv-body{flex:1;min-width:0}   /* min-width:0 lets it shrink below its content so the card can't push wider than the viewport */
.inv-body b,.inv-body .sub{overflow-wrap:break-word}
.inv-taken{background:var(--grnT);border-color:var(--green)}
.inv-taken b{color:#2F7D3A}
.inv-sent{background:var(--sunT)}
.give-btn{flex:none;align-self:center;width:auto;padding:9px 16px;font-size:14px;margin:0}
.give-slot{flex-basis:100%}   /* wraps to a full-width row below the card header, so the panel gets it all */
.give-slot:empty{display:none}
.copy-panel{margin-top:0}
.copy-text{box-sizing:border-box;width:100%;font-family:'Fredoka',sans-serif;font-weight:500;font-size:14.5px;color:var(--ink);background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:11px 13px;resize:vertical;line-height:1.4;overflow:hidden}
.give-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.wa-btn,.copy-btn{border:2.5px solid var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink)}
.wa-btn{background:#25D366;box-shadow:2px 2px 0 var(--ink)}
.copy-btn{background:var(--card)}
.copy-done{display:block;margin-top:6px;font-weight:700;font-size:13px;color:#2F7D3A}
.give-hint{font-weight:500;font-size:14.5px;color:var(--slate);margin-top:2px}
.all-taken{background:var(--sunT);border:2.5px solid var(--ink);border-radius:14px;padding:12px 15px;font-weight:600;font-size:15px;line-height:1.4}
.all-taken a{font-weight:700;color:var(--ink)}

/* ── privacy page ──────────────────────────────────────────────────────── */
.prose h2{font-size:19px;font-weight:600;margin:24px 0 6px}
.prose p,.prose li{font-size:15px;color:var(--ink);line-height:1.6}
.prose ul{padding-left:20px;margin:6px 0}
.prose li{margin:7px 0}
.prose .field{font-weight:600}
.updated{color:var(--slate);font-weight:500;font-size:13.5px}
.box{background:var(--card);border:2.5px solid var(--ink);border-radius:15px;box-shadow:5px 5px 0 var(--sky);padding:16px 18px;margin:16px 0}
.box.kids{box-shadow:5px 5px 0 var(--green)}
.box .tldr{font-family:'Caveat',cursive;font-weight:700;font-size:21px;color:var(--pink);margin:0 0 4px}