/* ===========================================================================
   Vouch — reviews, syndicated.

   Design position: editorial and warm, not "app-like". A customer is standing at
   a till or sitting at a table; the product should feel closer to a well-set
   printed card than to a dashboard. Cream paper, ink-black type, one hot accent,
   and display type large enough to read at arm's length in daylight.

   Deliberately shares NOTHING with the other NGAIGE apps but the API it calls —
   different typeface, different palette, different layout logic. Independent
   products on one contract is the point.
   ========================================================================= */
@font-face{font-family:"Grotesk";src:url("fonts/SpaceGrotesk.ttf") format("truetype-variations");
  font-weight:300 700;font-display:swap}

:root{
  --paper:#f6f2e9;         /* warm cream, not white */
  --paper-2:#efe9dc;
  --ink:#12100c;
  --ink-2:#544d40;
  --ink-3:#8a8171;
  --rule:#ddd4c2;
  --hot:#ff4d17;          /* the single accent — used sparingly and loudly */
  --hot-wash:#ffe9e1;
  --gold:#f0a500;
  --good:#1f7a4d;
  --good-wash:#e2f2e9;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);min-height:100dvh;
  font:16px/1.5 "Grotesk",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.app{max-width:540px;margin:0 auto;min-height:100dvh;position:relative;
  background:var(--paper);
  background-image:radial-gradient(rgba(18,16,12,.045) 1px,transparent 1px);
  background-size:22px 22px}

/* ---------- screens ---------- */
.scr{display:none;padding:26px 24px 128px;min-height:100dvh;
  animation:in .44s cubic-bezier(.2,1.1,.35,1) both}
.scr.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- masthead: the business, not us ---------- */
.top{display:flex;align-items:center;gap:13px;padding-bottom:22px;
  border-bottom:2px solid var(--ink)}
.mark{width:46px;height:46px;flex:none;border-radius:4px;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:21px;font-weight:700;letter-spacing:-.03em}
.biz{font-size:18px;font-weight:700;letter-spacing:-.028em;line-height:1.1}
.meta{font-size:12.5px;color:var(--ink-3);margin-top:2px;letter-spacing:.02em}

/* ---------- display type ---------- */
.ask{font-size:clamp(40px,12vw,54px);font-weight:700;letter-spacing:-.045em;line-height:.96;
  margin-top:34px}
.hd{font-size:clamp(29px,8vw,36px);font-weight:700;letter-spacing:-.038em;line-height:1.03;
  margin-top:26px}
.lede{font-size:16px;color:var(--ink-2);margin-top:12px;line-height:1.5;max-width:33ch}

.back{position:absolute;top:24px;left:20px;width:42px;height:42px;border-radius:50%;
  border:2px solid var(--ink);font-size:19px;line-height:1;display:grid;place-items:center;
  transition:.2s}
.back:active{transform:scale(.9)}

/* ---------- stars ---------- */
.stars{display:flex;gap:6px;margin:38px 0 4px;justify-content:space-between;max-width:330px}
.star{width:58px;height:58px;display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.2,1.4,.35,1)}
.star svg{width:52px;height:52px}
.star svg path{fill:transparent;stroke:var(--ink);stroke-width:1.4;transition:fill .2s}
.star.lit svg path{fill:var(--gold);stroke:var(--gold)}
.star:active{transform:scale(.84)}
.star.pop{animation:pop .46s cubic-bezier(.2,1.5,.35,1)}
@keyframes pop{0%{transform:scale(1)}38%{transform:scale(1.32) rotate(-7deg)}100%{transform:scale(1)}}
.word{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-top:16px;min-height:32px;
  color:var(--hot)}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{padding:10px 15px;border:2px solid var(--ink);border-radius:2px;font-size:14.5px;
  font-weight:600;letter-spacing:-.01em;transition:.16s}
.tag[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

textarea{width:100%;margin-top:18px;background:transparent;border:0;border-bottom:2px solid var(--ink);
  padding:10px 2px;font-size:18px;line-height:1.5;resize:none;letter-spacing:-.01em}
textarea:focus{outline:0;border-bottom-color:var(--hot)}
.count{font-size:12.5px;color:var(--ink-3);margin-top:8px;letter-spacing:.02em}

/* ---------- syndication ---------- */
.synd{margin-top:24px}
.srow{display:flex;align-items:center;gap:13px;padding:14px 15px;background:#fff;
  border:2px solid var(--ink);border-radius:3px;transition:.22s}
.srow + .srow{margin-top:10px}
.srow .ic{width:38px;height:38px;flex:none;border-radius:3px;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:16px;letter-spacing:-.02em}
.srow .nm{font-size:15.5px;font-weight:700;letter-spacing:-.018em}
.srow .st{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.srow .rt{margin-left:auto;display:flex;align-items:center;gap:9px}
.srow .state{font-size:12.5px;font-weight:700;letter-spacing:.02em}
.srow.off{opacity:.42}
.srow.posting{border-color:var(--hot)}
.srow.posting .state{color:var(--hot)}
.srow.done{background:var(--good-wash);border-color:var(--good)}
.srow.done .state{color:var(--good)}
.tick-sm{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);flex:none;
  display:grid;place-items:center;font-size:12px}
.srow[data-on="1"] .tick-sm{background:var(--ink);color:var(--paper)}
.spin{width:14px;height:14px;border:2px solid rgba(255,77,23,.28);border-top-color:var(--hot);
  border-radius:50%;animation:sp .68s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- consent: the most considered surface here ---------- */
.consent{margin-top:26px;border:2px solid var(--ink);border-radius:3px;background:#fff;
  transition:.26s}
.consent.on{background:var(--hot-wash);border-color:var(--hot);
  box-shadow:6px 6px 0 var(--hot)}
.inner{padding:18px}
.crow{display:flex;gap:15px;align-items:flex-start}
.ctext{flex:1}
.ct{font-size:17px;font-weight:700;letter-spacing:-.024em;line-height:1.25}
.cw{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.48}
.cfine{margin-top:15px;padding-top:13px;border-top:1px dashed var(--rule);font-size:13px;
  color:var(--ink-2);line-height:1.5}
.cfine b{font-weight:700;color:var(--ink)}
.sw{width:56px;height:32px;border:2px solid var(--ink);border-radius:2px;position:relative;
  flex:none;background:transparent;transition:background .24s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--ink);
  transition:transform .3s cubic-bezier(.2,1.3,.35,1)}
.sw[aria-checked="true"]{background:var(--hot);border-color:var(--hot)}
.sw[aria-checked="true"]::after{transform:translateX(24px);background:#fff}
.cnum{margin-top:15px;padding-top:14px;border-top:1px dashed var(--rule)}
.cnum label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.cnum input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ink);
  padding:9px 2px;font-size:19px;letter-spacing:-.01em}
.cnum input:focus{outline:0;border-bottom-color:var(--hot)}
.chint{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.45}

/* ---------- action ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;max-width:540px;margin:0 auto;z-index:20;
  padding:16px 24px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(246,242,233,0),var(--paper) 28%)}
.go{width:100%;padding:18px;background:var(--ink);color:var(--paper);border-radius:3px;
  font-size:17px;font-weight:700;letter-spacing:-.018em;
  box-shadow:5px 5px 0 var(--hot);transition:.16s}
.go:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--hot)}
.go[disabled]{opacity:.3;box-shadow:none;cursor:not-allowed}

/* ---------- done ---------- */
.done{padding-top:44px}
.tick{width:92px;height:92px;border-radius:50%;border:3px solid var(--good);color:var(--good);
  display:grid;place-items:center;animation:pop .6s cubic-bezier(.2,1.5,.35,1) both}
.tick svg{width:46px;height:46px}
.done h2{font-size:42px;font-weight:700;letter-spacing:-.045em;margin-top:26px;line-height:1}
.done p{font-size:16.5px;color:var(--ink-2);margin-top:12px;line-height:1.5;max-width:32ch}
.perk{margin-top:26px;background:var(--ink);color:var(--paper);padding:20px;border-radius:3px;
  box-shadow:6px 6px 0 var(--hot)}
.perk .k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.perk .v{font-size:25px;font-weight:700;letter-spacing:-.032em;margin-top:6px;line-height:1.1}
.perk .w{font-size:13.5px;opacity:.78;margin-top:9px;line-height:1.45}
.receipt{margin-top:22px;padding:15px;border:2px dashed var(--rule);border-radius:3px;
  font-size:12.5px;color:var(--ink-2);line-height:1.6}
.receipt b{color:var(--ink);font-weight:700}
.powered{text-align:center;font-size:12px;color:var(--ink-3);padding:30px 0 20px;letter-spacing:.03em}
.powered b{color:var(--ink-2)}

.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:2px;font-size:14px;
  font-weight:600;opacity:0;pointer-events:none;transition:.32s cubic-bezier(.2,1.2,.35,1);z-index:40}
.toast.on{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- expectation block: what happens to what I write ---------- */
.whereto{margin-top:40px;padding-top:22px;border-top:1px dashed var(--rule)}
.wk{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.wl{display:flex;align-items:center;gap:7px;margin-top:13px;flex-wrap:wrap}
.wp{width:30px;height:30px;border-radius:3px;background:var(--c);color:#fff;display:grid;
  place-items:center;font-size:14px;font-weight:700;flex:none}
.wt{font-size:14px;color:var(--ink-2);line-height:1.45;flex:1;min-width:190px;margin-left:4px}
.wn{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.5}

/* the back control sits ABOVE the heading rather than over it */
.scr:has(.back) .hd{margin-top:62px}