/* vink · vinklist.com
   One accent, cool neutral greys, generous rhythm.
   Every illustration on this page is built from HTML and CSS, so nothing
   stretches, nothing pixelates, and every word in it is translated. */

/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/instrument-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------- tokens -- */
:root{
  color-scheme: light;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;

  --ground:#F6F7F8;
  --panel:#FFFFFF;
  --panel-2:#EFF1F3;
  --ink:#0F1214;
  --ink-2:#48515A;
  --ink-3:#727B85;
  --line:#E3E7EA;
  --line-2:#EDF0F2;
  --accent:#0E7C6B;
  --accent-2:#0A5F52;
  --accent-soft:#E7F1EF;
  --accent-tint:#F1F7F5;
  --shadow-1:0 1px 2px rgba(15,18,20,.05), 0 1px 3px rgba(15,18,20,.04);
  --shadow-2:0 2px 4px rgba(15,18,20,.04), 0 18px 40px -18px rgba(15,18,20,.24);
  --shadow-3:0 0 0 1px rgba(15,18,20,.05), 0 2px 6px rgba(15,18,20,.06), 0 34px 60px -24px rgba(15,18,20,.34);

  --gutter:clamp(20px,5vw,40px);
  --max:1120px;
  --sect:clamp(64px,8.5vw,120px);
  --r:16px;
  --r-lg:24px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#0D1113;
    --panel:#151A1D;
    --panel-2:#1D2427;
    --ink:#EDF1F2;
    --ink-2:#A7B2B9;
    --ink-3:#7F8B92;
    --line:#242C30;
    --line-2:#1E2528;
    --accent:#3FB49E;
    --accent-2:#63C9B5;
    --accent-soft:#12312C;
    --accent-tint:#111A1A;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7);
    --shadow-3:0 0 0 1px rgba(255,255,255,.05), 0 34px 60px -24px rgba(0,0,0,.8);
  }
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel);color:var(--ink);
  padding:.75rem 1rem;border-radius:0 0 12px 0;z-index:100;font-weight:600}
.skip:focus{left:0}

/* --------------------------------------------------------------- typing -- */
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem;
}
.h2{
  font-size:clamp(1.75rem,1.25rem + 1.9vw,2.6rem);
  line-height:1.1;letter-spacing:-.024em;font-weight:600;
}
.h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.lede{color:var(--ink-2);margin-top:1rem;max-width:34em}
.small{font-size:.9375rem;color:var(--ink-2);line-height:1.55}

/* --------------------------------------------------------------- header -- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:.75rem;height:66px}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;
  letter-spacing:-.02em;font-size:1.125rem;margin-right:auto}
.brand svg{width:22px;height:22px;flex:0 0 auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:.9375rem;letter-spacing:-.005em;
  padding:.6875rem 1.125rem;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-2)}
.btn--primary:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--panel);border-color:var(--ink-3)}
.btn--lg{font-size:1rem;padding:.875rem 1.5rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--primary{color:#06201C}}

/* language menu */
.lang{position:relative}
.lang>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.9375rem;font-weight:500;color:var(--ink-2);
  padding:.5rem .625rem;border-radius:999px;border:1px solid transparent;
}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--ink);background:var(--panel)}
.lang>summary svg{width:15px;height:15px;opacity:.75}
.lang__abbr{display:none;font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:479px){
  .lang__full{display:none}
  .lang__abbr{display:inline}
}
.lang[open]>summary{background:var(--panel);border-color:var(--line)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:170px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-2);padding:.375rem;z-index:60;
}
.lang__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .625rem;border-radius:9px;text-decoration:none;
  font-size:.9375rem;color:var(--ink-2);
}
.lang__menu a:hover{background:var(--panel-2);color:var(--ink)}
.lang__menu a[aria-current="true"]{color:var(--accent);font-weight:600}
.lang__menu a[aria-current="true"]::after{content:"";width:14px;height:14px;flex:0 0 auto;
  background:currentColor;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
:root{--tick:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.5 8.6l3.4 3.4L13.5 4" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>')}

/* language hint bar */
.hint{
  display:none;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
  background:var(--accent-soft);color:var(--accent-2);
  font-size:.9375rem;padding:.625rem var(--gutter);text-align:center;
}
.hint.is-on{display:flex}
.hint a{font-weight:600}
.hint button{background:none;border:0;font:inherit;color:inherit;opacity:.65;cursor:pointer;
  line-height:1;padding:.25rem;font-size:1.125rem}
.hint button:hover{opacity:1}

/* ----------------------------------------------------------------- hero -- */
.hero{padding-block:clamp(40px,6vw,76px) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:70%;z-index:-1;
  background:radial-gradient(60% 60% at 70% 30%,var(--accent-tint),transparent 70%);
  pointer-events:none;
}
.hero__grid{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.75rem,1.7rem + 4.6vw,4.75rem);
  line-height:1.02;letter-spacing:-.02em;
}
.hero h1 em{display:block;font-style:italic;color:var(--accent)}
.hero .lede{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);margin-top:1.375rem;max-width:30em}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.875rem 1.125rem;margin-top:2rem}
.hero__soon{font-size:.9375rem;color:var(--ink-3)}

.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 55%,transparent)}
.trust ul{display:grid;gap:.75rem 2rem;padding-block:1.125rem;
  grid-template-columns:1fr}
@media (min-width:600px){.trust ul{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;align-items:flex-start;gap:.5rem;font-size:.9375rem;color:var(--ink-2)}
.trust svg{width:17px;height:17px;flex:0 0 auto;margin-top:.2em;color:var(--accent)}

/* ------------------------------------------------------------- features -- */
.feature{padding-block:var(--sect)}
.feature + .feature{padding-top:0}
.feature__grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){
  .feature__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature--flip .feature__media{order:-1}
}
.feature__media{display:flex;justify-content:center;position:relative}
.feature__media::before{
  content:"";position:absolute;z-index:-1;inset:6% 2%;border-radius:50%;
  background:radial-gradient(closest-side,var(--accent-tint),transparent);
}

/* shops composition (feature 2) */
.shops{width:min(400px,100%);display:grid;gap:1rem}
.shops__card,.shops__list{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.25rem;box-shadow:var(--shadow-2);
}
.shops__h{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1rem}
.shops__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem .5rem}
.shops__t{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.shops__t span{
  width:46px;height:46px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;padding:8px;
}
.shops__t img{width:100%;height:100%;object-fit:contain}
.shops__t b{font-size:.6875rem;font-weight:500;color:var(--ink-3);line-height:1.25}
.shops__t--more span{background:var(--accent-soft);border-color:transparent;color:var(--accent);
  font-weight:600;font-size:.875rem;padding:0}
.shops__list{background:var(--accent-tint);border-color:var(--accent-soft);box-shadow:none}
.shops__rows{font-size:12.4px;display:grid;gap:.55em}
.shops__rows .sc-row{border-radius:.9em}

/* ---------------------------------------------------------------- phone -- */
.phone{
  --w:min(300px,74vw);
  width:var(--w);
  aspect-ratio:300/620;
  background:#0A0C0E;
  border-radius:44px;
  padding:9px;
  box-shadow:var(--shadow-3);
  container-type:inline-size;
  flex:0 0 auto;
}
.phone--sm{--w:min(268px,68vw)}
.screen{
  height:100%;border-radius:36px;overflow:hidden;background:var(--ground);
  display:flex;flex-direction:column;font-size:11.4px;color:var(--ink);
  border:1px solid rgba(255,255,255,.06);
}
@supports (font-size:1cqw){.screen{font-size:3.85cqw}}

.sc-top{padding:1.35em 1.15em .85em;background:var(--panel);border-bottom:1px solid var(--line-2)}
.sc-title{display:flex;align-items:center;gap:.45em}
.sc-title b{font-size:1.42em;font-weight:600;letter-spacing:-.02em}
.sc-title svg{width:.8em;height:.8em;color:var(--ink-3)}
.sc-meta{font-size:.92em;color:var(--ink-3);margin-top:.15em}
.sc-people{margin-left:auto;display:flex}
.sc-people span{
  width:2.05em;height:2.05em;border-radius:50%;border:.16em solid var(--panel);
  margin-left:-.55em;display:grid;place-items:center;
}
.sc-people span:first-child{margin-left:0}
.sc-people svg{width:1.05em;height:1.05em;color:#fff}

.sc-chips{display:flex;gap:.5em;padding:.85em 1.15em;overflow:hidden;background:var(--panel)}
.sc-chip{
  width:2.9em;height:2.9em;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;padding:.45em;flex:0 0 auto;
}
.sc-chip img{width:100%;height:100%;object-fit:contain}
.sc-chip--all{background:var(--ink);color:var(--panel);border-color:var(--ink);
  font-size:.92em;font-weight:600;width:3.15em;height:3.15em;padding:0}
.sc-chip--on{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}

.sc-body{flex:1 1 auto;overflow:hidden;padding:.9em 1.15em;display:flex;flex-direction:column;gap:.55em}
.sc-row{
  background:var(--panel);border:1px solid var(--line-2);border-radius:1.05em;
  padding:.85em .95em;display:flex;align-items:center;gap:.7em;box-shadow:var(--shadow-1);
}
.sc-box{width:1.5em;height:1.5em;border-radius:.5em;border:1.5px solid var(--line);flex:0 0 auto}
.sc-box--on{background:var(--accent);border-color:var(--accent);display:grid;place-items:center}
.sc-box--on svg{width:.95em;height:.95em;color:#fff}
.sc-row b{font-weight:600;font-size:1.05em;letter-spacing:-.01em}
.sc-row i{font-style:normal;color:var(--ink-3);font-size:.92em;display:block;margin-top:.1em}
.sc-row--done b{color:var(--ink-3);text-decoration:line-through}
.sc-tag{margin-left:auto;font-size:.82em;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:.25em .6em;border-radius:.6em;white-space:nowrap}
.sc-by{margin-left:auto;width:1.6em;height:1.6em;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center}
.sc-by svg{width:.85em;height:.85em;color:#fff}
.sc-divider{display:flex;align-items:center;gap:.6em;font-size:.85em;color:var(--ink-3);
  margin-top:.2em}
.sc-divider::after{content:"";flex:1;height:1px;background:var(--line)}

.sc-add{display:flex;align-items:center;gap:.6em;padding:.75em 1.15em;background:var(--panel);
  border-top:1px solid var(--line-2)}
.sc-add__q{width:2.4em;height:2.4em;border-radius:50%;background:var(--panel-2);
  display:grid;place-items:center;color:var(--ink-3);font-weight:600;flex:0 0 auto}
.sc-add__f{flex:1;height:2.4em;border-radius:1.2em;background:var(--panel-2);
  display:flex;align-items:center;padding:0 .9em;color:var(--ink-3);font-size:.95em}
.sc-add__go{width:2.4em;height:2.4em;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex:0 0 auto}
.sc-add__go svg{width:1.1em;height:1.1em;color:#fff}

.sc-tabs{display:flex;background:var(--panel);border-top:1px solid var(--line-2);
  padding:.6em 0 1.1em}
.sc-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25em;
  font-size:.82em;color:var(--ink-3)}
.sc-tab svg{width:1.35em;height:1.35em}
.sc-tab--on{color:var(--accent);font-weight:600}

/* wallet screen */
.sc-pad{padding:1.35em 1.15em .85em;background:var(--panel);border-bottom:1px solid var(--line-2)}
.sc-pad b{font-size:1.42em;font-weight:600;letter-spacing:-.02em}
.sc-card{
  border-radius:1.05em;padding:.95em;display:flex;align-items:center;gap:.75em;
  background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow-1);
}
.sc-card__logo{width:2.6em;height:2.6em;border-radius:.7em;background:var(--panel);
  border:1px solid var(--line);display:grid;place-items:center;padding:.4em;flex:0 0 auto}
.sc-card__logo img{width:100%;height:100%;object-fit:contain}
.sc-card b{font-weight:600;font-size:1.02em}
.sc-card i{font-style:normal;display:block;color:var(--ink-3);font-size:.88em;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* Shop marks are drawn for a white ground, and a barcode has to stay dark on
   light to be scannable, so these two keep their colours in either theme. */
.sc-chip:not(.sc-chip--all),.sc-card__logo,.shops__t:not(.shops__t--more) span{
  background:#fff;border-color:rgba(15,18,20,.12)}
.sc-barcode{
  margin-top:.9em;background:#fff;border:1px solid rgba(15,18,20,.1);border-radius:1.05em;
  padding:1.1em .9em;text-align:center;box-shadow:var(--shadow-1);color:#48515A;
}
.sc-barcode em{color:#48515A}
.sc-barcode small{color:#727B85}
.sc-bars{height:5.4em;border-radius:.25em}
.sc-barcode small{display:block;margin-top:.7em;font-size:.85em;color:var(--ink-3)}
.sc-barcode em{display:block;margin-top:.35em;font-style:normal;font-size:.95em;
  font-variant-numeric:tabular-nums;letter-spacing:.22em;color:var(--ink-2)}

/* question card */
.sc-q{
  background:var(--panel);border:1px solid var(--accent-soft);border-radius:1.05em;
  padding:.95em;box-shadow:var(--shadow-1);
}
.sc-q__l{font-size:.8em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent)}
.sc-q b{display:block;font-weight:600;font-size:1.08em;margin-top:.35em;line-height:1.3}
.sc-q small{display:block;color:var(--ink-3);font-size:.85em;margin-top:.25em}
.sc-q__btns{display:flex;gap:.5em;margin-top:.8em}
.sc-q__btns span{
  flex:1;text-align:center;padding:.55em;border-radius:.75em;font-size:.95em;font-weight:600;
}
.sc-q__yes{background:var(--accent);color:#fff}
.sc-q__no{background:var(--panel-2);color:var(--ink-2)}

/* ----------------------------------------------------------------- more -- */
.more{padding-block:var(--sect)}
.more__grid{display:grid;gap:1px;margin-top:clamp(28px,4vw,44px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:660px){.more__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.more__grid{grid-template-columns:repeat(4,1fr)}}
.more__cell{background:var(--panel);padding:clamp(24px,3vw,32px)}
.more__cell svg{width:22px;height:22px;color:var(--accent);margin-bottom:1rem}
.more__cell p{margin-top:.5rem;color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* ---------------------------------------------------------------- steps -- */
.steps{padding-block:var(--sect)}
.steps__head{max-width:32em}
.steps__grid{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(32px,4.5vw,56px)}
@media (min-width:760px){.steps__grid{grid-template-columns:repeat(3,1fr)}}
.step{padding-top:1.125rem;border-top:2px solid var(--accent)}
.step__n{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--accent);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.625rem;
}
.step p{margin-top:.5rem;color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* -------------------------------------------------------------- privacy -- */
.privacy{padding-block:var(--sect)}
.privacy__in{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(32px,5vw,64px);
}
@media (min-width:900px){
  .privacy__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(32px,5vw,64px);align-items:start}
}
.privacy p + p{margin-top:1rem}
.privacy a.arrow{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;
  font-weight:600;color:var(--accent);text-decoration:none;font-size:.9375rem}
.privacy a.arrow:hover{text-decoration:underline;text-underline-offset:3px}
.privacy a.arrow svg{width:15px;height:15px}

/* ------------------------------------------------------------ close CTA -- */
.close{padding-block:var(--sect);text-align:center}
.close .lede{margin-inline:auto;text-align:center}
.close .btn{margin-top:1.75rem}

/* --------------------------------------------------------------- footer -- */
.foot{border-top:1px solid var(--line);padding-block:2.5rem 3rem;color:var(--ink-3);
  font-size:.9375rem}
.foot__top{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.foot__brand{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink-2)}
.foot__brand svg{width:18px;height:18px}
.foot__links{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-left:auto}
.foot__links a{text-decoration:none}
.foot__links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot__langs{display:flex;flex-wrap:wrap;gap:.5rem .875rem;margin-top:1.5rem}
.foot__langs a{text-decoration:none;font-size:.875rem}
.foot__langs a[aria-current="true"]{color:var(--ink-2);font-weight:600}
.foot__langs a:hover{color:var(--ink)}
.foot__note{margin-top:1.5rem;font-size:.8125rem;line-height:1.5;max-width:60ch;color:var(--ink-3)}

/* ------------------------------------------------------------ legal doc -- */
.doc{padding-block:clamp(40px,6vw,72px) var(--sect)}
.doc__in{max-width:44rem;margin-inline:auto}
.doc h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);line-height:1.05;letter-spacing:-.02em}
.doc__meta{color:var(--ink-3);font-size:.875rem;margin-top:.75rem}
.doc h2{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin-top:2.75rem;
  padding-top:1.25rem;border-top:1px solid var(--line)}
.doc p{margin-top:1rem;color:var(--ink-2)}
.doc ul{margin-top:1rem;display:grid;gap:.625rem}
.doc li{position:relative;padding-left:1.25rem;color:var(--ink-2)}
.doc li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.doc dl{margin:1.25rem 0 0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.doc dt{background:var(--panel);padding:1rem 1.125rem .25rem;font-weight:600;font-size:.9375rem}
.doc dd{background:var(--panel);margin:0;padding:0 1.125rem 1rem;color:var(--ink-2);
  font-size:.9375rem;line-height:1.55}
.doc a{color:var(--accent);text-underline-offset:3px}
.doc__intro{font-size:1.0625rem}
.doc__back{display:inline-flex;align-items:center;gap:.4rem;margin-top:2.5rem;
  font-weight:600;color:var(--accent);text-decoration:none;font-size:.9375rem}
.doc__back svg{width:15px;height:15px;flex:0 0 auto}
.doc__back:hover{text-decoration:underline;text-underline-offset:3px}
.doc__callout{margin-top:1.25rem;background:var(--accent-tint);border:1px solid var(--accent-soft);
  border-radius:var(--r);padding:1.125rem 1.25rem;color:var(--ink-2);font-size:.9375rem}
.doc__callout p:first-child{margin-top:0}

/* comfortable touch targets for the small text links */
.foot__links a,.foot__langs a{display:inline-block;padding-block:.375rem}
.privacy a.arrow,.doc__back{padding-block:.25rem}
.brand{padding-block:.25rem}

/* In dark mode the accent lightens, so anything sitting on it takes dark ink. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sc-q__yes{color:#06201C}
  :root:not([data-theme="light"]) .sc-add__go svg,
  :root:not([data-theme="light"]) .sc-box--on svg{color:#06201C}
  :root:not([data-theme="light"]) .step{border-top-color:var(--accent)}
}


/* mockup pieces that used to be inline styles, moved here so the site can run
   under a strict content security policy with no inline style at all */
.av-0{background:#0E7C6B}
.av-1{background:#3E6B8F}
.av-2{background:#A2603C}
.sc-chip--off{background:var(--panel);color:var(--ink-3);border-color:var(--line)}
.sc-card + .sc-card,.sc-card{margin-bottom:.55em}
.sc-gap{height:.35em}
.sc-divider--first{margin-top:0}
.sc-bars{background:linear-gradient(90deg,#14171A 0.00% 1.00%,transparent 1.00% 1.60%,#14171A 1.60% 3.10%,transparent 3.10% 3.70%,#14171A 3.70% 4.30%,transparent 4.30% 6.50%,#14171A 6.50% 7.10%,transparent 7.10% 8.10%,#14171A 8.10% 10.30%,transparent 10.30% 10.90%,#14171A 10.90% 13.10%,transparent 13.10% 13.70%,#14171A 13.70% 14.30%,transparent 14.30% 14.90%,#14171A 14.90% 16.40%,transparent 16.40% 17.90%,#14171A 17.90% 18.50%,transparent 18.50% 19.10%,#14171A 19.10% 19.70%,transparent 19.70% 21.90%,#14171A 21.90% 23.40%,transparent 23.40% 24.00%,#14171A 24.00% 26.20%,transparent 26.20% 26.80%,#14171A 26.80% 27.40%,transparent 27.40% 29.60%,#14171A 29.60% 30.20%,transparent 30.20% 32.40%,#14171A 32.40% 34.60%,transparent 34.60% 36.10%,#14171A 36.10% 36.70%,transparent 36.70% 37.30%,#14171A 37.30% 37.90%,transparent 37.90% 40.10%,#14171A 40.10% 40.70%,transparent 40.70% 41.70%,#14171A 41.70% 43.20%,transparent 43.20% 43.80%,#14171A 43.80% 46.00%,transparent 46.00% 46.60%,#14171A 46.60% 48.80%,transparent 48.80% 49.80%,#14171A 49.80% 52.00%,transparent 52.00% 52.60%,#14171A 52.60% 53.20%,transparent 53.20% 55.40%,#14171A 55.40% 57.60%,transparent 57.60% 58.20%,#14171A 58.20% 59.20%,transparent 59.20% 59.80%,#14171A 59.80% 62.00%,transparent 62.00% 62.60%,#14171A 62.60% 64.80%,transparent 64.80% 65.40%,#14171A 65.40% 67.60%,transparent 67.60% 68.20%,#14171A 68.20% 69.70%,transparent 69.70% 71.90%,#14171A 71.90% 73.40%,transparent 73.40% 74.40%,#14171A 74.40% 75.90%,transparent 75.90% 78.10%,#14171A 78.10% 79.60%,transparent 79.60% 80.60%,#14171A 80.60% 81.60%,transparent 81.60% 82.20%,#14171A 82.20% 82.80%,transparent 82.80% 83.40%,#14171A 83.40% 84.00%,transparent 84.00% 86.20%,#14171A 86.20% 87.20%,transparent 87.20% 89.40%,#14171A 89.40% 90.90%,transparent 90.90% 91.90%,#14171A 91.90% 93.40%,transparent 93.40% 94.40%,#14171A 94.40% 96.60%,transparent 96.60% 97.20%,#14171A 97.20% 97.80%,transparent 97.80% 100.00%)}