/* ============================================================
   HUFA site revamp v3. LIGHT FIRST.
   Paper is the ground. The deep anchor colour is punctuation,
   used twice: one block low on each page, and the footer.
   Palette locked to Harbour, 2026-09-14. Since 2026-09-30 a page carrying
   body.hufa-brand remaps these tokens to cobalt and lime (block at the end).
   ============================================================ */

/* ---------- palette 1: HARBOUR (default) ---------- */
:root{
  --paper:#F7F6F2; --paper-2:#EFEDE6; --card:#FFFFFF;
  --line:#DFDACE; --line-soft:#EAE5DA;
  --ink:#1A2027; --ink-soft:#5A6470; --ink-faint:#8B95A1;

  --deep:#12323F; --deep-2:#1B4152; --deep-line:#2C5668;
  --on-deep:#EEF4F6; --on-deep-soft:#A6BCC7; --on-deep-faint:#7A95A3;

  --hi:#E9A73C;          /* highlight, sits on deep */
  --hi-ink:#8F5B06;      /* same family, legible on paper */

  --req:#C2553B; --req-deep:#A6412A;
  --help:#1E7A64; --help-deep:#14614E;

  --mode:var(--req); --mode-deep:var(--req-deep);
  --mode-on-deep:#E88A6D;
  --shell:1150px; --r:4px;
}
:root[data-mode="helper"]{
  --mode:var(--help); --mode-deep:var(--help-deep); --mode-on-deep:#4FB396;
}

*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:24px}
@media (max-width:560px){.shell{padding-inline:18px}}

.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;
  gap:12px;margin:0 0 16px;color:var(--hi-ink)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none}

h1,h2,h3{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:600;
  letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,5.2vw,60px);line-height:1.04;font-variation-settings:"opsz" 100}
h2{font-size:clamp(26px,3.3vw,40px);line-height:1.1;font-variation-settings:"opsz" 72}
h3{font-size:18.5px;line-height:1.32;font-family:"IBM Plex Sans",sans-serif;
  font-weight:600;letter-spacing:0}
.said{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400}

.band{padding-block:clamp(52px,6.2vw,82px);background:var(--paper);color:var(--ink)}
.band.tint{background:var(--paper-2)}
.band.deep{background:var(--deep);color:var(--on-deep)}
.band.deep .eyebrow{color:var(--hi)}

.sec-head{margin-bottom:clamp(28px,3.4vw,42px);max-width:62ch}
.sec-head p{margin:12px 0 0;max-width:56ch;color:var(--ink-soft)}
.band.deep .sec-head p{color:var(--on-deep-soft)}

.btn{display:inline-block;cursor:pointer;text-decoration:none;
  font-family:"IBM Plex Sans",sans-serif;font-size:15px;font-weight:600;
  padding:13px 22px;border-radius:var(--r);border:1px solid transparent;
  background:var(--mode);color:#fff;transition:background-color .16s ease}
.btn:hover{background:var(--mode-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper-2)}
.band.deep .btn.ghost{color:var(--on-deep);border-color:var(--deep-line)}
.band.deep .btn.ghost:hover{background:var(--deep-2)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--hi-ink);outline-offset:3px}

.more{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mode-deep);border-bottom:1px solid currentColor;
  padding-bottom:3px}
.band.deep .more{color:var(--hi)}
.more:hover{opacity:.72}
.more::after{content:"\2192"}

/* ---------- status + header ---------- */
.status{background:var(--deep);color:var(--on-deep-soft);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase}
.status .in{display:flex;flex-wrap:wrap;gap:6px 20px;padding-block:9px;align-items:center}
.status b{color:var(--hi);font-weight:500}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--hi);
  display:inline-block;margin-right:8px;vertical-align:middle}

.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head .in{display:flex;align-items:center;gap:24px;padding-block:14px}
.brand{display:flex;align-items:baseline;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.brand b{font-family:"Fraunces",serif;font-weight:700;font-size:21px;letter-spacing:.2em}
.brand i{font-family:"Fraunces",serif;font-style:italic;font-size:13.5px;color:var(--ink-faint)}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-size:14.5px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.on{border-bottom:2px solid var(--mode);padding-bottom:2px}
.nav a.btn{color:#fff;border-bottom:0;padding-bottom:13px}
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  color:var(--ink);border-radius:var(--r);padding:8px 13px;
  font:600 14px "IBM Plex Sans",sans-serif;cursor:pointer}
@media (max-width:940px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 24px 18px}
  .nav.open{display:flex}
  .nav a{padding-block:11px;border-bottom:1px solid var(--line-soft)}
  .nav a.on{border-bottom:1px solid var(--mode)}
  .nav a.btn{margin-top:12px;text-align:center;padding-bottom:13px}
  .burger{display:block}
}

/* ---------- hero, light ---------- */
.hero{background:
    radial-gradient(900px 460px at 88% -12%, color-mix(in srgb, var(--hi) 16%, transparent), transparent 64%),
    radial-gradient(680px 380px at 0% 0%, color-mix(in srgb, var(--mode) 9%, transparent), transparent 62%),
    var(--paper);
  padding-block:clamp(26px,3.4vw,38px) clamp(48px,5.6vw,74px)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:clamp(30px,3.8vw,46px);max-width:620px}
.door{position:relative;text-align:left;cursor:pointer;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 17px;
  color:var(--ink-soft);font:inherit;display:flex;flex-direction:column;gap:2px;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease}
.door:hover{border-color:var(--ink-faint)}
.door .s{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.door .k{font-family:"Fraunces",serif;font-size:19px;font-weight:600;line-height:1.15;color:var(--ink)}
#door-req[aria-selected="true"]{background:var(--req);border-color:var(--req-deep);color:#fff}
#door-help[aria-selected="true"]{background:var(--help);border-color:var(--help-deep);color:#fff}
.door[aria-selected="true"] .k,.door[aria-selected="true"] .s{color:#fff}
.door[aria-selected="true"]::after{content:"";position:absolute;left:17px;right:17px;
  bottom:-1px;height:3px;background:var(--hi)}
@media (max-width:540px){.doors{grid-template-columns:1fr}}
.join-doors{margin-bottom:clamp(22px,3vw,34px)}

.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.5vw,56px);align-items:start}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1 em{font-style:italic;font-weight:400;color:var(--mode-deep)}
.lede{font-size:clamp(17px,1.3vw,19px);color:var(--ink-soft);max-width:46ch;margin:20px 0 0}
.lede b{color:var(--ink);font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* the example thread, on paper */
.device{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:16px 16px 14px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 48px -30px rgba(0,0,0,.34)}
.device-top{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint)}
.thread{display:flex;flex-direction:column;gap:9px;padding-top:14px}
.msg{max-width:88%;padding:11px 14px;border-radius:10px;font-size:14.5px;line-height:1.48}
.msg.them{background:var(--paper-2);color:var(--ink);border-bottom-left-radius:3px;align-self:flex-start}
.msg.you{background:var(--req-deep);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
/* the opening request is not a chat line, it is the sentence the person typed.
   Pale ground and ink text, so the most important copy on the page is the most readable. */
.msg.ask{background:color-mix(in srgb, var(--req) 12%, #fff);color:var(--ink);
  align-self:stretch;max-width:100%;border-radius:8px;border-bottom-right-radius:8px;
  border-left:3px solid var(--req);padding:14px 17px;
  font-family:"Fraunces",serif;font-style:italic;font-size:17.5px;line-height:1.46}
.sys{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;padding-block:2px}
.pincard{border:1px dashed var(--line);border-radius:8px;padding:12px;text-align:center;
  background:var(--paper)}
.pincard .code{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:600;
  letter-spacing:.34em;color:var(--hi-ink);text-indent:.34em}
.pincard .code small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.pincard .cap{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.caption{font-size:12.5px;color:var(--ink-faint);margin:12px 0 0;text-align:center}

.job{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 48px -30px rgba(0,0,0,.34)}
.jsaid{font-family:"Fraunces",serif;font-style:italic;font-size:18px;line-height:1.42;
  margin:0 0 18px;color:var(--ink)}
.jrow{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding-block:16px;
  border-block:1px solid var(--line-soft)}
.jrow .lab{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);display:block}
.jrow .v{font-size:16px;font-weight:600}
.jrow .v.big{font-family:"IBM Plex Mono",monospace;font-size:25px;color:var(--help-deep)}
.claim{width:100%;margin-top:16px;background:var(--help);color:#fff;border:0;
  border-radius:var(--r);padding:13px;font:600 15px "IBM Plex Sans",sans-serif;cursor:pointer}

/* ---------- trust strip, tinted not dark ---------- */
.strip{background:var(--paper-2);border-block:1px solid var(--line)}
.strip .in{display:grid;grid-template-columns:repeat(4,1fr)}
.strip a{padding:20px 24px;border-left:1px solid var(--line);text-decoration:none;
  color:inherit;display:block;transition:background-color .16s ease}
.strip a:hover{background:var(--card)}
.strip a:first-child{border-left:0;padding-left:0}
.strip .t{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.strip .d{display:block;font-size:13.5px;color:var(--ink-faint);margin-top:3px;line-height:1.42}
@media (max-width:880px){.strip .in{grid-template-columns:1fr 1fr}
  .strip a{border-left:0;padding:15px 0;border-top:1px solid var(--line)}
  .strip a:nth-child(-n+2){border-top:0}
  .strip a:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}}
@media (max-width:470px){.strip .in{grid-template-columns:1fr}
  .strip a:nth-child(even){padding-left:0;border-left:0}
  .strip a:nth-child(2){border-top:1px solid var(--line)}}

/* ---------- three short steps ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
@media (max-width:820px){.three{grid-template-columns:1fr;gap:22px}}
.three > div{counter-increment:s;border-top:2px solid var(--mode);padding-top:16px}
.three > div::before{content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  color:var(--ink-faint);display:block;margin-bottom:8px}
.three h3{font-family:"Fraunces",serif;font-size:22px;font-weight:600;line-height:1.2}
.three p{margin:8px 0 0;font-size:15px;color:var(--ink-soft)}
.after{margin-top:clamp(28px,3.2vw,40px)}

/* ---------- quote, the one deep moment on home ---------- */
.quote{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,54px);align-items:center}
@media (max-width:840px){.quote{grid-template-columns:1fr;gap:24px}}
.quote blockquote{margin:0;font-family:"Fraunces",serif;font-size:clamp(23px,2.7vw,34px);
  line-height:1.26;font-weight:500}
.quote .side p{margin:0 0 18px;font-size:15.5px}
.band.deep .quote .side p{color:var(--on-deep-soft)}
.sig{display:flex;align-items:center;gap:12px;margin-top:20px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-deep-faint)}
.sig .rule{width:30px;height:1px;background:currentColor;flex:none}
.tbd{background:color-mix(in srgb, var(--hi) 15%, transparent);
  border:1px dashed var(--hi);border-radius:var(--r);
  padding:11px 13px;margin-top:18px;font-size:13px;color:var(--hi);max-width:52ch}

/* ---------- inner page heads, always light ---------- */
.pagehead{background:
    radial-gradient(700px 340px at 92% -24%, color-mix(in srgb, var(--hi) 14%, transparent), transparent 64%),
    var(--paper);
  padding-block:clamp(34px,4.2vw,52px) clamp(28px,3.4vw,40px);
  border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(31px,4vw,48px)}
.pagehead p{margin:16px 0 0;color:var(--ink-soft);max-width:58ch;font-size:17px}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;background:var(--card);padding:22px 20px 24px;
  border:1px solid var(--line);border-radius:var(--r)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  color:var(--hi-ink);display:block;margin-bottom:10px}
.steps b{display:block;font-size:17px;margin-bottom:5px}
.steps p{margin:0;font-size:14.5px;color:var(--ink-soft)}

.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.checks{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.checks{grid-template-columns:1fr}}
.check{background:var(--card);padding:21px 20px 22px;display:flex;flex-direction:column;gap:6px}
.check .n{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-faint)}
.check .t{font-size:17px;font-weight:600}
.check .d{font-size:14.5px;color:var(--ink-soft);margin:0}
.pill{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;border-radius:99px;margin-top:auto}
.pill.live{background:color-mix(in srgb, var(--help) 14%, #fff);color:var(--help-deep);
  border:1px solid color-mix(in srgb, var(--help) 34%, #fff)}
.pill.soon{background:color-mix(in srgb, var(--hi) 20%, #fff);color:var(--hi-ink);
  border:1px solid color-mix(in srgb, var(--hi) 46%, #fff)}
.note{font-size:14px;margin:20px 0 0;max-width:74ch;color:var(--ink-soft)}
.band.deep .note{color:var(--on-deep-faint)}

.safety{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:780px){.safety{grid-template-columns:1fr}}
.sf{background:var(--deep-2);border:1px solid var(--deep-line);border-radius:var(--r);padding:22px}
.sf h3{color:var(--hi);margin-bottom:7px}
.sf p{margin:0;font-size:15px;color:var(--on-deep-soft)}
.sf.wide{grid-column:1/-1}

.sits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:840px){.sits{grid-template-columns:1fr}}
.sit{border-top:2px solid var(--mode);padding-top:16px}
.sit q{display:block;font-family:"Fraunces",serif;font-style:italic;font-size:20px;
  line-height:1.3;quotes:none}
.sit p{margin:10px 0 0;font-size:15px;color:var(--ink-soft)}

.whos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.whos{grid-template-columns:1fr}}
.who{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;border-left:3px solid var(--mode)}
.who:nth-child(2){border-left-color:var(--hi-ink)}
.who:nth-child(3){border-left-color:var(--deep)}
.who:nth-child(4){border-left-color:var(--help)}
.who h3{margin-bottom:6px}
.who p{margin:0;font-size:15px;color:var(--ink-soft)}

.build{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:780px){.build{grid-template-columns:1fr}}
.bcol{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.bcol h3{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.bdot{width:8px;height:8px;border-radius:50%;background:var(--help);flex:none}
.bdot.soon{background:transparent;border:1.5px solid var(--hi-ink)}
.bcol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bcol li{font-size:15px;color:var(--ink-soft);padding-left:18px;position:relative}
.bcol li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--ink-faint)}

.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-size:17.5px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:22px;
  font-weight:400;color:var(--mode-deep);font-family:"IBM Plex Mono",monospace}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 40px 20px 0;margin:0;color:var(--ink-soft);font-size:15.5px;max-width:66ch}

/* ---------- form ---------- */
.formwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,3.6vw,42px);align-items:start}
@media (max-width:880px){.formwrap{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:clamp(20px,2.8vw,30px);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 24px 48px -34px rgba(0,0,0,.3)}
.panel h3{font-size:20px;font-family:"Fraunces",serif;font-weight:600}
.panel-note{margin:5px 0 22px;color:var(--ink-soft);font-size:14.5px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
input[type=text],input[type=tel],input[type=email],textarea{
  font:inherit;font-size:15.5px;padding:12px 13px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);border-radius:var(--r);width:100%}
input:focus,textarea:focus{background:#fff}
textarea{min-height:88px;resize:vertical;font-family:"Fraunces",serif;font-style:italic;font-size:16.5px}
input::placeholder{color:var(--ink-faint)}
textarea::placeholder{color:var(--ink-faint);font-style:italic}
.hint{margin:0;font-size:13px;color:var(--ink-faint)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.examples{display:flex;flex-wrap:wrap;gap:7px}
.ex{font:inherit;font-size:13px;cursor:pointer;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink-soft);border-radius:99px;padding:6px 12px}
.ex:hover{border-color:var(--mode);color:var(--mode-deep)}
.submit-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px}
.next{margin:0;font-size:13px;color:var(--ink-faint);max-width:32ch}
.aside{display:flex;flex-direction:column;gap:18px}
.aside div{border-left:2px solid var(--line);padding-left:15px}
.aside b{display:block;font-size:15px;margin-bottom:3px}
.aside p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.done{display:none;background:var(--card);border:1px solid var(--mode);
  border-left:4px solid var(--mode);border-radius:8px;padding:24px;color:var(--ink)}
.done.show{display:block}
/* site.js sets style.display directly; the inline style wins */
.done h3{font-family:"Fraunces",serif;font-size:21px;margin-bottom:7px}
.done p{margin:0 0 9px;font-size:15px;color:var(--ink-soft)}

.flip{margin-top:clamp(28px,3.4vw,42px);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between}
.flip p{margin:0;color:var(--ink-soft);max-width:56ch}
.flip b{color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--deep);color:var(--on-deep);padding-block:48px 28px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fgrid{grid-template-columns:1fr}}
.foot .brand{color:var(--on-deep)}
.fblurb{margin:13px 0 0;font-size:14px;color:var(--on-deep-faint);max-width:32ch}
.foot h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-deep-faint);margin:0 0 13px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--on-deep-soft);text-decoration:none;font-size:14.5px}
.foot a:hover{color:var(--hi)}
.fbase{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:36px;padding-top:18px;border-top:1px solid var(--deep-line);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--on-deep-faint)}

[hidden]{display:none!important}

/* ---------- real form extras: honeypot, errors, price bands ---------- */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{font-size:13.5px;color:var(--req-deep);min-height:0}
.err:empty{display:none}
.legend{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.area-echo{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--hi-ink)}
.area-echo:empty{display:none}
.bands{display:flex;flex-wrap:wrap;gap:8px}
.band-opt{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);border-radius:99px;
  padding:8px 14px;font-size:14.5px;color:var(--ink-soft)}
.band-opt:hover{border-color:var(--ink-faint)}
.band-opt:has(input:checked){background:var(--mode);border-color:var(--mode-deep);color:#fff}
.band-opt input{accent-color:var(--mode-deep)}
.selectall{margin:4px 0 2px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--mode);background:transparent;
  color:var(--mode-deep);font:600 13px/1 "IBM Plex Sans",sans-serif;cursor:pointer}
.selectall:hover{background:var(--paper-2)}
.selectall[aria-pressed="true"]{background:var(--mode);color:#fff}
.ownrow{display:flex;gap:8px;margin-top:6px}
.ownrow input{flex:1;min-width:0}
.ownadd{padding:0 18px}
.ownlist{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ownlist:empty{display:none}
.ownchip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;
  background:var(--mode);color:#fff;font:500 14px/1.2 "IBM Plex Sans",sans-serif}
.ownchip button{width:24px;height:24px;border-radius:999px;border:0;background:transparent;color:#fff;
  font-size:17px;line-height:1;cursor:pointer}
.ownchip button:hover{background:rgba(255,255,255,.2)}
.skill-group{margin:14px 0 6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.go[disabled]{opacity:.6;cursor:progress}
.wheretxt{font-size:14px;color:var(--ink-soft)}
.echo{font-family:"Fraunces",serif;font-style:italic;font-size:16px;color:var(--ink);
  border-left:3px solid var(--mode);padding-left:14px;margin:14px 0 0}
.echo:empty{display:none}

/* ---------- contact: label / value rows with honest status markers ---------- */
.rows{margin:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rows > div{background:var(--card);padding:18px 20px;display:grid;
  grid-template-columns:.85fr 1.15fr;gap:8px 28px;align-items:start}
@media (max-width:760px){.rows > div{grid-template-columns:1fr;gap:6px}}
.rows dt{font-size:16px;font-weight:600;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.rows dd{margin:0;font-size:14.5px;color:var(--ink-soft)}
.rows .val{display:block;font-family:"IBM Plex Mono",monospace;font-size:15px;
  color:var(--hi-ink);margin-bottom:5px;text-decoration:none}
.rows .val:hover{text-decoration:underline}
.todo,.ok{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;font-weight:400}
.todo{background:color-mix(in srgb, var(--hi) 20%, #fff);color:var(--hi-ink);
  border:1px solid color-mix(in srgb, var(--hi) 46%, #fff)}
.ok{background:color-mix(in srgb, var(--help) 14%, #fff);color:var(--help-deep);
  border:1px solid color-mix(in srgb, var(--help) 34%, #fff)}
.rows.on-deep{background:var(--deep-line);border-color:var(--deep-line)}
.rows.on-deep > div{background:var(--deep-2)}
.rows.on-deep dd{color:var(--on-deep-soft)}
.rows.on-deep .val{color:var(--hi)}
/* Safety net: any link without its own class. Without this a bare <a> renders
   browser-default blue, which fails contrast and breaks the palette. */
.band a:not([class]),.pagehead a:not([class]){color:var(--mode-deep);text-decoration:underline;text-underline-offset:3px}
.band a:not([class]):hover,.pagehead a:not([class]):hover{color:var(--mode)}
.band.deep a:not([class]),.band.deep .note a,.band.deep .rows dd a{color:var(--hi)}
.band.deep a:not([class]):hover{color:#F3C173}

/* HUFA brand, cobalt and lime, locked 2026-09-30 (claude/brand.md).
   Scoped to body.hufa-brand so the palette lands one page at a time; a page
   without the class still runs Harbour. The tokens below REMAP the Harbour
   names rather than adding new ones, so every existing rule in this file picks
   the new colours up untouched. What the names now mean on a branded page:
     paper = white, paper-2 = cloud, deep = cobalt (the footer and the one low
     band), hi = lime, req = cobalt, help = lime. Ink is text only: there are no
     black blocks on the website (founder ruling, 2026-09-30).
   Lime is a fill, never text: wherever the old rules put #fff on --mode, the
   overrides below swap in --mode-on, which is ink on the Hufer side. */
:root{--hufa-cobalt:#1B3FE0;--hufa-cobalt-deep:#142FB0;--hufa-cobalt-tint:#E4E9FF;
  --hufa-lime:#C8FF00;--hufa-lime-deep:#A8D600;--hufa-lime-tint:#F1FFB8;--hufa-lime-ink:#3E5200;
  --hufa-ink:#0E1220;--hufa-cloud:#F2F4F8}
body.hufa-brand{
  --paper:#FFFFFF; --paper-2:var(--hufa-cloud); --card:#FFFFFF;
  --line:#DCE1EA; --line-soft:#E8ECF2;
  --ink:var(--hufa-ink); --ink-soft:#5B6478; --ink-faint:#8A93A3;
  --deep:var(--hufa-cobalt); --deep-2:var(--hufa-cobalt-deep); --deep-line:#3D5CE8;
  --on-deep:#FFFFFF; --on-deep-soft:#D6DEFF; --on-deep-faint:#B3C0FF;
  --hi:var(--hufa-lime); --hi-ink:var(--hufa-lime-ink);
  --req:var(--hufa-cobalt); --req-deep:var(--hufa-cobalt-deep);
  --help:var(--hufa-lime); --help-deep:var(--hufa-lime-ink);
  --mode:var(--req); --mode-deep:var(--req-deep); --mode-on:#FFFFFF; --mode-hover:var(--hufa-cobalt-deep);
  --mode-on-deep:#8FA4FF;
  --pill:#FFFFFF; --pill-ink:var(--hufa-cobalt);
}
:root[data-mode="helper"] body.hufa-brand{
  --mode:var(--help); --mode-deep:var(--help-deep); --mode-on:var(--hufa-ink); --mode-hover:var(--hufa-lime-deep);
  --mode-on-deep:var(--hufa-lime);
  --pill:var(--hufa-lime); --pill-ink:var(--hufa-ink);
}
/* the wordmark: cobalt on white, lime on the cobalt footer */
.brand .wm{display:block;height:27px;width:auto;color:var(--hufa-cobalt)}
.foot .brand .wm{color:var(--hufa-lime)}
.hufa-brand .brand{align-items:center}
/* fills that carried white text now carry the mode's own text colour */
.hufa-brand .btn{color:var(--mode-on)}
.hufa-brand .btn:hover{background:var(--mode-hover)}
.hufa-brand .btn.ghost{color:var(--ink)}
.hufa-brand .btn.ghost:hover{background:var(--paper-2)}
.hufa-brand .band.deep .btn.ghost{color:var(--on-deep)}
.hufa-brand .nav a.btn{background:var(--hufa-cobalt);color:#fff}
.hufa-brand .nav a.btn:hover{background:var(--hufa-cobalt-deep)}
.hufa-brand .band-opt:has(input:checked){color:var(--mode-on);border-color:var(--mode)}
.hufa-brand .band-opt input{accent-color:var(--mode)}
.hufa-brand .selectall{border-color:var(--mode);color:var(--mode-deep)}
.hufa-brand .selectall[aria-pressed="true"]{color:var(--mode-on)}
.hufa-brand .ownchip,.hufa-brand .ownchip button{color:var(--mode-on)}
.hufa-brand .claim{color:var(--hufa-ink)}
.hufa-brand .msg.you{background:var(--hufa-cobalt);color:#fff}
.hufa-brand .hero h1 em{color:var(--hufa-cobalt)}
.hufa-brand a:focus-visible,.hufa-brand button:focus-visible,.hufa-brand input:focus-visible,
.hufa-brand textarea:focus-visible,.hufa-brand summary:focus-visible{outline-color:var(--hufa-cobalt)}
.hufa-brand .status{background:var(--hufa-cloud);color:var(--ink-soft)}
.hufa-brand .status b{background:var(--hufa-lime);color:var(--hufa-ink);font-weight:500;padding:2px 9px;border-radius:99px}
.hufa-brand .status .dot{background:var(--hufa-lime)}
.hufa-brand .tbd{color:var(--hufa-lime-ink);border-color:var(--hufa-lime-deep)}
.hufa-brand .foot a:hover{color:var(--hufa-lime)}
/* Site-wide rollout, 2026-09-30: the three home-page steps carry a cobalt top
   rule; the gold hover on cobalt bands goes white; lime text never lands on
   white, so the value on the job card reads in lime ink. */
.hufa-brand .steps li{border-top:3px solid var(--hufa-cobalt)}
.hufa-brand .band.deep a:not([class]):hover{color:#FFFFFF}
.hufa-brand .jrow .v.big{color:var(--hufa-lime-ink)}
.hufa-brand .pill.live{background:var(--hufa-lime-tint);color:var(--hufa-lime-ink);border-color:var(--hufa-lime-deep)}
.hufa-brand .ok{background:var(--hufa-lime-tint);color:var(--hufa-lime-ink);border-color:var(--hufa-lime-deep)}

/* The requester / Hufer switch.
   A pill slides along a cloud track: white with cobalt letters on the
   requester side, lime with ink letters on the Hufer side, so the side you
   are on is the side that is lit. The pill's position comes from
   html[data-mode], which site.js sets on every change, so it is right on
   first paint too, including a ?mode=helper deep link. The global
   prefers-reduced-motion rule at the top of this file cuts the movement
   without touching the colours. */
.hufa-brand .doors{position:relative;gap:0;padding:6px;border-radius:14px;
  background:var(--hufa-cloud);border:1px solid var(--line)}
.hufa-brand .doors::before{content:"";position:absolute;z-index:0;top:6px;left:6px;
  width:calc(50% - 6px);height:calc(100% - 12px);
  background:var(--pill);border-radius:10px;box-shadow:0 2px 10px rgba(14,18,32,.14);
  transition:transform .32s cubic-bezier(.22,.7,.25,1),background-color .32s ease}
:root[data-mode="helper"] .hufa-brand .doors::before{transform:translateX(100%)}
.hufa-brand .door{position:relative;z-index:1;background:transparent;border-color:transparent;
  border-radius:10px;color:var(--ink-soft);transition:color .2s ease,background-color .2s ease}
.hufa-brand .door .k{color:var(--ink-soft);transition:color .2s ease}
.hufa-brand .door:hover{background:rgba(14,18,32,.04);border-color:transparent;color:var(--ink)}
.hufa-brand .door:hover .k{color:var(--ink)}
.hufa-brand #door-req[aria-selected="true"],.hufa-brand #door-help[aria-selected="true"],
.hufa-brand .door[aria-selected="true"]:hover{background:transparent;border-color:transparent}
.hufa-brand .door[aria-selected="true"] .s{color:var(--pill-ink)}
.hufa-brand .door[aria-selected="true"] .k,.hufa-brand .door[aria-selected="true"]:hover .k{color:var(--pill-ink)}
.hufa-brand .door[aria-selected="true"]::after{display:none}
/* The form under the switch moves too, so the two read as one change. */
.hufa-brand #join-req:not([hidden]),.hufa-brand #join-help:not([hidden]){animation:hufa-swap .34s cubic-bezier(.22,.7,.25,1) both}
@keyframes hufa-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:540px){
  .hufa-brand .doors::before{width:calc(100% - 12px);height:calc(50% - 6px)}
  :root[data-mode="helper"] .hufa-brand .doors::before{transform:translateY(100%)}
}
/* New pages: /hufer, /asks, /areas, 404. Classes prefixed np-. Loaded after site.css. */

/* hufer: one job */
.np-onejob{max-width:620px}
.np-onejob .jsaid{margin-bottom:14px}
.np-jobtext{margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:15.5px;color:var(--ink-soft)}

/* hufer: job lines */
.np-lines{list-style:none;margin:0;padding:0;max-width:760px}
.np-lines li{display:grid;grid-template-columns:190px 1fr;gap:6px 20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line)}
.np-lines li:last-child{border-bottom:1px solid var(--line)}
.np-when{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hufa-cobalt)}
.np-what{font-size:17px;color:var(--ink)}
@media (max-width:560px){.np-lines li{grid-template-columns:1fr}}

/* hufer: four steps */
.steps.np-four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps.np-four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps.np-four{grid-template-columns:1fr}}
.steps.np-four b{margin-bottom:0}

/* asks: ticket cards */
.np-group + .np-group{margin-top:clamp(36px,4.4vw,52px)}
.np-group h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:18px}
.np-tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.np-tickets{grid-template-columns:1fr}}
.np-ticket{display:flex;min-width:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.np-stub{flex:none;width:18px;background:var(--hufa-cobalt);border-right:2px dashed #fff}
.np-ticket.np-alt .np-stub{background:var(--hufa-lime-tint);border-right-color:var(--line)}
.np-ticket p{margin:0;padding:18px 20px;font-size:18px;line-height:1.42;color:var(--ink);
  border-left:1px dashed var(--line);min-width:0;overflow-wrap:break-word}

/* areas: dot grid */
.np-map{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:clamp(12px,2.4vw,24px)}
.np-dots{display:block;width:100%;height:auto}
.np-dot{fill:var(--hufa-cobalt);opacity:.8}
.np-lime{fill:var(--hufa-lime);stroke:var(--hufa-cobalt);stroke-width:2}
.np-pulse{fill:var(--hufa-lime);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:np-pulse 2.4s ease-out infinite}
@keyframes np-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.np-pulse{animation:none;opacity:0}}

/* 404 */
.np-404 h1{font-size:clamp(31px,4vw,48px)}
.np-lede{margin:16px 0 0;color:var(--ink-soft);max-width:58ch;font-size:17px}
.np-pins{display:flex;gap:10px;margin-bottom:28px}
.np-pin{display:inline-flex;align-items:center;justify-content:center;width:clamp(52px,14vw,72px);
  aspect-ratio:4/5;border-radius:12px;background:var(--hufa-cobalt-tint);color:var(--hufa-cobalt);
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:clamp(28px,7vw,40px)}
.np-pin.np-pin-q{background:var(--hufa-lime);color:var(--ink)}

/* ============================================================
   Type system B and the fix pass, 2026-09-30 (claude/site-review-2026-09-30.md).
   Fraunces and IBM Plex Sans are retired. Bricolage Grotesque is what the
   product says, Nunito Sans is for reading, Nunito italic is only ever the
   sentence a person types, IBM Plex Mono is only PINs, codes and status.
   Same faces as the app. Scoped to body.hufa-brand like the colour remap.
   ============================================================ */
body.hufa-brand{
  --f-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:12px;
  font-family:var(--f-body);font-size:16.5px;line-height:1.6}
.hufa-brand h1,.hufa-brand h2,.hufa-brand .three h3,.hufa-brand .panel h3,.hufa-brand .done h3,
.hufa-brand .quote blockquote,.hufa-brand .door .k,.hufa-brand .sf h3,.hufa-brand .brand b{
  font-family:var(--f-display);font-style:normal;font-variation-settings:"opsz" 96}
.hufa-brand h1{font-weight:800;letter-spacing:-.035em;line-height:1.02}
.hufa-brand .hero h1{font-size:clamp(40px,5.4vw,68px);line-height:.98;letter-spacing:-.04em}
.hufa-brand .pagehead h1{font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;font-weight:750}
.hufa-brand h2{font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:700}
.hufa-brand h3{font-family:var(--f-body);font-weight:700;letter-spacing:0}
.hufa-brand .three h3{font-size:clamp(19px,1.6vw,22px);line-height:1.22;letter-spacing:-.01em;font-weight:700}
.hufa-brand .quote blockquote{font-weight:700;letter-spacing:-.02em;line-height:1.18}
.hufa-brand .door .k{font-weight:700;letter-spacing:-.01em}
/* the headline highlight: a lime bar behind the words, never lime letters */
.hufa-brand .hero h1 em{font-style:normal;color:var(--ink);
  background:linear-gradient(transparent 60%,var(--hufa-lime) 60%,var(--hufa-lime) 90%,transparent 90%);
  padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hufa-brand .lede{font-size:clamp(17px,1.35vw,19.5px);line-height:1.5}
.hufa-brand .lede b{font-weight:700}
/* what a person types */
.hufa-brand .said,.hufa-brand .msg.ask,.hufa-brand .jsaid,.hufa-brand .sit q,.hufa-brand .echo,
.hufa-brand textarea,.hufa-brand textarea::placeholder{font-family:var(--f-body);font-style:italic;font-weight:500}
.hufa-brand .msg.ask,.hufa-brand .jsaid{font-size:clamp(17px,1.45vw,19px);line-height:1.42}
.hufa-brand .sit q{font-size:21px;line-height:1.32}
/* utility text keeps the mono face; human choices do not */
.hufa-brand .eyebrow,.hufa-brand .sys,.hufa-brand .pill,.hufa-brand .more,.hufa-brand .jrow .lab,
.hufa-brand .device-top,.hufa-brand .status,.hufa-brand .fbase,.hufa-brand .foot h4,.hufa-brand .door .s,
.hufa-brand .legend,.hufa-brand .field label,.hufa-brand .skill-group,.hufa-brand .area-echo,
.hufa-brand .pincard .code,.hufa-brand .steps li::before,.hufa-brand .three > div::before,.hufa-brand .check .n{font-family:var(--f-mono)}
.hufa-brand .band-opt,.hufa-brand .band-opt *{font-family:var(--f-body);letter-spacing:0;text-transform:none}
.hufa-brand .btn,.hufa-brand .burger,.hufa-brand .claim,.hufa-brand .selectall,.hufa-brand .ownchip,
.hufa-brand .ex,.hufa-brand input{font-family:var(--f-body)}
.hufa-brand .btn{font-weight:700;border-radius:var(--r);transition:background-color .16s ease,transform .12s ease}
.hufa-brand .btn:active{transform:translateY(1px)}
.hufa-brand .brand i{font-family:var(--f-body);font-style:normal;font-size:13px;color:var(--ink-faint)}
.hufa-brand .pagehead .eyebrow{font-size:11px;margin-bottom:16px}
.hufa-brand a:focus-visible,.hufa-brand button:focus-visible,.hufa-brand input:focus-visible,
.hufa-brand textarea:focus-visible,.hufa-brand summary:focus-visible{
  outline:3px solid var(--hufa-lime);outline-offset:2px;box-shadow:0 0 0 5px var(--hufa-cobalt)}

/* ---- header fits a 360px phone ---- */
@media (max-width:420px){.hufa-brand .brand i{display:none}.hufa-brand .head .in{gap:12px}}
.hufa-brand .status .in{gap:4px 16px}
@media (max-width:420px){.hufa-brand .status span:nth-child(2){display:none}}

/* ---- lime is a fill, never text: every lime-on-cobalt text rule goes white ---- */
.hufa-brand .band.deep .eyebrow{color:var(--on-deep-soft)}
.hufa-brand .band.deep .more{color:#fff;border-bottom:2px solid var(--hufa-lime)}
.hufa-brand .sf h3{color:#fff}
.hufa-brand .rows.on-deep .val,.hufa-brand .band.deep a:not([class]),.hufa-brand .band.deep .note a,
.hufa-brand .band.deep .rows dd a{color:#fff;text-decoration:underline;text-decoration-color:var(--hufa-lime);
  text-decoration-thickness:2px;text-underline-offset:4px}
.hufa-brand .foot a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--hufa-lime);text-underline-offset:4px}
.hufa-brand .pincard .code{color:var(--hufa-cobalt)}

/* ---- live and before-launch must look different ---- */
.hufa-brand .pill.live,.hufa-brand .ok{background:var(--hufa-cobalt);color:#fff;border:1.5px solid var(--hufa-cobalt)}
.hufa-brand .pill.soon,.hufa-brand .todo{background:#fff;color:var(--hufa-cobalt);border:1.5px dashed var(--hufa-cobalt)}

/* ---- errors read as errors ---- */
.hufa-brand .err{color:#D7263D;font-weight:600}
.formerr{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:#FBE7EA;color:#A3162A;
  border:1px solid #F3C1C9;font-size:14.5px;font-weight:600}
.formerr:empty{display:none}

/* ---- the cobalt band never fuses with the cobalt footer ---- */
.hufa-brand .band.deep + .foot{margin-top:clamp(40px,5vw,64px)}
.hufa-brand .hero,.hufa-brand .pagehead{background:
  radial-gradient(var(--line) 1.1px,transparent 1.4px) right top/22px 22px no-repeat,var(--paper)}
.hufa-brand .hero{background:
  radial-gradient(var(--line) 1.1px,transparent 1.4px) 0 0/22px 22px,var(--paper);
  -webkit-mask:none}
.hufa-brand .hero{position:relative}
.hufa-brand .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 42%,transparent 100%)}
.hufa-brand .hero > .shell{position:relative}
.hufa-brand .pagehead{background:var(--paper)}

/* ---- home: the job card replaces the eleven-line thread ---- */
.jcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:14px;
  box-shadow:0 1px 2px rgba(14,18,32,.04),0 28px 56px -34px rgba(14,18,32,.38)}
.jtop{display:flex;justify-content:space-between;gap:12px;font:500 11px var(--f-mono,monospace);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.jcard .msg.ask{margin:0;max-width:none;background:var(--hufa-cobalt-tint);border-left:3px solid var(--hufa-cobalt);
  border-radius:0 12px 12px 0;padding:14px 16px;color:var(--ink)}
.jmeta{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:12px;
  border-bottom:1.5px dashed var(--line)}
.jmeta .lab{display:block;font:500 10.5px var(--f-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.jmeta .v{font:600 26px var(--f-mono,monospace);color:var(--ink)}
.tag{display:inline-block;font:600 11px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap}
.tag.t-cobalt{background:var(--hufa-cobalt);color:#fff}
.tag.t-lime{background:var(--hufa-lime);color:var(--hufa-ink)}
.jflow{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14.5px;color:var(--ink-soft)}
.jflow li{display:flex;align-items:center;gap:10px}
.jflow li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hufa-cobalt);flex:none}
.pins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pin{border-radius:12px;background:var(--hufa-cobalt-tint);padding:12px;text-align:center}
.pin.end{background:var(--hufa-lime-tint)}
.pin small{display:block;font:500 10.5px var(--f-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pin span{font:600 clamp(24px,2.6vw,30px) var(--f-mono,monospace);letter-spacing:.3em;text-indent:.3em;display:block;color:var(--hufa-cobalt)}
.pin.end span{color:var(--hufa-lime-ink)}
.jdone{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);flex-wrap:wrap}
.hufa-brand .job{border-radius:18px}
.hufa-brand .claim{display:block;text-align:center;text-decoration:none;background:var(--hufa-lime);color:var(--hufa-ink);
  border-radius:var(--r);font-weight:700}
.hufa-brand .claim:hover{background:var(--hufa-lime-deep)}

/* ---- home: icons on the trust strip ---- */
.strip .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--hufa-cobalt-tint);
  color:var(--hufa-cobalt);fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
  display:block;margin-bottom:10px}
.strip a:nth-child(even) .ic{background:var(--hufa-lime-tint);color:var(--hufa-lime-ink)}
.hufa-brand .strip a{padding-block:22px}

/* ---- the switch on /how ---- */
.how-doors{margin-bottom:26px}

/* ---- /trust: what is not allowed ---- */
.nolist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:900px}
@media (max-width:700px){.nolist{grid-template-columns:1fr}}
.nolist li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:15.5px}
.nolist li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:#FBE7EA;box-shadow:inset 0 0 0 2px #D7263D;
  -webkit-mask:none}

/* ---- join band at the end of inner pages ---- */
.joinband .jb{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.joinband h2{font-size:clamp(24px,2.6vw,32px)}
.joinband p{margin:8px 0 0;color:var(--ink-soft);max-width:52ch}
.joinband .cta-row{margin-top:0}

/* ---- footer: the wordmark, large, bleeding off the bottom ---- */
.foot{overflow:hidden}
.foot .wm-big{display:block;width:100%;height:auto;margin:40px 0 -4.5%;color:#3D5CE8}
/* one accent per group of cards, not four */
.hufa-brand .whos .who,.hufa-brand .whos .who:nth-child(n){border-left-color:var(--mode)}

/* ---------- /join: form higher on the page, fewer example chips on phones (2026-10-04) ---------- */
.hufa-brand .pagehead.compact{padding-block:clamp(26px,3vw,38px) clamp(20px,2.4vw,28px)}
.hufa-brand .pagehead.compact h1{font-size:clamp(28px,3.4vw,42px)}
.hufa-brand .pagehead.compact p{margin-top:10px}
.band.join-band{padding-top:clamp(24px,3vw,36px)}
@media (max-width:600px){.examples .ex:nth-child(n+4){display:none}}

/* ============================================================
   Readability pass, 2026-10-04. Founder: "too light", "fonts too invisible".
   Text only: backgrounds stay light, no black blocks. Greys darkened,
   body one weight heavier, nothing under 14px except mono utility labels,
   form answers in the body face at 15px.
   ============================================================ */
body.hufa-brand{
  --ink-soft:#2E3545; --ink-faint:#4A5263;
  --line:#C9D0DC; --line-soft:#DDE2EA;
  --on-deep-soft:#F0F3FF; --on-deep-faint:#E3E8FF;
  font-weight:500;
}
body.hufa-brand p,body.hufa-brand li,body.hufa-brand dd{font-weight:500}
body.hufa-brand b,body.hufa-brand strong{font-weight:700}

/* small print up to 14px or more */
body.hufa-brand .hint,body.hufa-brand .next,body.hufa-brand .caption,
body.hufa-brand .strip .d,body.hufa-brand .ex,body.hufa-brand .brand i,
body.hufa-brand .panel-note,body.hufa-brand .three p,body.hufa-brand .steps p,
body.hufa-brand .check .d,body.hufa-brand .note{font-size:15px;line-height:1.5}
body.hufa-brand .strip .t{font-size:16px;font-weight:700}
body.hufa-brand .ex{color:var(--ink);font-weight:600;padding:8px 14px}

/* utility labels: still mono, but bigger, bolder, darker */
body.hufa-brand .eyebrow,body.hufa-brand .pagehead .eyebrow{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
body.hufa-brand .band.deep .eyebrow{color:var(--hufa-lime)}
body.hufa-brand .field label:not(.band-opt),body.hufa-brand .legend,body.hufa-brand .skill-group{
  font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.08em}
body.hufa-brand .jtop,body.hufa-brand .jmeta .lab,body.hufa-brand .jrow .lab,
body.hufa-brand .door .s,body.hufa-brand .foot h4,body.hufa-brand .fbase,body.hufa-brand .status{
  font-size:12px;font-weight:600;color:var(--ink-soft)}
body.hufa-brand .door .s{color:inherit}
body.hufa-brand .foot h4,body.hufa-brand .fbase{color:var(--on-deep-faint)}
body.hufa-brand .fbase a{color:inherit}
body.hufa-brand .foot a{color:#FFFFFF}

/* form answers: body face, 15px, dark */
body.hufa-brand .band-opt,body.hufa-brand .band-opt *{
  font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
body.hufa-brand .band-opt:has(input:checked),body.hufa-brand .band-opt:has(input:checked) *{color:var(--mode-on)}
body.hufa-brand .band-opt{border-color:var(--line);padding:9px 15px}

/* what people type, and the boxes they type in */
body.hufa-brand input,body.hufa-brand textarea{font-size:16.5px;font-weight:600;color:var(--ink);
  border-color:var(--line);background:#FFFFFF}
body.hufa-brand input::placeholder,body.hufa-brand textarea::placeholder{color:#6B7280;font-weight:500}
body.hufa-brand .tag,body.hufa-brand .pin small,body.hufa-brand .pill{font-size:12px;font-weight:600}

/* "Be there for me" examples on the /join Hufer form (2026-10-11). */
.be-there{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:10px}
.be-there li{position:relative;padding-left:20px;font-weight:600;color:var(--ink);line-height:1.45}
.be-there li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--mode)}

/* Rotating examples on /join, 2026-10-20 */
body.hufa-brand #r-need{min-height:112px}
.more-asks{margin-top:8px}
.more-asks a{color:var(--mode-deep,var(--hufa-cobalt));font-weight:600}
.job-rotator{margin:12px 0 6px;padding:14px 16px;border-radius:14px;background:var(--paper-2);
  border:1.5px solid var(--line,#E5E7EB);font-weight:600;color:var(--ink);line-height:1.45;min-height:4.4em;
  transition:opacity .3s ease}
.job-rotator::before{content:"\201C"}
.job-rotator::after{content:"\201D"}
.job-rotator.out{opacity:0}
@media (prefers-reduced-motion: reduce){.job-rotator{transition:none}}
@media (max-width:600px){body.hufa-brand #r-need{min-height:150px}.job-rotator{min-height:6em}}

/* ===================== v4 (2026-10-27): merged from v4-home, v4-jobs, v4-blog, v4-app ===================== */

/* ---- v4-home.css ---- */
/* ============================================================
   hufa.in v4, agent A: nav and footer additions, the hero phone,
   the ten tiles, and the motion system. Loaded after site.css on
   index, asks and hufer. The coordinator merges this into site.css.
   Palette: cobalt, lime, ink, cloud, white. No new tokens.
   ============================================================ */

/* ---------- nav: a ghost button next to the cobalt one ---------- */
.hufa-brand .nav a.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.hufa-brand .nav a.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
@media (max-width:940px){
  .hufa-brand .nav a.btn.ghost{margin-top:12px;text-align:center}
  .hufa-brand .nav a.btn.ghost + a.btn{margin-top:8px}
}
/* the shadow arrives after 8px of scroll (v4-home.js) */
.head{transition:box-shadow .2s ease}
.head.scrolled{box-shadow:0 6px 24px -14px rgba(14,18,32,.28)}

/* ---------- footer: five columns, Follow on the end ---------- */
.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr .9fr}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.fgrid{grid-template-columns:1fr}}

/* ---------- hero: text on the left, the app on the right ---------- */
.hero-grid{align-items:center}
.hero-right{position:relative;min-width:0}
/* the job card is the fallback: it shows under 720px and whenever a screen SVG
   is missing (v4-home.js adds .phone-broken to the column) */
.hero-right .phone{display:none}
@media (min-width:720px){
  .hero-right:not(.phone-broken) .phone{display:block}
  .hero-right:not(.phone-broken) .jcard,.hero-right:not(.phone-broken) .job{display:none}
}
.phone{width:min(272px,78vw);margin:0 auto}
.phone-shell{position:relative;aspect-ratio:390/844;border-radius:44px;
  background:var(--hufa-cloud);box-shadow:0 1px 2px rgba(14,18,32,.06),0 36px 64px -38px rgba(14,18,32,.45)}
.phone-screens{position:absolute;inset:var(--screen-inset,2.4%);border-radius:36px;overflow:hidden;background:#fff}
.phone-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s ease}
.phone-screens img.on{opacity:1}
.phone-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.phone-frame.missing{display:none}
.phone-cap{margin:16px auto 0;text-align:center;font-size:15px;color:var(--ink-soft);
  min-height:2.9em;max-width:30ch;transition:opacity .3s ease}
.phone-cap.out{opacity:0}
.phone-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.phone-dots span{width:6px;height:6px;border-radius:50%;background:var(--line)}
.phone-dots span.on{background:var(--mode)}

/* ---------- the tiles ---------- */
.tiles-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;
  margin-bottom:clamp(22px,3vw,34px)}
.tiles-head p{margin:10px 0 0;max-width:52ch;color:var(--ink-soft)}
.tiles-mode{font-family:var(--f-mono,monospace);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-soft);padding:8px 12px;border-radius:999px;background:var(--paper-2)}
.tiles-mode .tm-h{display:none}
:root[data-mode="helper"] .tiles-mode .tm-r{display:none}
:root[data-mode="helper"] .tiles-mode .tm-h{display:inline}
:root[data-mode="helper"] .tiles-mode{background:var(--hufa-lime-tint);color:var(--hufa-lime-ink)}

.tiles{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media (max-width:420px){.tiles{grid-template-columns:1fr;gap:14px}}
.tile{min-width:0}
.tile-a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(14,18,32,.04)}
.tile-art{aspect-ratio:320/220;background:var(--hufa-cloud);display:block;position:relative;overflow:hidden}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.tile-art.missing{aspect-ratio:auto;height:10px;background:var(--hufa-cobalt)}
:root[data-mode="helper"] .tile-art.missing{background:var(--hufa-lime)}
.tile-ask{margin:0;padding:16px 18px 14px;font-family:var(--f-body);font-style:italic;font-weight:500;
  font-size:16.5px;line-height:1.42;color:var(--ink);flex:1 0 auto;overflow-wrap:anywhere}
.tile-foot{display:block;padding:0 18px 16px}
/* requester view: the short line, with the status rising in on hover */
.tile-req{display:block}
.tile-short{display:block;font-weight:700;font-size:15px;line-height:1.35;letter-spacing:-.005em}
.tile-status{display:block;font-family:var(--f-mono,monospace);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--hufa-cobalt);margin-top:6px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .28s ease,opacity .28s ease}
.tile-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--hufa-lime);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--hufa-cobalt);margin-right:9px;vertical-align:1px}
.tile:hover .tile-status,.tile-a:focus-visible .tile-status{max-height:2.2em;opacity:1}
@media (hover:none){.tile-status{max-height:2.2em;opacity:1}}
/* Hufer view: the job card row */
.tile-hufer{display:none;align-items:center;gap:8px 14px;flex-wrap:wrap}
.tile-price{font-family:var(--f-mono,monospace);font-weight:600;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.tile-where{font-size:14px;font-weight:600;color:var(--ink-soft);flex:1 1 auto;min-width:0}
.tile-accept{font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;
  background:var(--hufa-lime);color:var(--hufa-ink);white-space:nowrap}
.tile:hover .tile-accept{background:var(--hufa-lime-deep)}
:root[data-mode="helper"] .tile-req{display:none}
:root[data-mode="helper"] .tile-hufer{display:flex}
:root[data-mode="helper"] .tile-status{color:var(--hufa-lime-ink)}

/* the eleventh tile: a text box */
.tile-write{display:flex;flex-direction:column;height:100%;background:var(--hufa-cobalt);color:#fff;
  border-radius:18px;padding:18px;gap:12px;border:1px solid var(--hufa-cobalt)}
.tile-write h3{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.1;margin:0;color:#fff}
.tile-write p{margin:0;font-size:15px;color:var(--on-deep-soft)}
.tile-write textarea{flex:1 1 auto;min-height:96px;border-radius:12px;border:1px solid transparent;
  background:#fff;color:var(--ink);padding:12px 13px;font:italic 500 16.5px/1.42 var(--f-body);resize:vertical;width:100%}
body.hufa-brand .tile-write textarea{font-weight:500;color:var(--ink);background:#fff;border-color:transparent}
.tile-write textarea::placeholder{color:#6B7280;font-style:italic}
.tile-write .btn{align-self:flex-start;background:var(--hufa-lime);color:var(--hufa-ink);margin-top:auto}
.tile-write .btn:hover{background:var(--hufa-lime-deep)}
.tile-write a:focus-visible,.tile-write button:focus-visible,.tile-write textarea:focus-visible{
  outline:3px solid var(--hufa-lime);outline-offset:2px;box-shadow:none}
:root[data-mode="helper"] .tile-write{background:#fff;color:var(--ink);border-color:var(--line)}
:root[data-mode="helper"] .tile-write h3{color:var(--ink)}
:root[data-mode="helper"] .tile-write p{color:var(--ink-soft)}
:root[data-mode="helper"] .tile-write textarea{display:none}
:root[data-mode="helper"] .tile-write .tw-req{display:none}
.tile-write .tw-hufer{display:none}
:root[data-mode="helper"] .tile-write .tw-hufer{display:block}
:root[data-mode="helper"] .tile-write .btn{background:var(--hufa-cobalt);color:#fff}
:root[data-mode="helper"] .tile-write .btn:hover{background:var(--hufa-cobalt-deep)}
.tiles-after{margin-top:clamp(22px,3vw,30px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tiles-after p{margin:0;color:var(--ink-soft);font-size:15px}

/* /asks: the switch under the page head */
.pagehead .doors{margin:22px 0 0}

/* /asks: the private ticket sits under the tiles, the same width as one tile */
.np-group.v4-private{margin-top:clamp(28px,3.4vw,40px)}

/* ---------- motion system (shared: others may copy these class names) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* html.js is set by v4-home.js, so without the script nothing is ever hidden */
  html.js .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.25,1);
    transition-delay:calc(var(--i,0) * 70ms)}
  html.js .reveal.in{opacity:1;transform:none}
  .lift{transition:transform .22s cubic-bezier(.22,.7,.25,1),box-shadow .22s ease}
  .lift:hover,.lift:focus-within{transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(14,18,32,.04),0 22px 40px -22px rgba(14,18,32,.36)}
  .tile .tile-a{transition:transform .22s cubic-bezier(.22,.7,.25,1),box-shadow .22s ease,border-color .22s ease}
  .tile:hover .tile-a,.tile .tile-a:focus-visible{transform:translateY(-4px);border-color:var(--ink-faint);
    box-shadow:0 1px 2px rgba(14,18,32,.04),0 22px 40px -22px rgba(14,18,32,.36)}
}

/* visually hidden label */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- v4-jobs.css ---- */
/* v4 job pages (/jobs/<slug>) and /areas. Agent B, 2026-10-27.
   Loaded after site.css. Classes prefixed jp- (jobs) and ar- (areas).
   Palette and type come from the .hufa-brand tokens in site.css. */

/* ---- nav: a second button next to Get started ---- */
.hufa-brand .nav a.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hufa-brand .nav a.btn.ghost:hover{background:var(--paper-2)}
@media (max-width:940px){.hufa-brand .nav a.btn.ghost{margin-top:12px;text-align:center}
  .hufa-brand .nav a.btn.ghost + .btn{margin-top:8px}}

/* ---- job page: the ask, with art ---- */
.jp-ask-band{padding-block:clamp(28px,3.6vw,48px)}
.jp-ask{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(20px,3.2vw,40px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.6vw,28px);
  box-shadow:0 1px 2px rgba(14,18,32,.04),0 28px 56px -34px rgba(14,18,32,.3)}
.jp-art{display:block;width:100%;height:auto;aspect-ratio:320/220;border-radius:12px;background:var(--paper-2)}
.jp-ask-text{min-width:0}
.jp-lab{margin:0 0 10px;font:600 12px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hufa-brand .jp-said{margin:0;max-width:none;background:var(--hufa-cobalt-tint);border-left:3px solid var(--hufa-cobalt);
  border-radius:0 12px 12px 0;padding:16px 18px;color:var(--ink);font-size:clamp(18px,1.7vw,22px);line-height:1.4}
@media (max-width:720px){.jp-ask{grid-template-columns:1fr}.jp-art{max-width:320px}}

/* ---- what the Hufer does / what you get ---- */
.jp-two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:820px){.jp-two{grid-template-columns:1fr;gap:36px}}
.jp-two h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.jp-does{list-style:none;margin:0;padding:0;counter-reset:d;display:grid;gap:0}
.jp-does li{counter-increment:d;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.5}
.jp-does li:last-child{border-bottom:1px solid var(--line)}
.jp-does li::before{content:counter(d);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:50%;
  background:var(--hufa-cobalt);color:#fff;font:600 13px/28px var(--f-mono,monospace);text-align:center}
.jp-get{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jp-get li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.5}
.jp-get li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;background:var(--hufa-lime);
  box-shadow:inset 0 0 0 1.5px var(--hufa-lime-deep)}
.jp-price{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px}
.jp-price .jp-lab{margin-bottom:6px}
.jp-rs{margin:0;font:600 clamp(32px,4vw,44px)/1.1 var(--f-mono,monospace);color:var(--hufa-cobalt);letter-spacing:-.02em}
.jp-note{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* ---- who takes jobs like this ---- */
.jp-who{margin:clamp(28px,3.4vw,40px) 0 0;padding:16px 20px;border-radius:14px;background:var(--hufa-lime-tint);
  border:1px solid var(--hufa-lime-deep);font-size:17px;color:var(--ink);display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.jp-who span{font:600 12px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--hufa-lime-ink)}

/* ---- previous / next ---- */
.jp-nav{background:var(--paper);border-top:1px solid var(--line);padding-block:22px 26px}
.jp-nav .shell{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.jp-nav a{text-decoration:none;color:var(--ink);font-weight:600;line-height:1.35}
.jp-nav a span{display:block;font:600 11.5px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.jp-nav a:hover{color:var(--hufa-cobalt)}
.jp-next{text-align:right}
.jp-all{font:600 12px var(--f-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--hufa-cobalt);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;white-space:nowrap}
.jp-all:hover{background:var(--paper-2)}
@media (max-width:640px){.jp-nav .shell{grid-template-columns:1fr 1fr}.jp-all{grid-column:1/-1;justify-self:start;order:3}}

/* ---- areas: the map with pins ---- */
.ar-map-band{padding-block:clamp(24px,3vw,40px)}
.ar-map{margin:0;position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(10px,2vw,20px);overflow:hidden}
.ar-map img{display:block;width:100%;height:auto;aspect-ratio:4/3}
.ar-pins{list-style:none;margin:0;padding:0;position:absolute;inset:clamp(10px,2vw,20px);pointer-events:none}
.ar-pins li{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--hufa-cobalt);
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--hufa-cobalt)}
.ar-pins li span{position:absolute;left:16px;top:-4px;white-space:nowrap;font:600 11px var(--f-mono,monospace);
  letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.88);padding:2px 6px;border-radius:6px}
@media (max-width:640px){.ar-pins li span{display:none}.ar-pins li{width:10px;height:10px;margin:-5px 0 0 -5px}}
.ar-map figcaption{margin:12px 4px 2px;font:600 12px var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- areas: tiles ---- */
.ar-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.ar-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.ar-tiles{grid-template-columns:repeat(2,1fr)}}
.ar-tiles a{display:flex;align-items:center;gap:10px;min-height:58px;padding:12px 16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:16px;line-height:1.3;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.ar-tiles a::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--hufa-cobalt)}
.ar-tiles a:hover{border-color:var(--hufa-cobalt);color:var(--hufa-cobalt)}
@media (prefers-reduced-motion:no-preference){
  .ar-tiles a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(14,18,32,.35)}}

/* ---- areas: how an area matters ---- */
.ar-how{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:820px){.ar-how{grid-template-columns:1fr;gap:24px}}
.ar-how h2{font-size:clamp(24px,2.6vw,32px)}
.ar-how p{margin:14px 0 0;max-width:56ch;color:var(--ink-soft)}
.ar-how .jp-get{padding-top:6px}

/* ---- v4-blog.css ---- */
/* ============================================================
   hufa.in v4, agent E: the blog. /blog and /blog/<slug>.
   Loaded after site.css on those pages only. Every colour is a site
   token; nothing new. The pages are for reading, so the one choice
   made here is the measure: 64ch of Nunito Sans at 18px, the first
   paragraph a step larger, headings in Bricolage like the rest of
   the site. The nav on these pages carries the ghost "Get the app"
   button next to "Get started", so the two buttons get a gap.
   ============================================================ */

/* ---- nav: two buttons side by side ---- */
.hufa-brand .nav a.btn.ghost{color:var(--ink);background:transparent;border-color:var(--line);padding-bottom:13px}
.hufa-brand .nav a.btn.ghost:hover{background:var(--paper-2)}
.hufa-brand .nav a.btn + a.btn{margin-left:-14px}
@media (max-width:940px){.hufa-brand .nav a.btn + a.btn{margin-left:0;margin-top:8px}}

/* ---- the listing ---- */
.bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:700px){.bgrid{grid-template-columns:1fr}}
.bcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  transition:transform .18s ease,box-shadow .18s ease}
.bcard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:4px;
  background:var(--hufa-cobalt);border-radius:0 0 4px 4px}
.bcard:nth-child(even)::before{background:var(--hufa-lime)}
.bcard time{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.bcard h2{font-size:clamp(24px,2.4vw,30px);line-height:1.08;letter-spacing:-.025em;margin:2px 0 0}
.bcard h2 a{color:var(--ink);text-decoration:none}
.bcard h2 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.bcard p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.55;flex:1}
.bread{font-weight:700;font-size:15px;color:var(--hufa-cobalt);
  text-decoration:underline;text-decoration-color:var(--hufa-lime);text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .bcard:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(14,18,32,.04),0 28px 56px -34px rgba(14,18,32,.38)}
}
.bcard:has(a:focus-visible){outline:3px solid var(--hufa-lime);outline-offset:2px;box-shadow:0 0 0 5px var(--hufa-cobalt)}

/* ---- a post ---- */
.post-shell{max-width:760px}
.post .pagehead .eyebrow a{color:inherit;text-decoration:none}
.post .pagehead .eyebrow a:hover{color:var(--hufa-cobalt);text-decoration:underline;text-underline-offset:3px}
.post .pagehead h1{max-width:18ch}
.post .pagehead .post-byline{margin:18px 0 0;font-size:15px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.post-byline b{color:var(--ink)}
.post-byline time{font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.post-band{padding-top:clamp(36px,4.4vw,56px)}
.post-body{max-width:64ch;font-size:18px;line-height:1.65}
.post-body p{margin:0 0 1.15em}
.post-body > p:first-child{font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink);
  padding-left:18px;border-left:4px solid var(--hufa-lime)}
.post-body p:last-child{margin-bottom:0}
.post-jobs{list-style:none;counter-reset:j;margin:4px 0 1.4em;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.post-jobs li{counter-increment:j;display:flex;gap:16px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--line);font-family:var(--f-body);font-style:italic;font-weight:500;line-height:1.4}
.post-jobs li::before{content:counter(j,decimal-leading-zero);font-family:var(--f-mono);font-style:normal;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--hufa-cobalt);flex:none;min-width:2ch}
.post-jobs li:nth-child(even)::before{color:var(--hufa-lime-ink)}
@media (max-width:600px){.post-body{font-size:17px}.post-body > p:first-child{padding-left:14px}}

/* ---- more from the blog ---- */
.post-more h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:18px}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.post-list li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.post-list a{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--ink);
  text-decoration:none;font-variation-settings:"opsz" 96}
.post-list a:hover{color:var(--hufa-cobalt);text-decoration:underline;text-decoration-color:var(--hufa-lime);
  text-decoration-thickness:2px;text-underline-offset:4px}
.post-list span{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}

/* ---- v4-app.css ---- */
/* hufa.in v4, agent C: /app page, and the nav and footer additions that site.css
   lacks. Linked after site.css. The coordinator merges this into site.css. */

/* ---------- nav: eight items now, so the burger kicks in earlier and the
   ghost button keeps ink text (site.css paints every .nav a.btn white) ---------- */
.nav{gap:20px}
.nav a.btn{padding:10px 16px;font-size:14.5px}
.nav a.btn.ghost{color:var(--ink);background:transparent;border-color:var(--line)}
.nav a.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}
.nav a.btn.ghost.on{border-bottom:1px solid var(--line);border-color:var(--hufa-cobalt);color:var(--hufa-cobalt)}
.nav a.btn + a.btn{margin-left:-8px}
@media (max-width:1060px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px 24px 18px}
  .nav.open{display:flex}
  .nav a{padding-block:11px;border-bottom:1px solid var(--line-soft)}
  .nav a.on{border-bottom:1px solid var(--mode)}
  .nav a.btn{margin-top:12px;text-align:center;padding-bottom:13px;padding-top:13px}
  .nav a.btn + a.btn{margin-left:0;margin-top:10px}
  .nav a.btn.ghost.on{border-bottom:1px solid var(--hufa-cobalt)}
  .burger{display:block}
}
@media (max-width:560px){.nav{padding-inline:18px}}

/* ---------- footer: five columns, Follow is new ---------- */
.fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px 24px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid > div:first-child{grid-column:1 / -1}}
@media (max-width:460px){.fgrid{grid-template-columns:1fr}}
.foot .fsocial a{display:inline-flex;align-items:center;gap:9px}
.foot .fsocial svg{width:16px;height:16px;flex:none;opacity:.85}

/* ---------- /app ---------- */
.app-hero{background:
    radial-gradient(700px 340px at 92% -24%, color-mix(in srgb, var(--hi) 14%, transparent), transparent 64%),
    var(--paper);
  border-bottom:1px solid var(--line);
  padding-block:clamp(34px,4.2vw,56px) clamp(36px,4.6vw,64px)}
.app-hero .shell{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.app-hero h1{font-size:clamp(32px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;font-weight:750;margin:0}
.app-hero .lede{margin:16px 0 0;color:var(--ink-soft);max-width:48ch;font-size:17px}
.app-hero .cta-row{margin-top:26px}
.store-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.store-row .btn{display:inline-flex;align-items:center;gap:9px}
.store-row .btn svg{width:16px;height:16px;flex:none}
.store-note{margin:12px 0 0;font-size:14px;color:var(--ink-faint);max-width:44ch}
@media (min-width:760px){
  .app-hero .shell{grid-template-columns:1.1fr .9fr;gap:40px}
}

/* the phone: a CSS body with the screen SVG inside, and phone-frame.svg laid
   over the top. --bezel is the gap between the frame's outer edge and the
   screen; adjust it once against art/phone-frame.svg. */
.app-hero .phone{--bezel:4.2%;position:relative;width:min(300px,78vw);margin:0 auto;
  aspect-ratio:390 / 844;border-radius:12.5% / 5.8%;background:var(--hufa-ink);
  box-shadow:0 28px 60px -24px rgba(14,18,32,.45),0 2px 0 rgba(255,255,255,.4) inset}
.app-hero .phone .screen{position:absolute;inset:var(--bezel);border-radius:10% / 4.6%;overflow:hidden;background:#fff}
.app-hero .phone .screen img{display:block;width:100%;height:100%;object-fit:cover}
.app-hero .phone .frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.app-hero .phone .screen img[data-side]{display:none}
html:not([data-mode="helper"]) .phone .screen img[data-side="requester"]{display:block}
html[data-mode="helper"] .phone .screen img[data-side="helper"]{display:block}

/* the flow: four screens, one line each */
.flow{list-style:none;margin:0;padding:0;counter-reset:f;
  display:grid;grid-template-columns:1fr;gap:28px 20px}
@media (min-width:620px){.flow{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow li{counter-increment:f;display:grid;grid-template-columns:1fr;gap:14px}
.flow .shot{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 0;overflow:hidden;aspect-ratio:4 / 5}
.flow .shot img{display:block;width:100%;height:auto;border-radius:14px 14px 0 0;
  box-shadow:0 10px 30px -14px rgba(14,18,32,.35)}
.flow .shot img[data-side]{display:none}
html:not([data-mode="helper"]) .flow .shot img[data-side="requester"]{display:block}
html[data-mode="helper"] .flow .shot img[data-side="helper"]{display:block}
.flow .shot::before{content:counter(f);position:absolute;top:10px;left:10px;z-index:1;
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--f-mono);font-size:12px;font-weight:600;background:var(--hufa-cobalt);color:#fff}
html[data-mode="helper"] .flow .shot::before{background:var(--hufa-lime);color:var(--hufa-ink)}
.flow b{display:block;font-size:17px;line-height:1.3;margin-bottom:4px}
.flow p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.flow .line{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.flow [data-side]{display:none}
html:not([data-mode="helper"]) .flow [data-side="requester"]{display:block}
html[data-mode="helper"] .flow [data-side="helper"]{display:block}

/* what the app does for each side */
.sides{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:760px){.sides{grid-template-columns:1fr 1fr}}
.sides .side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px;
  border-top:6px solid var(--hufa-cobalt)}
.sides .side.hufer{border-top-color:var(--hufa-lime)}
html[data-mode="helper"] .sides .side.hufer{order:-1}
.sides .side .eyebrow{margin-bottom:10px}
.sides .side h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 14px}
.sides .side ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sides .side li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5}
.sides .side li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:4px;background:var(--hufa-cobalt-tint)}
.sides .side li::after{content:"";position:absolute;left:4px;top:calc(.42em + 4px);width:6px;height:6px;border-radius:2px;background:var(--hufa-cobalt)}
.sides .side.hufer li::before{background:var(--hufa-lime-tint)}
.sides .side.hufer li::after{background:var(--hufa-lime-ink)}

/* get the app band */
.getapp .jb{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.getapp h2{font-size:clamp(24px,2.6vw,32px);margin:0}
.getapp p{margin:8px 0 0;color:var(--on-deep-soft);max-width:52ch}
.getapp .store-row{margin-top:0}
.band.deep .store-row .btn{background:#fff;color:var(--hufa-cobalt);border-color:#fff}
.band.deep .store-row .btn:hover{background:var(--hufa-lime);color:var(--hufa-ink);border-color:var(--hufa-lime)}
.getapp .store-note{color:var(--on-deep-faint)}

/* ---- store badges (2026-10-27): cobalt on the page, white on cobalt surfaces ---- */
.store-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.store{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:10px;
  background:var(--hufa-cobalt,#1B3FE0);color:#fff;text-decoration:none;line-height:1.05;min-height:46px;
  border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease}
.store svg{width:22px;height:22px;flex:none}
.store span{display:flex;flex-direction:column;gap:2px}
.store small{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.85;font-family:"Nunito Sans",system-ui,sans-serif}
.store b{font-size:16px;font-weight:700;font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.01em}
.store:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(27,63,224,.22);color:#fff}
.band.deep .store,.foot .store,.getapp .store{background:#fff;color:var(--ink,#0E1220);border-color:rgba(255,255,255,.5)}
.band.deep .store:hover,.foot .store:hover,.getapp .store:hover{color:var(--ink,#0E1220);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.foot .store-row{margin:16px 0 22px}
.hero .store-row{margin-top:14px}
.foot a.store,.foot a.store:hover,.band.deep a.store,.band.deep a.store:hover{color:var(--ink,#0E1220)}
.foot a.store small,.foot a.store b,.band.deep a.store small,.band.deep a.store b{color:var(--ink,#0E1220)}
.foot .store-row{flex-wrap:wrap}
.foot a.store svg,.band.deep a.store svg{color:var(--ink,#0E1220);fill:currentColor;opacity:1;width:22px;height:22px}

/* ---- 2026-10-27 late: smaller tiles, a clear phone (founder: tiles too big, phone hidden) ---- */
.tiles{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
@media (min-width:1180px){.tiles{grid-template-columns:repeat(5,1fr)}}
@media (min-width:860px) and (max-width:1179px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile-ask{padding:12px 14px 10px;font-size:14px;line-height:1.45}
.tile-short{font-size:13.5px}
.phone-shell{background:transparent;border-radius:0;box-shadow:none}
.phone-screens{inset:2.26% 4.65%;border-radius:9% / 4.2%}
.phone-frame{filter:drop-shadow(0 30px 40px rgba(14,18,32,.28))}
.phone{width:min(260px,78vw)}
:root[data-mode="helper"] .tile-hufer{display:grid;grid-template-columns:1fr;gap:6px;justify-items:start}

/* ---- 2026-10-27 late: the phone view (founder: mobile is messed up) ---- */
@media (max-width:719px){
  /* show the phone on phones too; the job card only when a screen is missing */
  .hero-right:not(.phone-broken) .phone{display:block;width:min(240px,70vw);margin:4px auto 0}
  .hero-right:not(.phone-broken) .jcard,.hero-right:not(.phone-broken) .job{display:none}
  .hero-grid{gap:28px}
  .hero h1{font-size:clamp(34px,10.5vw,44px)}
  .hero .store-row{margin-top:10px}
  .doors{grid-template-columns:1fr 1fr}
  .hufa-brand .doors::before{width:calc(50% - 6px);height:calc(100% - 12px)}
  :root[data-mode="helper"] .hufa-brand .doors::before{transform:translateX(100%)}
  .door .k{font-size:15px}
  .door .s{font-size:10px}
  /* tiles: two across, compact */
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile-ask{padding:10px 11px 8px;font-size:12.5px;line-height:1.4}
  .tile-short{font-size:12px}
  .tile-foot{padding:0 11px 11px}
  .tile-price{font-size:17px}
  .tiles-head{margin-bottom:16px}
}
@media (hover:none){.tile-status{display:none!important}}
@media (max-width:719px){
  .tile-ask{display:none}
  .tile-short{font-size:13.5px;line-height:1.3}
  .tile-foot{padding:12px 12px 12px}
  .tile-status{display:none!important}
}
/* the frame SVG is 430x884 with the screen at 20,20 390x844: match that exactly, no cropping */
.phone-shell{aspect-ratio:430/884}
.phone-screens{inset:2.262% 4.651%;border-radius:8% / 3.9%}
.phone-screens img{object-fit:fill}
.phone-frame{filter:drop-shadow(0 18px 28px rgba(14,18,32,.22))}
@media (max-width:719px){.hero{padding-bottom:28px}.hero-right{min-height:0}.phone-cap{margin-top:12px}}