/* ==========================================================================
   picnic — website stylesheet
   Tokens inherited from the Picnic Brand System (Khuli Mehfil identity).
   Written with CSS logical properties throughout so an RTL locale only needs
   `dir="rtl"` on <html> — no stylesheet fork. (spec §12)
   ========================================================================== */

:root{
  /* ---- brand ---- */
  --ink:#100C1C;
  --panel:#1E1633;
  --card:#181229;
  --line:#2E2447;
  --surface:#2A2145;
  --stroke:#3A2E58;

  --cream:#FFF4E4;
  --muted:#B7A9D6;
  --dim:#8E7FB0;
  --faint:#6B5B85;

  --chutney:#FF4A22;  --chutney-dark:#C13413;  --chutney-soft:#FFE3D8;
  --achar:#FFB300;    --achar-dark:#E09E00;
  --paan:#0EAD69;     --paan-deep:#08301F;     --paan-soft:#7FCBA6;
  --jamun:#6C5CE0;

  --sand:#EFE2CC;
  --sand-line:#E6D6BE;
  --bark:#6B5B45;
  --bark-soft:#8A7A63;
  --bark-faint:#B09B78;

  --display:'Gabarito',system-ui,sans-serif;
  --text:'Instrument Sans',system-ui,sans-serif;

  /* ---- scale ---- */
  --r-sm:10px; --r-md:13px; --r-lg:18px; --r-xl:22px;
  --gut:20px;            /* mobile gutter */
  --head-h:112px;        /* sticky header: two rows on a phone, one from 860px.
                            Measured, not guessed - the hero subtracts it. */
  --max:1180px;
}
@media (min-width:768px){ :root{ --gut:36px } }
@media (min-width:860px){ :root{ --head-h:74px } }
@media (min-width:1100px){ :root{ --gut:44px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--panel);
  font-family:var(--text);font-size:16px;line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin:0}
p{margin:0}
ul{margin:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrap-row{display:flex;flex-wrap:wrap}
.grow{flex:1}
.hide-sm{display:none}
@media (min-width:860px){ .hide-sm{display:revert} .hide-lg{display:none} }

.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.small{font-size:13.5px}
.dim{color:var(--dim)}
.bark{color:var(--bark)}
.bark-soft{color:var(--bark-soft)}

/* ---------- logo mark ---------- */
.mark{position:relative;flex:none}
.mark span{position:absolute;inset-inline-start:50%;inset-block-start:50%;border-radius:50%;display:block}
.mark .core{inline-size:.3em;block-size:.3em;margin:-.15em;background:var(--core,var(--chutney))}
.mark .petal{inline-size:.19em;block-size:.19em;margin:-.095em;transform:rotate(var(--a)) translateY(-.36em)}
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:17px;
  padding:15px 24px;border-radius:var(--r-md);border:none;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .05s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--chutney);color:var(--cream)}
.btn--primary:hover{background:var(--chutney-dark)}
.btn--accent{background:var(--achar);color:var(--panel)}
.btn--accent:hover{background:var(--achar-dark)}
.btn--dark{background:var(--panel);color:var(--cream)}
.btn--dark:hover{background:var(--surface)}
.btn--ghost{background:transparent;color:var(--panel);border:1.5px solid var(--sand-line);font-weight:700;font-size:16px;padding:13px 22px}
.btn--ghost:hover{background:var(--sand)}
.btn--ghost-dark{background:transparent;color:var(--cream);border:1.5px solid var(--stroke);font-weight:700;font-size:16px;padding:13px 22px}
.btn--ghost-dark:hover{background:var(--surface)}
.btn--outline-cream{background:transparent;color:var(--cream);border:2px solid var(--cream)}
.btn--outline-cream:hover{background:var(--cream);color:var(--chutney)}
.btn--block{display:flex;inline-size:100%}
.btn[disabled],.btn--disabled{background:var(--sand);color:var(--bark-faint);cursor:not-allowed}

/* ---------- header ---------- */
.site-head{background:var(--panel);color:var(--cream);position:sticky;inset-block-start:0;z-index:40}

/*
 * The bar wraps on a phone: logo, "My booking", gear on the first row, and the
 * nav drops to a full-width second row underneath. From 860px it stops
 * wrapping and everything sits on one line.
 */
.site-head .bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 20px;padding-block:12px;
}

/*
 * `.site-nav` used to be marked `.hide-sm` and still showed on every phone:
 * `.hide-sm{display:none}` is declared earlier in this file and `.site-nav
 * {display:flex}` is declared later, so with equal specificity the later rule
 * won. The nav then wrapped to two cramped lines and pushed the header to
 * 102px. Display is now owned in one place, here.
 */
.site-nav{
  order:4;flex-basis:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  /*
   * Never wraps. A second wrapped line would change the header's height, and
   * the hero subtracts that height to decide its own - so a 360px phone would
   * silently push the hero past the fold again. It scrolls sideways instead,
   * and the header is the same height on every device.
   */
  flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  /* The display face, so wayfinding on a phone reads as picnic and not as a
     default system menu. */
  font-family:var(--display);font-weight:700;font-size:14.5px;
  letter-spacing:-.01em;color:var(--muted);
  padding-block-start:10px;
  border-block-start:1px solid var(--line);
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{white-space:nowrap;padding-block:3px;flex:none}
.site-nav a:hover{color:var(--cream)}

/* "My booking" is the returning organiser's action, so on a phone it is a
   button in the top row rather than a link in a list. */
.head-cta{
  display:inline-flex;align-items:center;
  margin-inline-start:auto;
  font-family:var(--display);font-weight:700;font-size:14px;
  color:var(--cream);border:1.5px solid var(--stroke);
  border-radius:99px;padding:8px 15px;line-height:1;
  transition:border-color .15s ease,background .15s ease;
}
.head-cta:hover{border-color:var(--chutney);background:var(--surface)}

/*
 * Small phones. At 320px the logo, the pill and the gear came to 283px inside
 * a 280px row, so the top row wrapped too and the header grew to 153px - which
 * the hero then subtracted from the screen. Everything gives up a few pixels
 * rather than letting the row break.
 */
@media (max-width:400px){
  .site-head .bar{gap:8px 12px}
  .site-head .wordmark{font-size:22px}
  .head-cta{font-size:13px;padding:7px 12px}
  .site-nav{gap:14px;font-size:14px}
}

@media (min-width:860px){
  .site-head .bar{flex-wrap:nowrap;padding-block:16px}

  /* Not `.hide-lg` on the element: that utility is declared earlier in this
     file and loses to `.head-cta{display:inline-flex}` below it - the same
     collision that left the nav on screen. Owned here instead. */
  .head-cta{display:none}
  .site-nav{
    order:0;flex-basis:auto;justify-content:flex-end;gap:28px;
    font-family:var(--text);font-weight:400;font-size:15px;
    padding-block-start:0;border-block-start:none;
  }
}
.burger{font-size:24px;background:none;border:none;cursor:pointer;line-height:1;color:var(--cream)}

/* discreet staff entrance — present, but never competing with "Trip banao" */
.adm-link{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  inline-size:38px;block-size:38px;border-radius:50%;flex:none;
  border:1.5px solid var(--stroke);color:var(--dim);font-size:15px;line-height:1;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.adm-link:hover{border-color:var(--chutney);color:var(--cream);background:var(--surface)}
.adm-link:focus-visible{outline:2px solid var(--achar);outline-offset:2px}

/* ---------- hero ---------- */
.hero{background:var(--chutney);color:var(--cream)}
.hero .inner{display:flex;flex-direction:column;gap:26px;padding-block:44px 52px}
.hero h1{font-size:clamp(40px,9vw,70px);letter-spacing:-.04em;line-height:1}
.hero p{font-size:clamp(16px,4.2vw,20px);color:var(--chutney-soft);max-inline-size:34ch}
.hero .shot{
  block-size:230px;border-radius:var(--r-xl);background:var(--panel);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px;
}
@media (min-width:860px){
  .hero .inner{flex-direction:row;align-items:center;gap:48px;padding-block:72px 80px}
  .hero .copy{flex:1;display:flex;flex-direction:column;gap:24px}
  .hero .shot{inline-size:430px;block-size:300px;flex:none}
}

/* ---------- search bar ---------- */
.searchbar{
  background:var(--cream);border-radius:var(--r-lg);padding:8px;
  display:flex;flex-direction:column;gap:8px;box-shadow:0 8px 30px rgba(16,12,28,.18);
}
.searchbar .fld{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:var(--r-sm);background:var(--sand)}
.searchbar .fld span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bark-soft);font-weight:600}
.searchbar .fld strong{font-family:var(--display);font-weight:700;font-size:16px;color:var(--panel)}
@media (min-width:700px){
  .searchbar{flex-direction:row;align-items:stretch}
  .searchbar .fld{flex:1}
}

/* ---------- sections ---------- */
.section{padding-block:56px}
.section--sand{background:var(--sand)}
.section--dark{background:var(--panel);color:var(--cream)}
.section-head{display:flex;flex-direction:column;gap:8px;margin-block-end:28px}
.section-head h2{font-size:clamp(26px,6vw,34px)}
.section-head p{color:var(--bark-soft);max-inline-size:60ch}
.section--dark .section-head p{color:var(--muted)}
@media (min-width:700px){
  .section{padding-block:72px}
  .section-head.inline{flex-direction:row;align-items:baseline;justify-content:space-between}
}

/* ---------- steps ---------- */
.steps{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){ .steps{grid-template-columns:repeat(4,1fr);gap:20px} }
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:10px}
.step .n{
  inline-size:38px;block-size:38px;border-radius:50%;background:var(--chutney);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:17px;
}
.step h3{font-size:19px;color:var(--cream)}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------- trip cards ---------- */
.cards{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .cards{grid-template-columns:repeat(3,1fr);gap:22px} }

.trip-card{
  border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--sand-line);
  display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;
}
.trip-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(30,22,51,.12)}
.trip-card .ph{
  block-size:160px;background:var(--sand);display:flex;align-items:center;justify-content:center;
  color:var(--bark-faint);font-size:13px;position:relative;
}
.trip-card .ph .pin{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;
  background:var(--panel);color:var(--cream);font-family:var(--display);font-weight:800;
  font-size:12px;padding:6px 11px;border-radius:99px;
}
.trip-card .body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
.trip-card h3{font-size:20px}
.trip-card .when{font-size:14px;color:var(--bark)}
.price{font-family:var(--display);font-weight:800;font-size:22px;color:var(--panel)}
.price small{font-size:13px;color:var(--bark-soft);font-weight:500}
.joined{font-size:13px;font-weight:600;color:var(--paan)}
.joined.low{color:var(--chutney)}

/* ---------- fill bar (chanda) ---------- */
.fill{display:flex;gap:3px;block-size:10px;background:var(--sand-line);border-radius:5px;overflow:hidden}
.fill i{display:block}
.fill--dark{background:var(--stroke)}
.fill--lg{block-size:26px;border-radius:9px}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:13px;padding:6px 12px;border-radius:99px}
.badge--paid{background:var(--paan);color:var(--paan-deep)}
.badge--partial{background:var(--achar);color:var(--panel)}
.badge--pending{background:var(--sand);color:var(--bark-soft)}
.badge--urgent{background:var(--chutney);color:var(--cream)}
.badge--refund{background:var(--jamun);color:var(--cream)}

/* ---------- safety strip ---------- */
.safety{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){ .safety{grid-template-columns:repeat(3,1fr);gap:20px} }
.safety .item{background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:8px}
.safety .item h3{font-size:18px}
.safety .item p{font-size:14.5px;color:var(--bark)}

/* ---------- footer ---------- */
.site-foot{background:var(--panel);color:var(--cream);padding-block:44px 34px}
.foot-grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:760px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.site-foot h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:var(--text);font-weight:600}
.site-foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--muted);margin-block-start:12px}
.site-foot ul a:hover{color:var(--cream)}
.foot-note{margin-block-start:32px;padding-block-start:20px;border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:var(--dim)}

/* ==========================================================================
   Trip detail page
   ========================================================================== */
.gallery{display:grid;gap:8px;grid-template-columns:1fr;padding-block-start:8px}
.gallery .ph{background:var(--sand);display:flex;align-items:center;justify-content:center;color:var(--bark-faint);font-size:13px;block-size:220px;border-radius:var(--r-lg)}
@media (min-width:860px){
  .gallery{grid-template-columns:2fr 1fr 1fr;grid-template-rows:150px 150px}
  .gallery .ph:first-child{grid-row:span 2;block-size:auto}
  .gallery .ph{block-size:auto}
}
.detail{display:grid;gap:32px;grid-template-columns:1fr;padding-block:32px 64px}
@media (min-width:980px){ .detail{grid-template-columns:1fr 380px;gap:44px;align-items:start} }

.facts{display:flex;flex-wrap:wrap;gap:8px}
.fact{background:var(--sand);border-radius:var(--r-sm);padding:10px 13px;font-size:13.5px;color:var(--bark)}
.block{padding-block:26px;border-block-start:1px solid var(--sand-line);display:flex;flex-direction:column;gap:14px}
.block h2{font-size:22px}
.list{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){ .list{grid-template-columns:1fr 1fr} }
.list li{display:flex;gap:10px;font-size:15px;color:var(--bark)}
.list li b{color:var(--paan);font-weight:800}
.list li.no b{color:var(--chutney)}

.itin{list-style:none;padding:0;display:flex;flex-direction:column;gap:0}
.itin li{display:flex;gap:16px;padding-block:12px;border-block-end:1px dashed var(--sand-line)}
.itin li:last-child{border-block-end:none}
.itin time{font-family:var(--display);font-weight:800;font-size:15px;color:var(--chutney);inline-size:78px;flex:none}
.itin span{font-size:15px;color:var(--bark)}

.notice{
  background:var(--sand);border-inline-start:4px solid var(--achar);
  border-radius:var(--r-sm);padding:14px 16px;font-size:14.5px;color:var(--bark);
}
.notice.safety-notice{border-inline-start-color:var(--paan)}
.notice.warn{border-inline-start-color:var(--chutney)}

/* booking rail */
.rail{position:sticky;inset-block-start:88px;background:var(--panel);color:var(--cream);
  border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:18px}
.rail .head{display:flex;align-items:flex-end;justify-content:space-between}
.rail .per{font-family:var(--display);font-weight:800;font-size:34px;color:var(--achar);line-height:1}
.stepper{display:flex;align-items:center;justify-content:space-between;background:var(--surface);
  border:1.5px solid var(--stroke);border-radius:var(--r-md);padding:8px 10px}
.stepper button{inline-size:38px;block-size:38px;border-radius:var(--r-sm);border:none;background:var(--stroke);
  color:var(--cream);font-size:20px;font-family:var(--display);font-weight:800;cursor:pointer}
.stepper button:hover{background:var(--chutney)}
.stepper .val{font-family:var(--display);font-weight:800;font-size:20px}
.addon{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--stroke);
  border-radius:var(--r-md);padding:12px 14px;cursor:pointer}
.addon input{inline-size:20px;block-size:20px;accent-color:var(--chutney);flex:none}
.addon .t{flex:1;font-size:14.5px}
.addon .p{font-family:var(--display);font-weight:800;font-size:14.5px;color:var(--achar)}
.totals{display:flex;flex-direction:column;gap:8px;padding-block-start:16px;border-block-start:1px solid var(--stroke);font-size:14.5px;color:var(--muted)}
.totals .line{display:flex;justify-content:space-between}
.totals .grand{color:var(--cream);font-family:var(--display);font-weight:800;font-size:22px;align-items:baseline}

/* ==========================================================================
   Collection / share page  (GET /j/{token}) — the most important screen
   ========================================================================== */
.collect{background:var(--panel);color:var(--cream);min-block-size:100vh}
.collect .shell{max-inline-size:520px;margin-inline:auto;padding-inline:var(--gut);padding-block:0 48px}
.collect-head{background:var(--panel);padding-block:16px;display:flex;align-items:center;justify-content:space-between}
.trip-strip{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;display:flex;gap:14px;align-items:center}
.trip-strip .ph{inline-size:96px;block-size:96px;background:var(--line);flex:none;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px}
.trip-strip .t{padding-inline-end:14px;display:flex;flex-direction:column;gap:3px;min-inline-size:0}
.trip-strip h1{font-size:20px;color:var(--cream)}
.trip-strip .when{font-size:13.5px;color:var(--muted)}

/* the dominant progress element */
.meter{position:relative;flex:none;margin-inline:auto}
.meter span{position:absolute;inset-inline-start:50%;inset-block-start:50%;border-radius:50%;display:block}
.meter .pip{inline-size:.13em;block-size:.13em;margin:-.065em;transform:rotate(var(--a)) translateY(-.43em)}
.meter .pip.empty{box-shadow:inset 0 0 0 .015em var(--stroke)}
.meter .hub{inline-size:.56em;block-size:.56em;margin:-.28em;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.meter .hub .amt{font-family:var(--display);font-weight:800;font-size:28px;color:var(--cream);line-height:1.05}
.meter .hub .of{font-size:12.5px;color:var(--muted)}

.progress-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding-block:8px}
.progress-card .caption{font-family:var(--display);font-weight:700;font-size:19px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{background:var(--surface);border-radius:99px;padding:8px 14px;font-size:13.5px;color:var(--muted)}
.pill b{color:var(--cream);font-family:var(--display)}
.pill.urgent{background:var(--chutney);color:var(--cream)}

.sticky-cta{
  position:sticky;inset-block-end:0;background:linear-gradient(to top,var(--panel) 72%,transparent);
  padding-block:14px 18px;display:flex;flex-direction:column;gap:8px;z-index:20;
}

.ledger{list-style:none;padding:0;display:flex;flex-direction:column}
.ledger li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-end:1px solid var(--line)}
.ledger li:last-child{border-block-end:none}
.avatar{inline-size:40px;block-size:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:15px;color:var(--cream)}
.ledger .who{flex:1;display:flex;flex-direction:column;min-inline-size:0}
.ledger .who b{font-weight:600;font-size:15px}
.ledger .who span{font-size:12.5px;color:var(--dim)}
.ledger .amt{font-family:var(--display);font-weight:800;font-size:16px;color:var(--paan)}
.ledger li.waiting .amt{color:var(--faint)}

.card-dark{background:var(--surface);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px}
.note-dark{font-size:13.5px;color:var(--muted);line-height:1.5}
.note-dark b{color:var(--achar)}

/* ---------- pay form ---------- */
.field-label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-block-end:6px;display:block}
.input{
  inline-size:100%;background:var(--surface);border:1.5px solid var(--stroke);border-radius:12px;
  padding:14px 15px;font-size:16px;color:var(--cream);
}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--chutney)}
.amount-input{display:flex;align-items:center;background:var(--surface);border:1.5px solid var(--chutney);border-radius:12px;padding-inline:15px}
.amount-input .cur{color:var(--dim);font-size:15px}
.amount-input input{background:none;border:none;outline:none;padding:14px 10px;font-family:var(--display);
  font-weight:800;font-size:26px;color:var(--cream);inline-size:100%;min-inline-size:0}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.quick button{background:var(--surface);border:1.5px solid var(--stroke);color:var(--muted);border-radius:99px;
  padding:8px 14px;font-size:13.5px;cursor:pointer}
.quick button:hover,.quick button[aria-pressed="true"]{border-color:var(--chutney);color:var(--cream)}

.methods{display:flex;flex-direction:column;gap:10px}
.method{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--stroke);
  border-radius:var(--r-md);padding:14px;cursor:pointer}
.method:has(input:checked){border-color:var(--chutney);background:#332750}
.method input{inline-size:20px;block-size:20px;accent-color:var(--chutney);flex:none}
.method .tag{inline-size:42px;block-size:42px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:13px}
.method .t{flex:1;display:flex;flex-direction:column}
.method .t b{font-size:15px;font-weight:700}
.method .t span{font-size:12.5px;color:var(--dim)}
.method .rec{background:var(--paan);color:var(--paan-deep);font-family:var(--display);font-weight:800;
  font-size:11px;padding:4px 9px;border-radius:99px}

/* ---------- confirmed / expired states ---------- */
.state{min-block-size:100vh;display:flex;flex-direction:column}
.state--ok{background:var(--paan);color:var(--paan-deep)}
.state--fail{background:var(--panel);color:var(--cream)}
.state .hero-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:20px;padding:56px var(--gut)}
.state h1{font-size:clamp(30px,8vw,40px);line-height:1.05}
.state--ok p{color:#0A4A2E;font-size:16px;max-inline-size:38ch}
.state--fail p{color:var(--muted);font-size:16px;max-inline-size:38ch}

.sheet{background:var(--cream);color:var(--panel);border-start-start-radius:26px;border-start-end-radius:26px;
  padding:28px var(--gut) 48px;display:flex;flex-direction:column;gap:22px}
.sheet h2{font-size:24px}
.sheet .kv{display:flex;flex-direction:column;gap:12px}
.sheet .kv .r{display:flex;gap:14px;align-items:flex-start;padding-block-end:12px;border-block-end:1px solid var(--sand-line)}
.sheet .kv .r:last-child{border-block-end:none;padding-block-end:0}
.sheet .kv .k{inline-size:118px;flex:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bark-soft);font-weight:600;padding-block-start:2px}
.sheet .kv .v{flex:1;font-size:15.5px;color:var(--panel)}
.sheet .kv .v small{display:block;color:var(--bark-soft);font-size:13.5px}
.emergency{background:var(--panel);color:var(--cream);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:10px}
.emergency .r{display:flex;justify-content:space-between;font-size:14.5px;color:var(--muted)}
.emergency .r b{color:var(--cream);font-family:var(--display)}

.refund-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.refund-list li{display:flex;justify-content:space-between;align-items:center;background:var(--surface);
  border-radius:var(--r-md);padding:13px 15px;font-size:14.5px}

/* ---------- utility ---------- */
.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}
.gap-16{gap:16px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-28{gap:28px}
.mt-8{margin-block-start:8px}.mt-16{margin-block-start:16px}.mt-24{margin-block-start:24px}
/* Used by the hero and the supplier thank-you page since the first design
   file, and defined nowhere - so both pairs of buttons stacked as bare blocks. */
.row-gap{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){ .row-gap > *{ flex:1 1 100% } }

.center{text-align:center}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   Invite flow — organiser adds the group's numbers, picnic messages them
   ========================================================================== */

/* progress through the organiser's 3 steps */
.flow{display:flex;align-items:center;gap:8px;padding-block:4px;overflow-x:auto}
.flow .s{display:flex;align-items:center;gap:8px;flex:none;font-size:13.5px;color:var(--dim)}
.flow .s .b{inline-size:26px;block-size:26px;border-radius:50%;background:var(--surface);color:var(--dim);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:13px}
.flow .s.done .b{background:var(--paan);color:var(--paan-deep)}
.flow .s.done{color:var(--muted)}
.flow .s.now .b{background:var(--chutney);color:var(--cream)}
.flow .s.now{color:var(--cream);font-weight:600}
.flow .sep{inline-size:16px;block-size:2px;background:var(--stroke);flex:none}

/* the invitee rows */
.invitees{display:flex;flex-direction:column;gap:8px}
.invitee{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--stroke);
  border-radius:var(--r-md);padding:10px 12px}
.invitee .who{flex:1;display:flex;flex-direction:column;min-inline-size:0;gap:1px}
.invitee .who input{background:none;border:none;outline:none;color:var(--cream);inline-size:100%;padding:0}
.invitee .who .nm{font-size:15px;font-weight:600}
.invitee .who .nm::placeholder{color:var(--faint);font-weight:400}
.invitee .who .no{font-size:13px;color:var(--muted);font-family:var(--display)}
.invitee .who .no::placeholder{color:var(--faint);font-family:var(--text)}
.invitee .del{background:none;border:none;color:var(--faint);font-size:20px;cursor:pointer;padding:4px;line-height:1}
.invitee .del:hover{color:var(--chutney)}
.invitee.bad{border-color:var(--chutney)}
.invitee.bad .err{font-size:12px;color:var(--chutney)}

.paste{inline-size:100%;min-block-size:96px;background:var(--surface);border:1.5px solid var(--stroke);
  border-radius:12px;padding:13px 15px;color:var(--cream);font-size:15px;resize:vertical;font-family:var(--text)}
.paste::placeholder{color:var(--faint)}
.paste:focus{outline:none;border-color:var(--chutney)}

.counter{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--muted)}
.counter b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--cream)}

/* WhatsApp message preview */
.wa-preview{background:#0B141A;border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px}
.wa-bubble{background:#005C4B;color:#E9EDEF;border-radius:12px;border-start-end-radius:3px;padding:12px 14px;
  font-size:14.5px;line-height:1.5;align-self:flex-end;max-inline-size:92%;white-space:pre-wrap}
.wa-bubble .meta{display:block;margin-block-start:6px;font-size:11px;color:#8FA6A0;text-align:end}
.wa-note{font-size:12.5px;color:#8FA6A0}

/* delivery state banner */
.banner{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border-inline-start:4px solid var(--achar);border-radius:var(--r-md);padding:14px 16px}
.banner .ic{font-size:18px;line-height:1.2}
.banner .tx{font-size:14px;color:var(--muted);line-height:1.5}
.banner .tx b{color:var(--cream)}
.banner.ok{border-inline-start-color:var(--paan)}
.banner.warn{border-inline-start-color:var(--chutney)}

/* invite tracking list */
.track{list-style:none;padding:0;display:flex;flex-direction:column}
.track li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-end:1px solid var(--line)}
.track li:last-child{border-block-end:none}
.track .who{flex:1;display:flex;flex-direction:column;min-inline-size:0}
.track .who b{font-weight:600;font-size:15px}
.track .who span{font-size:12.5px;color:var(--dim)}
.track .act{background:var(--surface);border:1.5px solid var(--stroke);color:var(--muted);border-radius:99px;
  padding:7px 13px;font-size:12.5px;cursor:pointer;flex:none}
.track .act:hover{border-color:var(--chutney);color:var(--cream)}
.track .act[disabled]{opacity:.45;cursor:not-allowed}

.dot{display:block;inline-size:9px;block-size:9px;border-radius:50%;flex:none}
.dot--paid{background:var(--paan)}
.dot--opened{background:var(--achar)}
.dot--sent{background:var(--jamun)}
.dot--queued{background:var(--stroke)}
.dot--failed{background:var(--chutney)}

.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}

.seg{display:flex;background:var(--surface);border-radius:99px;padding:4px;gap:4px}
.seg button{flex:1;background:none;border:none;color:var(--muted);font-size:13.5px;padding:9px 12px;
  border-radius:99px;cursor:pointer;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--chutney);color:var(--cream)}

/* ==========================================================================
   Icon system
   --------------------------------------------------------------------------
   The brand has exactly one visual primitive: a dot on a rotation. The
   identity file contains 54 circles and no line art, so every icon here is
   built from the same part rather than borrowed from an icon set that would
   read as somebody else's product.

   Pure CSS on purpose. The share page is the conversion funnel and must render
   with no JavaScript on a mid-range phone over 3G (spec §13) — an icon font or
   an SVG sprite would be another request in front of the money.

   Motion is meaning, not decoration: each icon moves the way its action moves.
   Money converges. Invitations radiate. A nudge pulses once. Everything is
   switched off under prefers-reduced-motion.
   ========================================================================== */

.ic-dot{
  position:relative;
  inline-size:var(--ic-size,22px);
  block-size:var(--ic-size,22px);
  font-size:var(--ic-size,22px);
  flex:none;
  display:inline-block;
  vertical-align:middle;
}
.ic-dot i{
  position:absolute;
  inset-inline-start:50%;
  inset-block-start:50%;
  border-radius:50%;
  display:block;
  background:var(--ic-colour,currentColor);
}
.ic-dot .core{
  inline-size:.30em;block-size:.30em;margin:-.15em;
  background:var(--ic-core,var(--ic-colour,currentColor));
}
.ic-dot .p{
  inline-size:.17em;block-size:.17em;margin:-.085em;
  transform:rotate(var(--a)) translateY(var(--r,-.34em));
}
.ic-dot .ring{
  inline-size:.86em;block-size:.86em;margin:-.43em;
  background:none;
  box-shadow:inset 0 0 0 .05em var(--ic-colour,currentColor);
}

/* ---- pay: the group's money converging on one pot ---- */
@keyframes ic-converge{
  0%,100% { transform:rotate(var(--a)) translateY(-.40em); opacity:.55 }
  50%     { transform:rotate(var(--a)) translateY(-.22em); opacity:1 }
}
.ic-dot--pay .p{ animation:ic-converge 2.4s ease-in-out infinite; animation-delay:var(--d,0s) }

/* ---- invite: one person reaching outward to many ---- */
@keyframes ic-radiate{
  0%      { transform:rotate(var(--a)) translateY(-.16em); opacity:0 }
  35%     { opacity:1 }
  100%    { transform:rotate(var(--a)) translateY(-.42em); opacity:0 }
}
.ic-dot--invite .p{ animation:ic-radiate 2.6s ease-out infinite; animation-delay:var(--d,0s) }

/* ---- nudge: one deliberate tap, then quiet ---- */
@keyframes ic-nudge{
  0%,70%,100% { transform:scale(1); opacity:.9 }
  78%         { transform:scale(1.5); opacity:1 }
}
.ic-dot--nudge .core{ animation:ic-nudge 3s ease-in-out infinite }
@keyframes ic-nudge-ring{
  0%,60%,100% { transform:scale(.7); opacity:0 }
  75%         { transform:scale(1.15); opacity:.45 }
}
.ic-dot--nudge .ring{ animation:ic-nudge-ring 3s ease-out infinite }

/* ---- done: the rosette closing, once ---- */
@keyframes ic-settle{
  0%   { transform:rotate(var(--a)) translateY(-.52em); opacity:0 }
  60%  { transform:rotate(var(--a)) translateY(-.31em); opacity:1 }
  100% { transform:rotate(var(--a)) translateY(-.34em); opacity:1 }
}
.ic-dot--done .p{ animation:ic-settle .7s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d,0s) }

/* ---- refund: the same motion, running backwards ---- */
@keyframes ic-return{
  0%   { transform:rotate(var(--a)) translateY(-.34em); opacity:1 }
  100% { transform:rotate(var(--a)) translateY(-.06em); opacity:.25 }
}
.ic-dot--refund .p{ animation:ic-return 2.2s ease-in infinite; animation-delay:var(--d,0s) }

/* ---- waiting: a slow sweep, never urgent ---- */
@keyframes ic-sweep{ to { transform:rotate(360deg) } }
.ic-dot--waiting{ animation:ic-sweep 9s linear infinite }

/* ---- safety: a ring with a watched gap ---- */
.ic-dot--safety .ring{
  box-shadow:inset 0 0 0 .05em var(--ic-colour,currentColor);
  clip-path:polygon(0 0,100% 0,100% 62%,50% 62%,50% 100%,0 100%);
}
@keyframes ic-watch{ 0%,100%{opacity:.35} 50%{opacity:1} }
.ic-dot--safety .core{ animation:ic-watch 2.8s ease-in-out infinite }

/* Buttons and rows carrying an icon */
.btn .ic-dot,
.act .ic-dot,
.b .ic-dot{ margin-inline-end:2px }

.ic-line{ display:inline-flex; align-items:center; gap:9px }

/* An icon that reacts to its own button rather than looping forever. */
.btn:hover .ic-dot--pay .p{ animation-duration:1.1s }
.btn:hover .ic-dot--invite .p{ animation-duration:1.3s }

@media (prefers-reduced-motion: reduce){
  .ic-dot *,
  .ic-dot{ animation:none !important }
  .ic-dot--invite .p,
  .ic-dot--refund .p{ opacity:1; transform:rotate(var(--a)) translateY(-.34em) }
}

/* >>> spliced from resources/css/hero.css - edit there, not here >>> */
/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   The mark says the line, and now it turns.

   picnic's rosette has five petals and a gap at 180 degrees — the identity has
   been saying "ek seat khaali hai" since before the sentence existed. Rotating
   the mark as a rigid object would only spin a logo, so the gap travels
   instead: each seat empties in turn, one sixth of the cycle apart, and a ring
   goes out from whichever seat is open. There is always exactly one empty
   seat, and it is never the same one.

   The whole assembly also turns, slowly, against its own orbits. Three speeds,
   one system.

   Everything is CSS. No image, no script — this page opens over 3G (spec §13).
   ========================================================================== */

.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:17px;
  padding:15px 26px;border-radius:var(--r-md);
  cursor:pointer;text-align:center;
  transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s ease, background .16s ease, color .16s ease;
}
.hero-btn.solid{ background:var(--panel);color:var(--cream);box-shadow:0 8px 22px rgba(16,12,28,.24) }
.hero-btn.solid:hover{ transform:translateY(-2px);box-shadow:0 14px 30px rgba(16,12,28,.32) }
.hero-btn.outline{ border:1.5px solid rgba(255,244,228,.55);color:var(--cream);padding:13.5px 24px }
.hero-btn.outline:hover{ background:var(--cream);color:var(--chutney-dark);border-color:var(--cream) }
.hero-btn:active{ transform:translateY(0) }

/*
 * The hero surface is the brand orange, by the client's decision.
 *
 * Recorded because it is a real trade-off, not an oversight: measured against
 * #FF4A22, cream is 3.09:1 and the tinted body copy 2.75:1, so hero text is
 * below WCAG AA. The headline clears AA-large on size alone. The darker
 * #C13413 would have put everything above 4.5:1, and was rejected as too dark
 * for the identity.
 *
 * The consequences are handled where they land rather than by changing this
 * colour: the promise below is cream instead of the tint, and an empty seat is
 * filled with a translucent dark instead of being transparent - on this
 * surface a transparent seat just reads as an orange dot.
 */
.hero--picnic{
  position:relative; overflow:hidden;
  --hero-bg:var(--chutney);
  background:var(--hero-bg);
}
.hero--picnic::after{
  content:'';
  position:absolute;inset-block-start:-30%;inset-inline-end:-10%;
  inline-size:min(760px,90vw);block-size:min(760px,90vw);border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,228,.09) 0%, rgba(255,244,228,0) 62%);
  pointer-events:none;
}
.hero--picnic .inner{ position:relative; z-index:2 }

.hero--picnic h1{
  /*
   * Sized against the viewport height as well as its width. On a 1080p laptop
   * at 100% zoom there are only about 850 usable pixels, and a headline scaled
   * purely on vw ate enough of them to push the last line of copy below the
   * fold.
   */
  font-size:clamp(46px, min(6.6vw, 10.4vh), 92px);
  letter-spacing:-.045em;line-height:.98;text-wrap:balance;
}
.hero--picnic h1 .accent{ position:relative;display:inline-block }
.hero--picnic h1 .accent::after{
  content:'';
  position:absolute;inset-inline:0;inset-block-end:.05em;
  block-size:.075em;background:var(--achar);border-radius:99px;
  transform-origin:left center;
  animation:accent-draw 1s cubic-bezier(.2,.8,.2,1) 1.9s both;
}
@keyframes accent-draw{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* ---------------------------------------------------------------- the mark */

/*
 * On a phone the mark is IN the layout, above the words.
 *
 * It used to sit behind the copy at half opacity, which failed twice over: the
 * one idea this hero has was invisible on the device most of Karachi books
 * from, and it put moving decoration behind text that was already too low in
 * contrast to read. Now it is a real element, at full strength, with nothing
 * behind it.
 */
.mark-hero{
  display:block;
  position:relative;
  /* flex:none, or the row above shrinks it out of round. */
  flex:none;
  --mark:min(190px,44vw,23vh);
  inline-size:var(--mark);block-size:var(--mark);font-size:var(--mark);
  margin-block:0 clamp(14px,2.4vh,26px);
  margin-inline:auto;
  z-index:1;pointer-events:none;
}

/* From tablet up it goes back to being the field the copy sits on. */
@media (min-width:860px){
  .mark-hero{
    position:absolute;
    inset-block-start:50%;inset-inline-end:7%;
    inline-size:min(430px,78vw,62vh);block-size:min(430px,78vw,62vh);font-size:min(430px,78vw,62vh);
    transform:translateY(-50%);
    margin:0;
  }
}

/* The turning body. Separated from .mark-hero so its rotation does not fight
   the translateY that centres the whole thing. */
.mark-hero .spin{
  position:absolute;inset:0;
  animation:mark-spin 48s linear infinite;
}
@keyframes mark-spin{ to{ transform:rotate(360deg) } }

.mark-hero .spin > i,
.mark-hero > i{
  position:absolute;
  inset-inline-start:50%;inset-block-start:50%;
  display:block;
}

/* line effects: two hairline orbits, turning against the body and each other */
.mark-hero .orbit{
  border-radius:50%;
  border:1px solid rgba(255,244,228,.18);
  margin:calc(var(--r) * -1);
  inline-size:calc(var(--r) * 2);block-size:calc(var(--r) * 2);
  animation:orbit-turn var(--t,80s) linear infinite;
}
.mark-hero .orbit--dashed{
  border-style:dashed;
  border-color:rgba(255,244,228,.26);
  animation-direction:reverse;
}
@keyframes orbit-turn{ to{ transform:rotate(360deg) } }

/* a hairline from the centre out to every seat */
.mark-hero .spoke{
  inline-size:1px;block-size:.30em;
  margin-inline-start:-.5px;margin-block-start:-.30em;
  transform-origin:bottom center;
  transform:rotate(var(--a));
  background:linear-gradient(to top, rgba(255,244,228,0), rgba(255,244,228,.45));
  animation:spoke-draw .8s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--d);
}
@keyframes spoke-draw{
  from{ transform:rotate(var(--a)) scaleY(0) }
  to  { transform:rotate(var(--a)) scaleY(1) }
}

/*
 * Six seats, and the empty one travels.
 *
 * Each seat is hollow for one sixth of the cycle, staggered by one sixth — so
 * at every moment exactly one is open, and over 18 seconds the gap walks the
 * whole ring. Always one seat free; never the same seat.
 */
.mark-hero .seat{
  inline-size:.155em;block-size:.155em;margin:-.0775em;
  border-radius:50%;
  transform:rotate(var(--a)) translateY(-.30em);
  background:var(--c);
  animation:
    seat-arrive .7s cubic-bezier(.2,1.3,.4,1) var(--in) both,
    seat-cycle 18s linear var(--d) infinite;
}
@keyframes seat-arrive{
  from{ transform:rotate(var(--a)) translateY(-.30em) scale(0); opacity:0 }
  to  { transform:rotate(var(--a)) translateY(-.30em) scale(1); opacity:1 }
}
/*
 * The colour change is a snap, not a fade.
 *
 * Fading a background between `transparent` and a brand colour spends the
 * whole transition at partial opacity over the hero surface, which rendered as
 * washed pink and brown - colours that are not in the identity - for roughly a
 * second of every cycle. Compressed to ~1% of 18s the seat simply IS taken,
 * which is also what taking a seat feels like. The motion is carried by scale,
 * which interpolates cleanly.
 */
@keyframes seat-cycle{
  /* open: a hole, ringed */
  0%,13%  { background:rgba(16,12,28,.30); box-shadow:inset 0 0 0 .014em rgba(255,244,228,.95);
            transform:rotate(var(--a)) translateY(-.30em) scale(.92) }
  /* taken - one frame later */
  14%     { background:var(--c); box-shadow:inset 0 0 0 0 rgba(255,244,228,0);
            transform:rotate(var(--a)) translateY(-.30em) scale(.92) }
  18%     { background:var(--c); box-shadow:inset 0 0 0 0 rgba(255,244,228,0);
            transform:rotate(var(--a)) translateY(-.30em) scale(1.14) }
  23%,95% { background:var(--c); box-shadow:inset 0 0 0 0 rgba(255,244,228,0);
            transform:rotate(var(--a)) translateY(-.30em) scale(1) }
  /* letting go: back to a hole, just as sharply */
  96%,100%{ background:rgba(16,12,28,.30); box-shadow:inset 0 0 0 .014em rgba(255,244,228,.95);
            transform:rotate(var(--a)) translateY(-.30em) scale(.92) }
}

/* the call going out from whichever seat is currently open */
.mark-hero .call{
  inline-size:.155em;block-size:.155em;margin:-.0775em;
  border-radius:50%;
  transform:rotate(var(--a)) translateY(-.30em);
  box-shadow:0 0 0 .004em rgba(255,244,228,.75);
  opacity:0;
  animation:call-out 18s ease-out var(--d) infinite;
}
@keyframes call-out{
  0%      { opacity:.75; scale:1 }
  14%,100%{ opacity:0; scale:2.7 }
}

.mark-hero .core{
  inline-size:.245em;block-size:.245em;margin:-.1225em;
  border-radius:50%;
  background:var(--panel);
  animation:core-in .8s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes core-in{
  from{ transform:scale(0);opacity:0 }
  to  { transform:scale(1);opacity:1 }
}

/* ------------------------------------------------------------- the promise */

/*
 * cream, not chutney-soft, and at reading size.
 *
 * This is the most important sentence on the page and it was the least legible
 * thing in the hero: 2.75:1, smaller than the body copy, below the buttons.
 * On the darker surface cream is 5.13:1, and it now sits where the eye reaches
 * it before it reaches the call to action - which is the order in which the
 * decision is actually made.
 */
.hero-promise{
  display:flex;align-items:flex-start;gap:10px;
  max-inline-size:38ch;
  font-size:clamp(15px, 1.9vh, 17.5px);
  line-height:1.5;
  color:var(--cream) !important;   /* .hero p sets chutney-soft */
  font-weight:500;
}
.hero-promise .ic-dot{ flex:none;margin-block-start:.15em }

/* ---------------------------------------------------------------- proof */

.hero-proof{ display:flex;flex-wrap:wrap;gap:9px;align-items:center }
/* Live numbers out of the database, not slogans - so they are given the
   weight of something true rather than the weight of a caption. */
.hero-proof span{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,244,228,.45);border-radius:99px;
  padding:8px 15px;font-size:15px;color:var(--cream);
}
.hero-proof b{ font-family:var(--display);font-weight:800 }

/*
 * The hero fits the window.
 *
 * It used to be built from fixed padding, so on a laptop at 100% zoom the last
 * line — "wapas — apne aap", the refund promise — fell below the fold. Now the
 * section is at most the height of the viewport minus the header, the content
 * is centred inside it, and the padding gives way before the words do.
 */
.hero--picnic{
  /*
   * A column, always.
   *
   * It was a flex ROW, which was invisible while the mark was absolutely
   * positioned. The moment the mark became a real element on phones it turned
   * into the row's second item: the mark was squeezed to 119px wide by 179
   * tall - circles rendered as ellipses - and the copy was crushed into a
   * 231px gutter on a 390px screen. That is what "the hero doesn't display
   * properly" was.
   */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-block-size:min(760px, calc(100svh - var(--head-h)));
}
.hero--picnic .inner{
  inline-size:100%;
  padding-block:clamp(36px, 6vh, 88px);
}
.hero--picnic .copy{ gap:clamp(14px, 2.4vh, 24px) }

/*
 * Phone typography.
 *
 * With the copy no longer trapped in a 231px column the headline can take the
 * width it was designed for. Tighter tracking and a sub-1 line height at this
 * size is what makes it read as a mark rather than as a paragraph in bold.
 */
@media (max-width:859px){
  .hero--picnic h1{
    font-size:clamp(42px, 13.2vw, 60px);
    letter-spacing:-.052em;
    line-height:.92;
  }
  .hero--picnic .copy{ align-items:flex-start;text-align:start }
  .hero--picnic .copy p{ font-size:16.5px;line-height:1.55 }
  .hero-promise{ font-size:16px }
  .hero--picnic .inner{ padding-block:clamp(20px,3.4vh,34px) }
}
.hero--picnic .copy p{ font-size:clamp(16px, 2.1vh, 20px) }

@media (min-width:860px){
  .hero--picnic .copy{ max-inline-size:min(52%,560px) }
}

@media (prefers-reduced-motion: reduce){
  .mark-hero .spin,
  .mark-hero .orbit,
  .mark-hero .spoke,
  .mark-hero .seat,
  .mark-hero .core,
  .mark-hero .call{ animation:none }
  .mark-hero .call{ opacity:0 }
  /* Hold the mark as the brand draws it: five taken, one open at 180. */
  .mark-hero .seat{ background:var(--c) }
  .mark-hero .seat[style*="180deg"]{
    background:rgba(16,12,28,.30);
    box-shadow:inset 0 0 0 .016em rgba(255,244,228,.95);
  }
  .hero--picnic h1 .accent::after{ animation:none; transform:scaleX(1) }
  .hero-btn{ transition:none }
}
/* <<< end resources/css/hero.css <<< */

/* >>> spliced from resources/css/forms.css - edit there, not here >>> */
/* ==========================================================================
   picnic - public forms
   Logical properties throughout, same as the rest of the sheet, so an RTL
   locale needs nothing but dir="rtl". (spec §12)

   These sit on the cream/sand pages, not in the admin panel: the inputs are
   light, with the panel colour reserved for the text a person is typing.
   ========================================================================== */

/* `hidden` must actually hide.

   The attribute gets its `display:none` from the browser's own stylesheet, and
   any author `display` beats it - so `.form{display:flex}` and `.sent{display:flex}`
   below quietly re-showed the elements they were hiding, and the contact page
   rendered the confirmation and the empty form at the same time. This is the one
   place `!important` is the correct tool: the whole point of the attribute is
   that it overrules layout. */
[hidden]{display:none !important}

.form{display:flex;flex-direction:column;gap:20px}

/* `.safety` is a three-up card grid. An even number of cards in it leaves a
   hole on the last row, so an even set asks for two columns instead. */
@media (min-width:760px){ .safety--2{grid-template-columns:1fr 1fr} }

/* Two fields side by side once there is room, stacked on a phone. Every
   picnic form is filled in on a phone first. */
.form__row{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){ .form__row{grid-template-columns:1fr 1fr} }

.field{display:flex;flex-direction:column;gap:7px;min-inline-size:0}

.field label,.lbl{
  font-family:var(--display);font-weight:700;font-size:14px;
  letter-spacing:.01em;color:var(--panel);
}
.field label .opt{
  font-family:var(--text);font-weight:400;font-size:13px;color:var(--bark-soft);
  margin-inline-start:6px;
}

.inp,.sel,.txa{
  inline-size:100%;background:#fff;border:1.5px solid var(--sand-line);
  border-radius:var(--r-md);padding:13px 15px;font-family:var(--text);
  font-size:16px;              /* 16px or iOS zooms the page on focus */
  line-height:1.4;color:var(--panel);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.inp::placeholder,.txa::placeholder{color:var(--bark-faint)}
.inp:focus,.sel:focus,.txa:focus{
  outline:none;border-color:var(--chutney);
  box-shadow:0 0 0 3px var(--chutney-soft);
}
.inp:disabled,.sel:disabled,.txa:disabled{background:var(--sand);color:var(--bark-soft);cursor:not-allowed}

.txa{min-block-size:132px;resize:vertical}

/* The native arrow is inconsistent across browsers and disappears entirely on
   some Android skins, so it is drawn here instead. */
.sel{
  appearance:none;padding-inline-end:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--bark) 50%),
                   linear-gradient(135deg,var(--bark) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
[dir="rtl"] .sel{background-position:21px calc(50% + 1px),15px calc(50% + 1px)}

.hint{font-size:13.5px;line-height:1.5;color:var(--bark-soft)}

/* An error is attached to the field it belongs to, never only summarised at
   the top: on a phone the summary scrolls out of sight before the fix is made. */
.field.bad .inp,.field.bad .sel,.field.bad .txa{border-color:var(--chutney);background:#FFFBFA}
.field .err{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--chutney-dark);font-weight:600}
.field .err::before{
  content:"";inline-size:6px;block-size:6px;border-radius:50%;
  background:var(--chutney);flex:none;
}

/* ---------- sending state -----------------------------------------------

   The brand primitive is a dot on a rotation, so waiting is three dots going
   round rather than a generic ring. The label stays in the layout while it
   spins, so the button does not change width mid-request.
   ------------------------------------------------------------------------ */

.btn.is-sending{position:relative;pointer-events:none}
.btn.is-sending > span{opacity:0}
.btn.is-sending::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
  inline-size:26px;block-size:26px;margin:-13px 0 0 -13px;
  border-radius:50%;
  animation:dots-turn .9s linear infinite;
  /* three dots at 120° - drawn as one element so there is nothing to sync */
  background:
    radial-gradient(circle 3.4px at 50% 12%,  currentColor 99%,transparent 100%),
    radial-gradient(circle 3.4px at 88% 69%,  currentColor 99%,transparent 100%),
    radial-gradient(circle 3.4px at 12% 69%,  currentColor 99%,transparent 100%);
}

@keyframes dots-turn{ to{ transform:rotate(360deg) } }

/* ---------- what a person sees when it has gone ------------------------- */

.sent{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  background:#fff;border:1px solid var(--sand-line);border-radius:var(--r-lg);
  padding:34px 26px;
  animation:sent-in .38s cubic-bezier(.2,.7,.3,1) both;
}
.sent h3{font-size:21px;color:var(--panel)}
.sent p{font-size:15px;line-height:1.6;color:var(--bark);max-inline-size:44ch}

/* The tick is drawn, not a glyph: it lands after the circle, which is what
   makes it read as "done" rather than as an icon that was always there. */
.sent .tick{
  inline-size:56px;block-size:56px;border-radius:50%;background:var(--paan);
  display:flex;align-items:center;justify-content:center;flex:none;
  animation:tick-pop .42s cubic-bezier(.2,1.4,.4,1) both;
}
.sent .tick svg{inline-size:28px;block-size:28px;display:block}
.sent .tick path{
  fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:tick-draw .3s .2s ease-out forwards;
}

@keyframes sent-in{ from{ opacity:0; transform:translateY(10px) } }
@keyframes tick-pop{ from{ transform:scale(.4); opacity:0 } }
@keyframes tick-draw{ to{ stroke-dashoffset:0 } }

@media (prefers-reduced-motion: reduce){
  .btn.is-sending::after{animation-duration:2.4s}   /* still moving: it must
                                                       read as "working" */
  .sent,.sent .tick{animation:none}
  .sent .tick path{animation:none;stroke-dashoffset:0}
}


/* ---------- uploaded pictures -------------------------------------------

   The card reserves its 160px band whether or not a picture exists, so a
   package without one does not change the height of the row it sits in.
   ------------------------------------------------------------------------ */

.trip-card .ph img{
  position:absolute;inset:0;
  inline-size:100%;block-size:100%;
  object-fit:cover;display:block;
}

/* The share page's small square, on the dark panel. */
.trip-strip .ph{position:relative;overflow:hidden}
.trip-strip .ph img{
  position:absolute;inset:0;
  inline-size:100%;block-size:100%;
  object-fit:cover;display:block;
}

/* The rest of the pictures, under the strip. */
.shots{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.shots img{
  inline-size:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r-md);border:1px solid var(--sand-line);background:var(--sand);
}
/* <<< end resources/css/forms.css <<< */