/* Shared by every page: tokens, type, nav, footer, dialogs, and the page-specific blocks.
   Moved out of index.html when the site grew an about and a feedback page. */
:root{
  --ground:#F7F5EC; --surface:#FFFDF6; --surface-2:#F1EEE0;
  --rule:#DFD9C4; --rule-soft:#EBE6D6;
  --ink:#16150E; --dim:#5C594B; --faint:#8B8775;
  --accent:#E8D083; --accent-text:#7A6A18; --accent-deep:#8A7A24; --accent-ink:#14130A;
  --flag:#A8442A;

  /* the stage is a screen: identical in both themes */
  --stage:#090907; --stage-ink:#EFEDE6; --stage-dim:#8E8B7E;
  --stage-faint:#5F5C51; --stage-rule:#25241D; --stage-accent:#FFF2B6;

  --mb-filter:brightness(0) opacity(.72);
  --panel:#FFFFFF; --panel-edge:#E0D8C0; --panel-shadow:0 12px 34px rgba(72,60,22,.09);
  --measure:64ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0B09; --surface:#141310; --surface-2:#1B1A15;
    --rule:#2B2A23; --rule-soft:#1F1E19;
    --ink:#EFEDE6; --dim:#9C998C; --faint:#6A6759;
    --accent:#FFF2B6; --accent-text:#FFF2B6; --accent-deep:#C9B96F; --accent-ink:#14130A;
    --flag:#F0A98C; --mb-filter:none;
    --panel:#1C1B16; --panel-edge:#35322A; --panel-shadow:0 16px 44px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0B09; --surface:#141310; --surface-2:#1B1A15;
  --rule:#2B2A23; --rule-soft:#1F1E19;
  --ink:#EFEDE6; --dim:#9C998C; --faint:#6A6759;
  --accent:#FFF2B6; --accent-text:#FFF2B6; --accent-deep:#C9B96F; --accent-ink:#14130A;
  --flag:#F0A98C; --mb-filter:none;
  --panel:#1C1B16; --panel-edge:#35322A; --panel-shadow:0 16px 44px rgba(0,0,0,.38);
}

/* the hero field is a screen too: fixed dark in both themes */
:root{--f-ground:#0B0B09; --f-ink:#EFEDE6; --f-dim:#9C998C; --f-faint:#6A6759;
  --f-rule:#2B2A23; --f-line:rgba(255,242,182,.055)}

*{box-sizing:border-box}
img{max-width:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace}

h1,h2,h3{margin:0; text-wrap:balance}
.h1{font-size:clamp(33px,5.4vw,58px); line-height:1.08; font-weight:600;
  font-stretch:112%; letter-spacing:-.012em; max-width:15ch}
.h2{font-size:clamp(25px,3.3vw,36px); line-height:1.14; font-weight:600;
  font-stretch:110%; letter-spacing:-.008em; max-width:20ch}
.h3{font-size:17px; font-weight:600; letter-spacing:-.002em}
.lead{font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.55; color:var(--dim); max-width:var(--measure)}
.body{font-size:16.5px; line-height:1.62; color:var(--dim); max-width:var(--measure)}
.small{font-size:13.5px; line-height:1.55; color:var(--faint); max-width:var(--measure)}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.15em; color:var(--accent-text); font-weight:500}

/* ---------- dark field: nav + hero + stage ---------- */
.field{position:relative; background:var(--f-ground); color:var(--f-ink);
  overflow:hidden; padding-bottom:42px; border-bottom:1px solid #1D1C16}
.field::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--f-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--f-line) 1px, transparent 1px);
  background-size:100px 100px; background-position:center 0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 148px, #000 214px,
    #000 calc(100% - 34px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 148px, #000 214px,
    #000 calc(100% - 34px), transparent 100%)}
.field > *{position:relative}
.field .navlinks a,.field .navlinks button{color:var(--f-dim)}
.field .navlinks a:hover,.field .navlinks button:hover{color:var(--f-ink)}
.field .pill{border-color:var(--f-rule); color:var(--f-dim)}
.field .h1{color:var(--f-ink)}
.field .lead{color:var(--f-dim)}
.field .btn.ghost{color:var(--f-ink); border-color:#3A392F}
.field .btn.ghost:hover{border-color:var(--f-ink)}
.field .btnnote{color:var(--f-faint)}
.field .hero{border-top:0}
.field .stagecap{color:var(--f-faint)}
.field + .wrap > .band:first-child{border-top:0; margin-top:60px}

/* ---------- nav ---------- */
.nav{display:flex; align-items:center; gap:14px; padding:22px 0 12px}
.brand{display:block; text-decoration:none; color:inherit}
.brand .lockup{width:clamp(232px,27vw,344px); height:auto; display:block}
.navlinks{margin-left:auto; display:flex; gap:24px; align-items:center}
.navlinks a,.navlinks button{font:inherit; font-size:14px; color:var(--dim); text-decoration:none;
  background:none; border:0; border-bottom:1px solid transparent; padding:0 0 1px; cursor:pointer}
.navlinks a:hover,.navlinks button:hover{color:var(--ink); border-bottom-color:var(--accent)}
.navlinks a:focus-visible,.navlinks button:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px; border-radius:2px}

/* ---------- hero ---------- */
.hero{padding:20px 0 0; border-top:1px solid var(--rule-soft)}
.pill{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--rule);
  border-radius:999px; padding:5px 13px 5px 6px; font-size:12.5px; color:var(--dim); margin-bottom:26px}
.pill i{font-style:normal; background:var(--accent); color:var(--accent-ink); border-radius:999px;
  padding:2px 8px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.12em; font-weight:700}
.herotext{display:flex; flex-direction:column; gap:20px; max-width:none}
.btn.dl{display:inline-flex; align-items:center; gap:9px}
.btn.dl svg{width:15px; height:15px; fill:currentColor; display:block; margin-top:-2px}
.btns{display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-top:2px}
.btn{font-size:14.5px; font-weight:600; padding:11px 20px; border-radius:7px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  font-family:inherit; text-decoration:none; display:inline-block}
.btn:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink); background:transparent}
.btn:focus-visible{outline:2px solid var(--accent-deep); outline-offset:3px}
.btnnote{font-size:13px; color:var(--faint)}
.linkbtn{font:inherit; font-size:13px; color:var(--faint); background:none; border:0;
  padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

/* ---------- stage ---------- */
.stagewrap{max-width:1240px; margin:44px auto 0; padding:0 20px}
.stage{position:relative; background:transparent;
  border:1px solid #1D1C16; border-radius:14px; overflow:hidden;
  aspect-ratio:1200/620; min-height:330px}
.stage svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.tile{position:absolute; transform:translateY(-50%); width:21%;
  background:rgba(16,16,12,.72); border:1px solid var(--stage-rule); border-radius:10px;
  padding:12px 13px 13px; backdrop-filter:blur(3px)}
.tile .lab{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.14em;
  color:var(--stage-faint); display:block; margin-bottom:7px}
.tile .big{font-size:clamp(17px,1.9vw,25px); font-weight:600; font-stretch:110%; color:var(--stage-ink);
  line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:5px}
.tile .big u{text-decoration:none; font-size:.5em; font-weight:500; color:var(--stage-faint)}
.tile .sub{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; color:var(--stage-dim);
  margin-top:8px; line-height:1.5; letter-spacing:.02em}
.tile .bar{height:3px; background:#23221B; border-radius:2px; margin-top:9px; overflow:hidden}
.tile .bar i{display:block; height:100%; width:41%; background:var(--stage-accent); border-radius:2px}
.tile.flagged{border-color:#4A2A1E}
.tile.flagged .dot{width:6px; height:6px; border-radius:50%; background:#F0A98C; display:inline-block;
  margin-right:6px; vertical-align:1px}
.tile.flagged .big{font-size:clamp(14px,1.35vw,17px); font-weight:600; line-height:1.25; display:block}
.t-a{left:3%;  top:25.3%}
.t-b{left:1%;  top:67.3%}
.t-c{right:3%; top:22.3%}
.t-d{right:1%; top:65.3%}
.stagecap{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.11em;
  color:var(--faint); text-align:center; margin:13px 0 0}

/* ---------- sections ---------- */
section.band{border-top:1px solid var(--rule-soft); margin-top:74px; padding-top:44px}
.cols{display:grid; grid-template-columns:170px minmax(0,1fr); gap:36px; align-items:start}
.rail{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:.11em;
  color:var(--faint); line-height:1.8; padding-top:8px}
.rail b{display:block; color:var(--ink); font-weight:500}
.flow{display:flex; flex-direction:column; gap:16px; min-width:0}

/* steps */
.steps{border-top:1px solid var(--rule-soft); margin-top:10px}
.step{display:grid; grid-template-columns:34px minmax(0,1fr); gap:18px; padding:20px 0;
  border-bottom:1px solid var(--rule-soft)}
.step .n{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--accent-text);
  padding-top:4px; font-variant-numeric:tabular-nums}
.step p{margin:6px 0 0}

/* features */
.feats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--rule-soft); border:1px solid var(--rule-soft); margin-top:10px}
.feat{background:var(--ground); padding:22px 22px 24px}
.feat p{margin:7px 0 0; font-size:14.5px; line-height:1.58; color:var(--dim)}

/* ---------- showcase: copy beside an oversized screenshot ---------- */
/* The shot is deliberately wider than its column: the panel clips it, so the screen reads as
   a window onto the app rather than a thumbnail of it. */
.showcase{border-top:0; padding-top:0; margin-top:30px}
.showcase + .showcase{margin-top:20px}
.panel{background:var(--panel); border:1px solid var(--panel-edge); border-radius:26px;
  box-shadow:var(--panel-shadow);
  overflow:hidden; position:relative}
.panel .inner{display:grid; grid-template-columns:minmax(0,41fr) minmax(0,59fr);
  gap:40px; align-items:center; padding:54px 0 54px 54px}
.panel .copy{display:flex; flex-direction:column; gap:13px; min-width:0}
.panel .copy .eyebrow{display:block}
.panel .h2{max-width:14ch}
.panel .body,.panel .small{max-width:46ch}
.bleed{min-width:0}
.shot{background:#0B0B09; border:1px solid #23221B; border-radius:13px; padding:8px;
  box-shadow:0 22px 50px rgba(0,0,0,.3)}
.shot img{display:block; width:100%; height:auto; border-radius:7px}
.bleed .shot{width:880px; max-width:none}
.caption{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.13em;
  color:var(--faint); margin:2px 0 0}
.verdict{font-size:16.5px; line-height:1.5; color:var(--ink); border-left:2px solid var(--accent);
  padding-left:18px; margin:6px 0 0; max-width:46ch}

/* the two modes, each cropped to its first screenful */
.modes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:26px}
.mode{background:var(--panel); border:1px solid var(--panel-edge); border-radius:20px;
  box-shadow:var(--panel-shadow);
  overflow:hidden; padding:20px 20px 0}
.mode .tag{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px; letter-spacing:.14em;
  color:var(--accent-text); display:block; margin-bottom:14px; font-weight:500}
.mode .clip{max-height:330px; overflow:hidden; background:#0B0B09; border:1px solid #23221B;
  border-bottom:0; border-radius:12px 12px 0 0; padding:8px 8px 0}
.mode .clip img{display:block; width:100%; height:auto; border-radius:6px 6px 0 0}

/* ---------- why: the reason the thing exists ---------- */
/* A dark sheet like the hero field, fixed dark in both themes. The bird has its own grid column
   and bleeds off the sheet's bottom-right corner — it never sits behind a line of copy. */
.why{border-top:0; padding-top:0; margin-top:30px}
.sheet{--why-bird:#E8D083; position:relative; overflow:hidden;
  background:var(--f-ground); color:var(--f-ink);
  border:1px solid #1D1C16; border-radius:26px;
  display:grid; grid-template-columns:minmax(0,62ch) minmax(220px,1fr); gap:40px;
  padding:64px 0 0 64px}
.sheet .copy{padding-bottom:64px; min-width:0}
.sheet .eyebrow{color:var(--stage-accent); display:block; margin:0 0 34px}
.sheet h2,.sheet h3{font-size:17px; font-weight:600; letter-spacing:-.002em; color:var(--f-ink); margin:0 0 8px}
.sheet p,.sheet li{font-size:16.5px; line-height:1.64; color:#B9B6A8}
.sheet p{margin:0}
.sheet .part + .part{margin-top:30px}
.sheet .part ul + p{margin-top:14px}
.sheet ul{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--f-rule)}
.sheet li{padding:10px 0; border-bottom:1px solid var(--f-rule)}
.sheet li b{color:var(--f-ink); font-weight:600}
.sheet .motto{margin-top:44px; padding-left:18px; border-left:2px solid var(--why-bird);
  font-family:"Newsreader",Georgia,serif; font-style:italic; font-size:clamp(24px,2.6vw,30px);
  line-height:1.2; color:var(--f-ink)}
.sheet .bird{align-self:end; justify-self:end;
  width:min(560px,calc(100% + 64px)); aspect-ratio:729/463; margin:0 -64px -34px 0;
  background:var(--why-bird);
  -webkit-mask:url(bird-mask.webp) center/contain no-repeat;
  mask:url(bird-mask.webp) center/contain no-repeat}

/* footer */
footer{margin-top:84px; border-top:1px solid var(--rule-soft); padding:24px 0 58px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px 24px}
footer .flinks{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
footer .flink{font:inherit; font-size:13.5px; color:var(--dim); text-decoration:none;
  background:none; border:0; border-bottom:1px solid var(--rule); padding:0 0 2px; cursor:pointer}
footer .flink:hover{color:var(--ink); border-bottom-color:var(--accent)}
/* Legal has nowhere to go yet: shown, not clickable, not focusable */
footer .flink.off{color:var(--faint); border-bottom-color:transparent; cursor:default}
footer .flink.off:hover{color:var(--faint); border-bottom-color:transparent}
footer .flink[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
footer .fcopy{grid-column:1/-1; grid-row:2; justify-self:center; margin:6px 0 0; text-align:center;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.09em; color:var(--faint); line-height:1.7}
footer .ficons{justify-self:end; display:flex; align-items:center; gap:13px}
footer .ficons a{display:grid; place-items:center; color:var(--dim); border-radius:8px}
footer .ficons a:hover{color:var(--ink)}
footer .ficons svg{width:19px; height:19px; fill:currentColor; display:block}
footer .ficons .mb img{width:21px; height:auto; display:block; filter:var(--mb-filter)}
footer a:focus-visible,footer .flink:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* request dialogs */
dialog.ask{padding:0; border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  color:var(--ink); width:min(440px, calc(100% - 32px)); box-shadow:0 24px 60px rgba(0,0,0,.34)}
dialog.ask::backdrop{background:rgba(6,6,4,.62)}
dialog.ask .box{padding:26px 26px 22px; position:relative}
dialog.ask h2{font-size:21px; line-height:1.2; font-weight:600; font-stretch:110%;
  margin:0 0 9px; max-width:24ch; padding-right:26px}
dialog.ask .dlede{font-size:14.5px; line-height:1.55; color:var(--dim); margin:0 0 17px; max-width:46ch}
dialog.ask .close{position:absolute; top:11px; right:11px; width:28px; height:28px; line-height:1;
  border-radius:7px; border:1px solid transparent; background:none; color:var(--faint);
  font-size:19px; cursor:pointer}
dialog.ask .close:hover{color:var(--ink); border-color:var(--rule)}
dialog.ask form{display:flex; gap:9px; flex-wrap:wrap}
dialog.ask input{flex:1 1 190px; min-width:0; font:inherit; font-size:14.5px; padding:10px 12px;
  border-radius:7px; border:1px solid var(--rule); background:var(--ground); color:var(--ink)}
dialog.ask input::placeholder{color:var(--faint)}
dialog.ask input:focus-visible,dialog.ask .btn:focus-visible,dialog.ask .close:focus-visible{
  outline:2px solid var(--accent-deep); outline-offset:2px}
dialog.ask .msg{font-size:13.5px; line-height:1.5; margin-top:13px; display:none}
dialog.ask .msg.on{display:block}
dialog.ask .msg.ok{color:var(--accent-text)}
dialog.ask .msg.err{color:var(--flag)}
dialog.ask .note{font-size:12px; color:var(--faint); margin:15px 0 0}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes travel{from{stroke-dashoffset:340} to{stroke-dashoffset:0}}
@keyframes breathe{0%,100%{opacity:.72} 50%{opacity:1}}
.herotext > *{animation:rise .62s cubic-bezier(.2,.7,.3,1) both}
.herotext > *:nth-child(2){animation-delay:.07s}
.herotext > *:nth-child(3){animation-delay:.13s}
.herotext > *:nth-child(4){animation-delay:.19s}
.herotext > *:nth-child(5){animation-delay:.25s}
.stagewrap{animation:fade .8s .18s both}
.pulse{animation:travel 4.2s linear infinite}
.corecube{animation:breathe 5.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .herotext > *,.stagewrap{animation:none}
  .pulse,.corecube{animation:none}
  .pulse{opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cols{grid-template-columns:1fr; gap:14px}
  .rail{padding-top:0}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel .inner{grid-template-columns:1fr; gap:26px; padding:34px 30px}
  .bleed .shot{width:100%}
  .panel .h2,.panel .body,.panel .small{max-width:none}
  .sheet{grid-template-columns:1fr; gap:0; padding:44px 30px 0}
  .sheet .copy{padding-bottom:8px}
  .sheet .bird{width:min(360px,78%); margin:0 -30px -22px 0}
}
@media (max-width:760px){
  .stage{aspect-ratio:auto; min-height:0; padding:8px 0 4px}
  .stage svg{position:relative; height:300px}
  .wires{display:none}
  .tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:4px 12px 14px}
  .tile{position:static; transform:none; width:auto}
  .feats{grid-template-columns:1fr}
  .modes{grid-template-columns:1fr}
  .navlinks{display:none}
  footer{grid-template-columns:1fr; gap:14px; text-align:left}
  footer .fcopy,footer .ficons{justify-self:start; text-align:left}
  footer .fcopy{grid-row:auto}
}

/* ---------- inner pages: about, feedback ---------- */
.field.slim{padding-bottom:34px}
.pagehead{padding:26px 0 6px; display:flex; flex-direction:column; gap:14px}
.pagehead .h1{max-width:18ch}
.pagebody{margin-top:44px}
.pagebody .why{margin-top:0}

/* feedback form */
.fb{max-width:640px; display:flex; flex-direction:column; gap:30px}
.fb .q{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; border:0; min-width:0}
.fb .q > label,.fb .q > legend{font-size:17px; font-weight:600; letter-spacing:-.002em; color:var(--ink); padding:0}
.fb .req{color:var(--faint); font-weight:500; margin-left:2px}
.fb .hint{font-size:13.5px; color:var(--faint); margin:-4px 0 0}
.fb input[type=text],.fb input[type=email],.fb select,.fb textarea{
  font:inherit; font-size:15.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:9px; padding:11px 13px; width:100%}
.fb textarea{min-height:148px; resize:vertical; line-height:1.55}
.fb select{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%; background-size:5px 5px; background-repeat:no-repeat}
.fb select:invalid{color:var(--faint)}
.fb ::placeholder{color:var(--faint)}
.fb input:focus-visible,.fb select:focus-visible,.fb textarea:focus-visible,.fb .up:focus-within,
.fb .tick:focus-within{outline:2px solid var(--accent-deep); outline-offset:2px}
.fb .drop{display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--surface-2);
  border:1px solid var(--rule-soft); border-radius:11px; padding:10px}
.fb .up{position:relative; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600;
  color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:9px 14px; cursor:pointer}
.fb .up:hover{border-color:var(--ink)}
.fb .up svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6}
.fb .up input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.fb .limits{font-size:13.5px; color:var(--dim)}
.fb .files{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.fb .files li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--dim);
  border-bottom:1px solid var(--rule-soft); padding:6px 0}
.fb .files .fn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.fb .files .fs{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; color:var(--faint)}
.fb .files button{font:inherit; font-size:13px; color:var(--faint); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:0}
.fb .files button:hover{color:var(--flag)}
.fb .tick{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--rule-soft);
  border-radius:11px; padding:11px 13px; cursor:pointer; font-size:15.5px; color:var(--ink)}
.fb .q > .tick{font-size:15.5px; font-weight:400; padding:11px 13px}
.fb [hidden]{display:none}
.fb .tick input{width:18px; height:18px; margin:0; accent-color:var(--accent-deep); cursor:pointer}
.fb .send{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.fb .send .btn[disabled]{opacity:.6; cursor:progress}
.fb .msg{font-size:14.5px; line-height:1.5; display:none; margin:0}
.fb .msg.on{display:block}
.fb .msg.err{color:var(--flag)}
.thanks{max-width:640px; display:none; flex-direction:column; gap:12px}
.thanks.on{display:flex}
.thanks .h2{max-width:none}