/* ============================================================
   MYME — Patient site  ·  Design tokens & shared components
   ============================================================ */

:root{
  --paper:      #F5F2EB;
  --paper-2:    #EDE8DE;
  --card:       #FFFFFF;
  --navy:       #0E1318;
  --navy-2:     #141B22;
  --navy-card:  #1B232B;

  --ink:        #161C20;
  --ink-soft:   #44504C;
  --muted:      #6E7C76;
  --muted-2:    #8A968F;

  --blue:       #5BA0F2;
  --blue-deep:  #2E72C9;
  --green:      #89A689;
  --green-deep: #557A57;

  --line:       rgba(22,28,32,.10);
  --line-2:     rgba(22,28,32,.16);
  --line-dark:  rgba(255,255,255,.10);
  --shadow-sm:  0 1px 2px rgba(22,28,32,.05), 0 2px 8px rgba(22,28,32,.05);
  --shadow:     0 4px 14px rgba(22,28,32,.08), 0 18px 50px -22px rgba(22,28,32,.30);
  --shadow-lg:  0 30px 90px -40px rgba(22,28,32,.55);

  --display: "Figtree", system-ui, sans-serif;
  --body:    "Hanken Grotesque", system-ui, sans-serif;

  --maxw: 1180px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 36px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; line-height:1.05;
  margin:0; letter-spacing:-0.02em; color:var(--ink);
}
p{ margin:0; text-wrap:pretty; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

.grad{
  background:linear-gradient(98deg,var(--blue-deep),var(--green-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-light{
  background:linear-gradient(98deg,var(--blue),#a9c6a9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Eyebrow label ---------- */
.eyebrow{
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::after{ content:""; width:46px; height:1px; background:var(--line-2); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ content:""; width:46px; height:1px; background:var(--line-2); }
.eyebrow.on-dark{ color:var(--muted-2); }
.eyebrow.on-dark::after,.eyebrow.on-dark::before{ background:var(--line-dark); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:16px;
  padding:14px 24px; border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:#4a92ea; transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(46,114,201,.6); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.on-dark{ color:#fff; border-color:var(--line-dark); }
.btn-ghost.on-dark:hover{ border-color:#fff; }
.btn-lg{ padding:17px 30px; font-size:17px; }

/* ---------- Section scaffolding ---------- */
.section{ padding:104px 0; }
.section-tight{ padding:72px 0; }
.dark{ background:var(--navy); color:#E9EEF1; }
.dark h1,.dark h2,.dark h3{ color:#F3F7F9; }
.paper-2{ background:var(--paper-2); }

.section-head{ max-width:760px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4.4vw,50px); margin-top:18px; }
.section-head p.lede{ font-size:19px; color:var(--ink-soft); margin-top:18px; }
.dark .section-head p.lede{ color:#AEB9BE; }

.reveal{ opacity:1; transform:none; }

/* ---------- Cards ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; box-shadow:var(--shadow-sm);
}
.ico{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--line);
}
.ico svg{ width:24px; height:24px; }
.ico.blue{ background:rgba(91,160,242,.14); border-color:rgba(91,160,242,.28); color:var(--blue-deep); }
.ico.green{ background:rgba(137,166,137,.18); border-color:rgba(137,166,137,.34); color:var(--green-deep); }

/* ---------- Pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:13.5px;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.6); color:var(--ink-soft);
}
.pill .dot{ width:8px;height:8px;border-radius:50%; background:var(--green); }

/* ---------- App screenshot (frameless) ---------- */
.app-frame{ position:relative; width:300px; flex:none; }
.app-frame::before{
  content:""; position:absolute; inset:5% -13% -9% -13%; z-index:0; border-radius:48px;
  background:
    radial-gradient(58% 46% at 50% 26%, rgba(91,160,242,.30), transparent 70%),
    radial-gradient(58% 48% at 50% 82%, rgba(137,166,137,.26), transparent 72%);
  filter:blur(28px); opacity:.9; pointer-events:none;
}
.app-shot{
  position:relative; z-index:1; width:100%; aspect-ratio:9/19.2;
  border-radius:30px; overflow:hidden; background:var(--paper);
  border:1px solid rgba(22,28,32,.12);
  box-shadow:0 2px 6px rgba(22,28,32,.06), 0 26px 64px -24px rgba(22,28,32,.5);
}
.app-img{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,242,235,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
.hd-inner{ display:flex; align-items:center; gap:28px; height:74px; }
.hd-logo img{ height:34px; width:auto; }
.hd-nav{ display:flex; align-items:center; gap:28px; margin-left:8px; }
.hd-nav{ scroll-target-group: auto; }
.hd-nav a{ font-size:15.5px; font-weight:500; color:var(--ink-soft); transition:color .15s; }
.hd-nav a:hover{ color:var(--ink); }
.hd-nav a:target-current { background: linear-gradient(0deg, #0099cc33, transparent, transparent) transparent;  }
.hd-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.hd-actions{ display:flex; align-items:center; gap:18px; }
.hd-login{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); }
.hd-login:hover{ color:var(--blue-deep); }

/* Language dropdown — pure CSS via <details>/<summary> */
.hd-lang{ position:relative; }
.lang-trigger{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:5px 9px 5px 6px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.6);
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--ink-soft);
  transition:border-color .2s, background .2s, color .2s;
}
.lang-trigger::-webkit-details-marker{ display:none; }
.lang-trigger::marker{ content:""; }
.lang-trigger:hover{ border-color:var(--ink); color:var(--ink); }
.flag{
  width:23px; height:23px; flex:none; border-radius:50%; overflow:hidden;
  border:1px solid var(--line-2); display:block; line-height:0;
}
.flag svg{ width:100%; height:100%; display:block; }
.lang-code{ letter-spacing:.04em; }
.lang-caret{
  width:14px; height:14px; color:var(--muted);
  transition:transform .2s ease;
}
.hd-lang[open] .lang-caret{ transform:rotate(180deg); }

.lang-pop{
  position:absolute; top:calc(100% + 10px); right:0; min-width:248px;
  background:#fff; border:1px solid var(--line); border-radius:15px;
  box-shadow:var(--shadow); padding:6px;
  display:flex; flex-direction:column; gap:2px; z-index:60;
  animation:lang-pop-in .16s ease both;
}
@keyframes lang-pop-in{
  from{ opacity:0; transform:translateY(-6px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.lang-opt{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:10px;
  font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink);
  transition:background .15s ease;
}
.lang-opt:hover{ background:var(--paper-2); }
.lang-opt.is-active{ background:rgba(91,160,242,.10); color:var(--blue-deep); }
.lang-opt .flag{ width:26px; height:26px; }
.lang-opt .lang-name{ flex:1; white-space:nowrap; }
.lang-opt .check{
  width:17px; height:17px; color:var(--blue-deep);
  opacity:0; flex:none;
}
.lang-opt.is-active .check{ opacity:1; }

/* no-JS mobile nav (hidden checkbox + label) */
.nav-toggle{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  opacity:0; overflow:hidden; clip:rect(0 0 0 0);
}
.hd-burger{
  display:none; background:none; border:0; width:42px; height:42px;
  flex-direction:column; gap:5px; justify-content:center; align-items:center;
  cursor:pointer;
}
.hd-burger span{
  width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.hd-mobile{
  display:none; flex-direction:column; gap:6px;
  padding:8px 28px 22px; border-bottom:1px solid var(--line); background:var(--paper);
}
.hd-mobile a{
  padding:12px 4px; font-family:var(--display); font-weight:600; font-size:17px;
  border-bottom:1px solid var(--line);
}
.hd-mobile a.btn{ border:0; margin-top:10px; justify-content:center; }
.nav-toggle:checked ~ .hd-mobile{ display:flex; }
.nav-toggle:checked ~ .wrap .hd-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .wrap .hd-burger span:nth-child(2){ opacity:0; }
.nav-toggle:checked ~ .wrap .hd-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding:70px 0 96px; }
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(620px 460px at 78% 8%, rgba(91,160,242,.20), transparent 60%),
    radial-gradient(560px 480px at 90% 70%, rgba(137,166,137,.20), transparent 62%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero-copy .pill{ margin-bottom:24px; }
.hero h1{ font-size:clamp(38px,5.4vw,68px); font-weight:800; letter-spacing:-0.03em; }
.hero-lede{ font-size:clamp(18px,2vw,21px); color:var(--ink-soft); margin-top:24px; max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-stage{ position:relative; width:300px; display:flex; justify-content:center; }

/* ---------- Hero · floating data chips ----------
   Scoped chip stream animation: integral to the hero design.
   `prefers-reduced-motion` fallback collapses to the static scatter. */
.data-orbit{ position:absolute; inset:0; z-index:4; pointer-events:none; --k:1; }
.dchip{
  position:absolute; left:50%; top:44%;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:#fff; border:1px solid rgba(22,28,32,.1);
  box-shadow:0 1px 2px rgba(22,28,32,.06), 0 12px 26px -8px rgba(22,28,32,.42), 0 2px 8px rgba(22,28,32,.12);
  padding:9px 14px 9px 10px; border-radius:13px;
  font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--ink);
  transform-origin:50% 50%;
  transform:translate(calc(-50% + var(--sx) * var(--k,1)), calc(-50% + var(--sy) * var(--k,1))) rotate(var(--rot));
}
@media (prefers-reduced-motion: no-preference){
  .dchip{
    animation:chipStream 7s cubic-bezier(.55,0,.35,1) infinite both;
    animation-delay:var(--delay);
    will-change:transform, opacity;
  }
}
@keyframes chipStream{
  0%   { opacity:0; transform:translate(calc(-50% + var(--sx) * var(--k,1)), calc(-50% + var(--sy) * var(--k,1))) rotate(var(--rot)) scale(.72); }
  9%   { opacity:1; transform:translate(calc(-50% + var(--sx) * var(--k,1)), calc(-50% + var(--sy) * var(--k,1))) rotate(var(--rot)) scale(1); }
  54%  { opacity:1; transform:translate(calc(-50% + var(--sx) * var(--k,1)), calc(-50% + var(--sy) * var(--k,1))) rotate(var(--rot)) scale(1); }
  73%  { opacity:.85; transform:translate(-50%, -50%) rotate(0deg) scale(.6); }
  82%  { opacity:0; transform:translate(-50%, -46%) rotate(0deg) scale(.4); }
  100% { opacity:0; transform:translate(-50%, -46%) rotate(0deg) scale(.4); }
}
.dchip .di{
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center; flex:none;
  background:rgba(91,160,242,.14); color:var(--blue-deep);
}
.dchip .di svg{ width:17px; height:17px; }
.dchip:nth-child(2n) .di{ background:rgba(137,166,137,.18); color:var(--green-deep); }

.hero-chip{
  position:absolute; z-index:5; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  padding:11px 15px; border-radius:14px;
  font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--ink);
}
.hero-chip .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(137,166,137,.22);
}
.chip-2{ bottom:-14px; right:-10px; animation:float 6s ease-in-out infinite .8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (prefers-reduced-motion: reduce){ .chip-2{ animation:none; } }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{
  position:relative; overflow:hidden;
  background:var(--ink); color:#E9EEF1; padding:66px 0;
}
.trust-inner{ position:relative; z-index:2; }
.trust-main{ display:flex; flex-direction:column; gap:28px; max-width:560px; }
.trust-photo{
  position:absolute; top:0; right:0; bottom:0; width:44%; height:100%;
  display:block; z-index:1; object-fit:cover; background:#dfe6ea;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%);
          mask-image:linear-gradient(90deg, transparent 0, #000 34%);
}
.trust-lead{
  font-family:var(--display); font-weight:500;
  font-size:clamp(17px,2vw,21px); line-height:1.4;
  color:#CDd6da; max-width:760px;
}
.trust-lead strong{ color:#fff; font-weight:700; }
.trust-stats{ display:flex; gap:0; justify-content:flex-start; align-items:stretch; flex-wrap:nowrap; }
.trust-stats div{
  flex:1 1 0; min-width:0; text-align:left; padding:0 26px;
  border-left:2px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column;
}
.trust-stats div:first-child{ padding-left:0; border-left:0; }
.trust-stats b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(26px,3vw,34px); color:var(--blue); line-height:1;
}
.trust-stats span{ margin-top:10px; font-size:13px; color:#9aa6ab; }
.trust-stats div:nth-child(3) b{ color:#a9c6a9; }

/* ============================================================
   PRESS marquee
   ============================================================ */
.press{ overflow:hidden; }
.press .section-head{ margin-bottom:44px; }
.press-viewport{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.press-track{
  display:flex; align-items:center; width:max-content;
  animation:pressScroll 42s linear infinite; will-change:transform;
}
.press-logo{
  flex:none; width:210px; height:118px; display:block; position:relative;
  border-radius:var(--r); background:var(--card); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-right:22px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.press-logo:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-2); }
.press-logo.is-blue{ background:#138af2; }
.press-img{ width:100%; height:100%; display:block; object-fit:cover; }
@keyframes pressScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.press-viewport:hover .press-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .press-track{ animation:none; } }

/* ============================================================
   FOOTER base
   ============================================================ */
.footer{ background:var(--navy); color:#AEB9BE; padding:72px 0 40px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hd-nav,.hd-actions{ display:none; }
  .hd-burger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-copy{ order:0; }
  .hero-visual{ order:1; }
  .hero-lede{ max-width:none; }
}
@media (max-width:860px){
  .trust{ padding-bottom:0; }
  .trust-main{ max-width:none; }
  .trust-photo{
    position:relative; width:100%; height:240px; margin-top:40px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 24%);
            mask-image:linear-gradient(180deg, transparent 0, #000 24%);
  }
}
@media (max-width:600px){
  body{ font-size:17px; }
  .wrap{ padding:0 20px; }
  .section{ padding:72px 0; }
  .hero{ padding:36px 0 72px; }
  .trust-stats div{ padding:0 14px; }
  .chip-2{ right:0; }
  .hero-stage{ width:236px; }
  .app-frame{ width:236px; }
  .dchip{ font-size:11px; padding:6px 10px 6px 7px; border-radius:10px; gap:6px; }
  .dchip .di{ width:21px; height:21px; border-radius:6px; }
  .dchip .di svg{ width:13px; height:13px; }
  .hd-inner{ gap:12px; height:64px; }
  .hd-logo img{ height:30px; }
  .hd-right{ gap:8px; }
  .lang-trigger{ padding:5px 8px 5px 5px; font-size:13px; }
  .lang-pop{ min-width:200px; }
  .trust-stats{ flex-direction:column; gap:0; }
  .trust-stats div{
    flex:none; padding:16px 0; border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .trust-stats div:first-child{ border-top:0; padding-top:0; }
  .trust-stats span[style]{ font-size:16px !important; }
  .press-logo{ width:160px; height:96px; margin-right:16px; }
}

@media (max-width:880px){ .data-orbit{ --k:.78; } }
@media (max-width:600px){ .data-orbit{ --k:.6; } }
@media (max-width:430px){ .data-orbit{ --k:.48; } .hero-stage,.app-frame{ width:206px; } }
@media (max-width:360px){ .data-orbit{ --k:.42; } }

/*
 * @import(https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=Hanken+Grotesque:wght@400;500;600;700&display=swap)
 */

/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.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;
}

#codeinput {
	left: 10%;
	font: .8em/2em "Fira Sans", sans-serif;
	width: 100%;
	padding: 3px 20px 6px 20px;
	background-color: #fefefe;
	xborder: 1px solid red;
	xborder-radius: 0 0 20px 20px;
	border-top: 0;
	z-index: 49;
	box-shadow: 2px 2px 2px #66666633;
	color: var(--ink-soft);
	display: flex;
}
#codeinput > :first-child { margin-left: auto; }
#codeinput > :last-child { margin-right: auto; display: flex; gap: .8em; }
#codeinput form input {
	font: 1em/2em monospace;
	text-decoration: none;
	border-radius: 5px;
	border-width: 1px;
	border-color: #cccccc;
	width: 8em;
	margin-left: .6em;
}
#codeinput form #codesubmit {
	margin-left: 0;
	background-color: var(--paper);
	color: var(--ink-soft);
	width: 3em;
	margin-right: auto;
	box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
	border: 0;
}