/* site/css/bp.css * * THE HOUSE STYLE OF burropay, every page reads this one file. * * Tyler, 2026-10-04: "Red, brown and white, with the whitish colour. Mostly * white, with cream accents. Very clean and professional. No teal." and "a * Silicon Valley feel". So the page is white, cream is the only second ground, * the burro red is spent on the one thing that should be pressed, and brown * does the work black would do anywhere else: the type, the footer, the dark * panels. The brown and the red are the brick and the awnings of the building * at 555 Clinton St, which is where they came from. * * The palette lives here and in two other places that must move with it: * scripts/logo.py (RED, BROWN, CREAM as RGB) and scripts/og/render.html (the * share cards). Change a value here, change it there in the same sitting. * * Type is Plus Jakarta Sans, one face for everything. Tyler, 2026-10-04: * "cleaner font, the dollar signs and the numbers look weird, more rounded * and super clean". It replaced Instrument Sans and Geist Mono the same day. * --mono survives as a name only and points at the same face, so labels and * amounts keep their own token if a second face ever returns. Amounts carry * tabular figures (.num) so a column of money lines up. Real code, the few * 
 and  blocks on the desk and the brand kit, reads --code. The
 * name is always lowercase, one word, burropay.
 *
 * There is deliberately no dark mode. The brand is a white page.
 *
 * OUTLINED, NOT SLABBED. Tyler, 2026-10-04, after the first look: "more
 * outlined instead of the solid red, more professional, detailed and clean,
 * I don't like the brown balance, the red needs to go a little darker". So
 * panels are white or cream with a hairline, devices are light frames with a
 * fine edge, and solid brown is kept for the foot alone. Solid red stays on
 * the one button that matters. The red moved from #2C4F3F to #1F3A2E.
 *
 * THE LOGO is the owner's own burro head, made into clean PNGs by
 * scripts/logo.py from brand/source/burro-logo-original.png, and it stands
 * bare beside the name with no square around it. An awning cutout and then a
 * red b monogram stood in for a few hours on 2026-10-04 and were both retired
 * the same day. Use the burro, never a letter.
 *
 * No oxford commas, no em dashes.
 */

:root{
  --white:#FFFFFF;
  --cream:#F5F1E6;      /* the accent ground, panels and bands */
  --cream-2:#ECE5D4;    /* a cream one step deeper, for a panel on a panel */
  --line:#E5DFD0;       /* hairlines on white */
  --line-2:#D7CFBC;
  --brown:#15211B;      /* the type and the dark panels. never pure black */
  --brown-2:#2C3A32;
  --brick:#8A5A36;      /* the brick of the building, a quiet second accent */
  --red:#1F3A2E;        /* the awning in shade. spent on the button that matters */
  --red-deep:#142A20;
  --red-wash:#EAF2DA;
  --ink:#15211B;
  --ink-2:#4A5A51;
  --ink-3:#7E8982;
  --ok:#3C7A4E;         /* paid. the one green, only ever beside a number */

  /* burropack, 2026-10-30. The variable names above are the old site's and
     stay so 64 pages keep working: --red is now PINE, the deep trail green
     where John's awning red was, --brown is pine black, --cream is pack
     canvas, --brick is saddle leather. LIME is new and is neonburro's thread:
     the one button that matters, money going up, the glow behind the hero. */
  --pine:var(--red);
  --canvas:var(--cream);
  --saddle:var(--brick);
  --lime:#C0EB46;
  --lime-2:#D4F27A;     /* lime hover */
  --lime-ink:#4F6B0E;   /* lime as type on a light ground, where lime itself would vanish */
  --glow:rgba(192,235,70,.22);

  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:var(--sans);
  --code:ui-monospace,SFMono-Regular,Menlo,monospace;

  --rail:20px;
  --wrap:1200px;
  --r:18px;
  --r-lg:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(21,33,27,.05),0 12px 32px -14px rgba(21,33,27,.18);
  --shadow-lg:0 2px 4px rgba(21,33,27,.04),0 30px 70px -28px rgba(21,33,27,.32);
}
@media (min-width:760px){:root{--rail:40px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance;color:var(--brown)}
pre,code{font-family:var(--code)}
p{margin:0}
/* an anchor lands below the sticky 68px nav with a little air, whether the
   browser glides to it from a link or shell.js lands on it at load */
section[id],details[id],form[id],h2[id],h3[id],[data-anchor]{scroll-margin-top:84px}

/* THE SHEET. Tyler, 2026-10-04: "Everything's really wide, the navigation
   is wide, like 99, 99.2 percent." So every band is 99.2 percent of the
   screen with a small gutter, on a phone, an iPad and a desktop alike, and
   reading text keeps its own measure (.lede, .sec__head) inside it. */
.wrap{width:99.2%;max-width:none;margin:0 auto;padding:0 clamp(12px,1.6vw,28px)}
.kick{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.kick.red{color:var(--red)}
/* the name is lowercase even inside an uppercase label */
.kick .nm{text-transform:none;letter-spacing:.02em;font-family:var(--sans);font-weight:600;font-size:1.18em}
.lede{font-size:clamp(18px,1.4vw + 12px,21px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.num{font-variant-numeric:tabular-nums}
/* the dollar sign sits a touch smaller and higher than the figures, the way a
   price is set on a menu board. Wrap it: $ */
.cur{font-size:.62em;vertical-align:.52em;margin-right:.04em;font-weight:600;letter-spacing:0}

/* the name. lowercase, one word, tight, and the pay half a shade warmer */
.wm{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--brown)}
.wm img{width:auto;height:32px;border-radius:0}
.wm__mark{width:32px;height:32px;flex:none;color:#0E1311}
.wm b{font-weight:700;font-size:21px;letter-spacing:-.05em;line-height:1}
.wm b i{font-style:normal;color:var(--lime-ink)}

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.nav.solid{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;height:68px}
.nav__links{display:none;gap:26px;margin-left:12px}
.nav__links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--brown)}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav__end .signin{display:none;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);padding:8px 10px}
.nav__end .signin:hover{color:var(--brown)}
.nav__menu{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav__menu span,.nav__menu span::before{position:absolute;left:13px;width:18px;height:1.6px;border-radius:2px;background:var(--brown);transition:transform .35s var(--ease),top .35s var(--ease)}
.nav__menu span{top:17px}
.nav__menu span::before{content:"";left:0;top:8px}
.nav__menu[aria-expanded="true"] span{top:21px;transform:rotate(45deg)}
.nav__menu[aria-expanded="true"] span::before{top:0;transform:rotate(-90deg)}

/* THE DRAWER. Tyler, 2026-10-04: "make the mobile drawer really nice". A
   full sheet under the bar, each door a big line with a plain sentence under
   it, the two buttons that matter at the foot, and the page behind it held
   still (shell.js sets .lock on ). It arrives with a short stagger and
   arrives instantly for anybody who asked for less motion. */
.drawer{position:fixed;inset:68px 0 0 0;z-index:39;background:var(--white);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;padding:8px var(--rail) calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.drawer__links{display:grid}
.drawer__links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 2px;text-decoration:none;border-bottom:1px solid var(--line);animation:rise .6s var(--ease) both}
.drawer__links a b{display:block;font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.1;color:var(--brown)}
.drawer__links a small{display:block;margin-top:4px;font-size:14px;color:var(--ink-3)}
.drawer__links a i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font-style:normal;color:var(--brown);transition:background .2s ease,color .2s ease}
.drawer__links a[aria-current="page"] b{color:var(--red)}
.drawer__links a:active i,.drawer__links a:hover i{background:var(--brown);color:var(--white)}
.drawer__links a:nth-child(2){animation-delay:.04s}.drawer__links a:nth-child(3){animation-delay:.08s}.drawer__links a:nth-child(4){animation-delay:.12s}.drawer__links a:nth-child(5){animation-delay:.16s}.drawer__links a:nth-child(6){animation-delay:.2s}
.drawer__end{margin-top:auto;padding-top:28px;display:grid;gap:10px;animation:rise .6s .24s var(--ease) both}
.drawer__end .btn{width:100%;min-height:54px;font-size:16px}
.drawer__end p{margin-top:8px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3)}
.drawer__end p a{text-decoration:none;color:var(--ink-2)}
html.lock{overflow:hidden}
@media (min-width:900px){.nav__links{display:flex}.nav__end .signin{display:inline-block}.nav__menu{display:none}.drawer{display:none!important}}

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:0;
  background:var(--brown);color:var(--white);font-weight:600;font-size:15.5px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background .2s ease,transform .3s var(--ease),box-shadow .2s ease;white-space:nowrap}
.btn:hover{background:var(--brown-2)}
.btn:active{transform:translateY(1px)}
/* the button that matters is lime with pine type, the neonburro spark */
.btn.red{background:var(--lime);color:var(--pine);box-shadow:0 0 0 1px rgba(21,33,27,.06),0 10px 28px -12px rgba(140,190,20,.55)}
.btn.red:hover{background:var(--lime-2)}
.btn.ghost{background:var(--white);color:var(--brown);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brown)}
.btn.cream{background:var(--cream);color:var(--brown);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.cream:hover{background:var(--cream-2)}
.btn.sm{min-height:40px;padding:0 16px;font-size:14.5px}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn:disabled{opacity:.55;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* the store buttons, type only, no store logos borrowed */
.store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;border-radius:14px;background:var(--brown);color:var(--white);text-decoration:none}
.store small{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;line-height:1.1}
.store b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.store:hover{background:var(--brown-2)}

/* ── SECTIONS ─────────────────────────────────────────────────────────── */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec.cream{background:var(--cream)}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.sec__head{display:grid;gap:14px;max-width:760px}
.sec__head h2{font-size:clamp(34px,4.2vw + 10px,60px)}
.sec__head .lede{margin-top:4px}
.center{text-align:center;margin-left:auto;margin-right:auto;justify-items:center}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,104px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 82% 30%,rgba(44,79,63,.07),transparent 70%),
  radial-gradient(50% 60% at 10% 90%,rgba(138,90,54,.06),transparent 70%),
  linear-gradient(180deg,var(--white) 0%,var(--cream) 100%)}
.hero__grid{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:980px){.hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hero h1{font-size:clamp(46px,6.2vw + 12px,128px);letter-spacing:-.05em;line-height:.94}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{margin-top:22px}
.hero .btns{margin-top:30px}
.hero__note{margin-top:18px;font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px}
.hero__note span{display:inline-flex;align-items:center}
.hero__note span:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);margin-left:14px}

/* ── CARDS ────────────────────────────────────────────────────────────── */
.grid{display:grid;gap:14px}
@media (min-width:760px){.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:760px) and (max-width:1079px){.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--white);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,32px);box-shadow:inset 0 0 0 1px var(--line);min-width:0;display:flex;flex-direction:column;gap:12px}
.card.cream{background:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.card.brown{background:var(--brown);color:var(--cream);box-shadow:none}
.card.brown h3{color:var(--white)}
.card.brown p{color:rgba(250,245,237,.78)}
.card h3{font-size:clamp(23px,1.2vw + 16px,30px)}
.card p{color:var(--ink-2);font-size:16px}
.card .kick{margin-bottom:2px}
.card a.more{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;text-decoration:none;color:var(--red)}
.card a.more:hover{text-decoration:underline;text-underline-offset:3px}
/* no grid paper and no frame since 2026-10-04 evening. Tyler: "graphics
   with the grid background look like a demonstration, they don't need to
   be in containers, make everything clean like an app". The drawing sits on
   a soft warm glow, the object carries its own shadow */
.card__show{margin:4px 0 6px;border-radius:20px;padding:18px;min-height:210px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 55%,rgba(31,58,46,.05),transparent 72%)}
.card.cream .card__show{background:radial-gradient(70% 70% at 50% 55%,rgba(255,255,255,.7),transparent 72%)}

/* ── THE PHONE ──────────────────────────────────────────────────────────
   Tyler, 2026-10-04: "they need to look like legitimate cell phones, like an
   iPhone". So it is drawn as one: a thin desert titanium band, a black bezel,
   the Dynamic Island, the side buttons, a status bar and the home bar. It is
   still HTML, so every number on the screen is real crisp text.

   The frame is pixels on purpose. Every screen inside it was designed near
   300 to 330 wide, and site/wallet/index.html scales its five phones with CSS
   zoom from a 300 wide design. Do not move the inside to cqw or em units
   without redoing that page too.

   The status bar is .status here. site/wallet/index.html draws its own as
   .sb. Both put the time at 9:41, which is the time on every phone in every
   picture Apple has ever made, and that is the joke nobody has to explain.

   Pseudo elements: .phone::before is the side button on the right,
   .phone::after the action button and the two volume keys on the left (one
   bar and two box shadow copies), .phone__screen::before is the island. */
.phone{position:relative;width:min(100%,330px);aspect-ratio:9/19.3;border-radius:58px;padding:3.5px;
  background:linear-gradient(145deg,#E3D3C2 0%,#B59C86 18%,#D9C7B4 34%,#A68B75 52%,#CDB8A3 70%,#9E846F 86%,#D6C4B0 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 0 2px rgba(80,56,40,.25),0 1px 2px rgba(21,33,27,.12),0 34px 70px -26px rgba(21,33,27,.42),0 12px 26px -12px rgba(21,33,27,.22)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#9E846F,#D9C7B4 60%,#A68B75)}
.phone::before{right:-2.5px;top:28%;height:13%}
.phone::after{left:-2.5px;top:16.5%;height:4.6%;box-shadow:0 52px 0 0 #B59C86,0 104px 0 0 #B59C86}
.phone__screen{position:relative;height:100%;border-radius:54.5px;overflow:hidden;background:var(--white);display:flex;flex-direction:column;border:8px solid #0E0B0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.phone__screen::before{content:"";position:absolute;top:9px;left:50%;width:94px;height:28px;margin-left:-47px;border-radius:20px;z-index:6;
  background:radial-gradient(circle at 76% 50%,#1D2A3A 0 3.2px,#0B0F15 3.6px 5.4px,transparent 5.8px),#000}
.phone__screen::after{content:"";position:absolute;left:50%;bottom:7px;width:118px;height:4.5px;margin-left:-59px;border-radius:3px;background:var(--brown);opacity:.88;z-index:6}
.status{position:absolute;top:12px;left:0;right:0;z-index:5;height:22px;padding:0 24px 0 30px;display:flex;align-items:center;justify-content:space-between;font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--brown);pointer-events:none;font-variant-numeric:tabular-nums}
.status i{display:flex;align-items:center;gap:5px;font-style:normal}
.status svg{display:block;height:11px;width:auto;fill:var(--brown)}
.app{display:flex;flex-direction:column;height:100%;padding:54px 16px 14px;gap:12px}
.app__top{display:flex;align-items:center;justify-content:space-between}
.app__top .who{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px}
.app__top .who img{width:auto;height:24px;border-radius:0}
.app__bal{position:relative;padding:16px 18px;border-radius:20px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--brown);overflow:hidden}
.app__bal small{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.app__bal b{display:block;font-size:34px;font-weight:700;letter-spacing:-.045em;margin-top:4px;font-variant-numeric:tabular-nums}
.app__acts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.app__acts span{display:grid;place-items:center;height:44px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:600;font-size:14px}
.app__acts span.go{background:var(--red);color:var(--white);box-shadow:none}
.app__list{display:grid;gap:2px}
.app__row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line)}
.app__row:last-child{border-bottom:0}
.app__row b{display:block;font-size:13.5px;font-weight:600;line-height:1.2}
.app__row small{display:block;font-size:11.5px;color:var(--ink-3)}
.app__row .amt{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.app__row .amt.in{color:var(--ok)}

/* ── PEOPLE. Initials in a soft tinted circle, four tints from the palette,
   picked by .t1 to .t4 so the same person keeps the same colour on every
   screen. Tyler, 2026-10-04: "just using the initials is okay". */
.av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;letter-spacing:.02em;background:var(--cream-2);color:var(--brick)}
.av.t1{background:#F9E3DF;color:#142A20}
.av.t2{background:#ECE5D4;color:#8A5A36}
.av.t3{background:#EADFD3;color:#2C3A32}
.av.t4{background:#FBEBDD;color:#9A4A22}
/* a shop in a circle is the burro chip, site/brand/logo/chip-burro.png, a
   round cream disc with the head already centred in it. The bare head PNG
   leans out of any circle it is put in, Tyler saw it on 2026-10-04. */
.av.shop,.av--burro{background:none;box-shadow:none;overflow:hidden}
.av.shop img,.av--burro img{width:100%;height:100%;max-width:none;border-radius:50%}

/* ── A RECEIPT, the little paper that floats beside a device ─────────── */
.receipt{width:min(100%,250px);background:var(--white);border-radius:18px;padding:16px 16px 14px;box-shadow:var(--shadow-lg);display:grid;gap:8px}
.receipt__top{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
.receipt__top .dot{width:20px;height:20px;border-radius:50%;background:var(--ok);display:grid;place-items:center}
.receipt__top .dot::after{content:"";width:7px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.receipt b{font-size:28px;letter-spacing:-.04em;font-weight:600}
.receipt small{font-size:12px;color:var(--ink-3)}

/* ── THE COUNTER, the shop terminal ───────────────────────────────────── */
.term{width:min(100%,420px);border-radius:32px;background:linear-gradient(160deg,#FFFFFF,#F6EFE5);padding:10px;box-shadow:inset 0 0 0 1.5px #D8C9B5,var(--shadow-lg)}
.term__screen{border-radius:24px;background:var(--white);padding:18px;display:grid;gap:12px;box-shadow:inset 0 0 0 1px var(--line)}
.term__amt{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1;text-align:center;padding:10px 0 2px}
.term__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.term__keys span,.term__keys button{display:grid;place-items:center;height:48px;border:0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-size:19px;font-weight:500;cursor:pointer;color:var(--brown);transition:background .15s ease,box-shadow .15s ease}
.term__keys button:hover{background:var(--cream);box-shadow:inset 0 0 0 1px var(--brown)}
.term__charge{height:52px;border:0;border-radius:14px;background:var(--red);color:#fff;font-weight:600;font-size:16px;cursor:pointer;width:100%}
.term__charge:hover{background:var(--red-deep)}

/* ── FORMS, clean and white, Tyler's rule for every form a person fills ─ */
.field{display:grid;gap:6px}
.field label{font-size:13.5px;font-weight:600;color:var(--brown)}
.input,.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--white);color:var(--brown);font-size:16px;caret-color:var(--red);transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:110px;resize:vertical}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:#A99A90}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brown);box-shadow:0 0 0 4px rgba(21,33,27,.07)}
.form{display:grid;gap:14px}
@media (min-width:640px){.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}}
.said{min-height:1.4em;font-size:14.5px;color:var(--ink-2)}
.said.bad{color:var(--red-deep)}
.inline{display:flex;gap:8px;padding:6px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow);max-width:480px}
.inline input{flex:1;min-width:0;border:0;background:none;padding:0 12px;font-size:16px;color:var(--brown)}
.inline input:focus{outline:0}

/* ── PILLS AND STATES ─────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-size:12.5px;font-weight:600;color:var(--brown);white-space:nowrap}
.pill.paid{background:#F1F7F2;box-shadow:inset 0 0 0 1px #CFE3D4;color:var(--ok)}
.pill.open{background:var(--red-wash);box-shadow:inset 0 0 0 1px #EFCFCB;color:var(--red-deep)}
.pill.demo{background:var(--cream);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--brick)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── THE BIG NUMBER ───────────────────────────────────────────────────── */
.big{font-size:clamp(96px,16vw,220px);font-weight:600;letter-spacing:-.07em;line-height:.86;color:var(--brown)}
.big em{font-style:normal;color:var(--red)}

/* ── LISTS ────────────────────────────────────────────────────────────── */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;color:var(--ink-2)}
.ticks li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;background:radial-gradient(circle,var(--red) 0 3px,var(--red-wash) 3.6px)}
.ticks li b{color:var(--brown);font-weight:600}

/* ── THE FOOT, brown, the one dark band on every page ─────────────────── */
/* THE FOOT, white since the last word on 4 October. Tyler: "more
   professional, show all the pages, no drop downs, an llms.txt and a sitemap
   at the bottom, the logo looks best on white, use your judgment". A hairline
   on top, the name set in type with the red on "pay" (the nav carries the
   burro, one logo per screen), the slogan, the store badges, every page in
   open columns, and one quiet last line. Markup is the foot block in
   site/js/shell.js. */
.foot{background:linear-gradient(180deg,rgba(255,255,255,0),var(--white) 260px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16.2v32.4L28 64.8 0 48.6V16.2zM28 64.8V97' fill='none' stroke='%230E1311' stroke-opacity='.06'/%3E%3C/svg%3E") top center/56px 97px repeat,var(--white);color:var(--ink-2);font-size:14.5px;border-top:1px solid var(--line);padding:clamp(48px,6vw,88px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
.foot a{text-decoration:none;color:var(--ink-2);transition:color .15s ease}
.foot a:hover,.foot a[aria-current="page"]{color:var(--brown)}
.foot__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--line)}
.foot__name{display:inline-block;font-weight:700;font-size:clamp(40px,3vw + 20px,64px);letter-spacing:-.06em;line-height:.9;color:var(--brown)!important}
.foot__name i{font-style:normal;color:var(--lime-ink)}
.foot__say{margin-top:10px;font-size:clamp(17px,.5vw + 14px,20px);font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.foot__get{display:grid;justify-items:end;gap:12px}
.foot__refer{font-size:14px;font-weight:600;color:var(--brown)!important}
.foot__refer:hover{color:var(--red)!important}
.foot__cols{display:grid;gap:32px 24px;grid-template-columns:repeat(2,minmax(0,1fr));padding:clamp(32px,4vw,52px) 0}
@media (min-width:760px){.foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.foot__cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.foot h4{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:-.01em;text-transform:none;color:var(--brown);margin:0 0 14px}
.foot h5{margin:18px 0 10px;font-size:12px;font-weight:700;color:var(--ink-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__end{display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.foot__legal{font-size:12px;line-height:1.6;color:var(--ink-3);max-width:110ch}
.foot__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:12.5px;color:var(--ink-3)}
.foot__tech{display:flex;gap:18px}
.foot__tech a{color:var(--ink-3)}
@media (max-width:759px){.foot__get{justify-items:start}.foot__head{align-items:flex-start}}

/* ── MOTION, a quiet rise for things that arrive, visible at rest ─────── */
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s var(--ease) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── FACE ID, the quiet sign of a protected step ─────────────────────────
   Tyler, 2026-10-04: "that subtle login, but don't say biometrics, connect
   with Face ID", "a graphic trying to load Face ID or a thumbprint". The
   glyph scans for a moment and turns into a tick, on a four second loop,
   still for anybody who asked for less motion. Drawn inline where it is used
   (the home page traits, the account door, the app's security tab):
   corners and
   facecircle and tick. The words beside it
   say Face ID or a fingerprint, never the word for the technology. */
.faceid{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.faceid .fid__scan{transform-origin:24px 24px;animation:fidscan 4s var(--ease) infinite}
.faceid .fid__face{animation:fidface 4s ease-in-out infinite}
.faceid .fid__ok{opacity:0;stroke:var(--ok);transform-origin:24px 24px;animation:fidok 4s var(--ease) infinite}
@keyframes fidscan{0%{opacity:1;transform:scale(1)}20%{transform:scale(.92)}40%{transform:scale(1)}52%{opacity:1;transform:scale(.96)}60%,96%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes fidface{0%,8%{opacity:.25}18%,52%{opacity:1}}
@keyframes fidok{0%,56%{opacity:0;transform:scale(.7)}64%,90%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.faceid .fid__scan,.faceid .fid__face{animation:none;opacity:1}.faceid .fid__ok{display:none}}

/* ── THE STORE BADGES, drawn the way Apple and Google draw theirs ─────────
   Tyler, 2026-10-04: "use the Apple Store and the Google Play Store logos,
   you have to really dial it in exactly how they have it designed". Both
   companies publish the rules: black, a hairline border of #A6A6A6, rounded
   corners, the mark on the left, a small line over a large one, never
   restyled in a brand colour. So these stay black on every ground. The
   marks are inline SVG (Apple's apple, Google's four colour play
   triangle), which is allowed: Tyler's no SVG rule is for the burro.
   Markup, used on the home hero, /get/ and the business page:
   
     
     Download on theApp Store
   and the same with .badge--play, "GET IT ON" and "Google Play". */
.badge{display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 16px 0 12px;border-radius:10px;background:#000;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px #A6A6A6;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;transition:transform .2s var(--ease),box-shadow .2s ease}
.badge:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #D0D0D0,0 10px 24px -14px rgba(0,0,0,.6)}
.badge__mark{width:26px;height:26px;flex:none}
.badge span{display:grid;line-height:1}
.badge small{font-size:10.5px;font-weight:500;letter-spacing:.01em;opacity:.95}
.badge b{margin-top:2px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.badge--play{gap:10px;padding-left:13px}
.badge--play .badge__mark{width:24px;height:26px}
.badge--play small{font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-family:Roboto,Arial,sans-serif}
.badge--play b{font-family:'Google Sans','Product Sans',Roboto,Arial,sans-serif;font-weight:500;font-size:20px;letter-spacing:-.01em}
.badges{display:flex;flex-wrap:wrap;gap:10px}
/* the badges keep white type wherever they sit, a section's link colour
   (the foot's grey, a page's red) must never reach them */
a.badge,a.badge:hover,a.badge:visited,.foot a.badge,.foot a.badge:hover{color:#fff!important}
a.badge small,a.badge b{color:#fff}

/* ── THE HELP LAUNCHER, bottom right of every page ───────────────────────
   Tyler, 2026-10-04: "maybe a chat with us or something subtly at the
   bottom", and late that night "a smart AI assistant, a character,
   professional". Written by site/js/shell.js, never on /desk/, /stream/,
   /net/ or /help/. The pill is the house ghost button at a smaller size,
   white with a hairline and Scout's compass in brown, so it reads as a
   door and not an alert. The page already spends its red.
   It opens Scout, an assistant (the helper block is in shell.js and the
   server side is netlify/functions/assistant.mjs). The one red in here is
   var(--red) on Scout's compass, in a var(--red-wash) circle, in the head
   of the panel and in the connecting moment. Scout's bubbles are cream,
   the person's are brown with white type, the composer is a clean white
   field, Tyler's rule for every form.
   From 640 up the panel is a card floating above the pill. Below 640 it is
   a bottom sheet the width of the screen over a light scrim, with the pill
   hidden under it. On a phone the pill sits above the home bar
   (safe-area-inset-bottom), hides while the drawer is open (html.lock) and
   while the keyboard is up for a field elsewhere on the page (.hl--away),
   and the foot gets extra room at the end (html.has-help) so the last line
   of every page can scroll clear of it. The panel is never taller than the
   screen under the nav.
   Motion, the rise, the typing dots and the rings, all stop under the
   reduced motion rule at the top of this file. The dots and the first ring
   are drawn visible at rest so a still panel still reads. */
.hl{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;transition:transform .35s var(--ease),opacity .25s ease}
.hl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hl__btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--white);color:var(--brown);font-weight:600;font-size:14.5px;letter-spacing:-.01em;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(21,33,27,.06),0 10px 24px -12px rgba(21,33,27,.28);transition:box-shadow .2s ease,background .2s ease;-webkit-tap-highlight-color:transparent}
.hl__btn:hover{box-shadow:inset 0 0 0 1px var(--brown),0 1px 2px rgba(21,33,27,.06),0 10px 24px -12px rgba(21,33,27,.28)}
.hl__btn[aria-expanded="true"]{background:var(--cream)}
.hl__mark{display:block;width:20px;height:20px;flex:none}
.hl__mark .hub{fill:var(--white)}
.hl__btn[aria-expanded="true"] .hub{fill:var(--cream)}

/* the panel, a column of four: the head, the conversation, the composer
   and Browse help. Only the conversation scrolls. */
.hl__panel{position:absolute;right:0;bottom:calc(100% + 10px);width:min(388px,calc(100vw - 32px));height:min(680px,calc(100svh - 68px - 96px - env(safe-area-inset-bottom,0px)));
  display:flex;flex-direction:column;overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);outline:0}
@media (prefers-reduced-motion:no-preference){.hl__panel:not([hidden]){animation:hlin .32s var(--ease) both}}
@keyframes hlin{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.hl__head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 12px 14px 16px;border-bottom:1px solid var(--line)}
.hl__av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--red-wash);color:var(--red)}
.hl__av .hl__mark{width:24px;height:24px}
.hl__av .hub{fill:var(--red-wash)}
.hl__who b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--brown);line-height:1.2}
.hl__who small{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.hl__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.hl[data-live="yes"] .hl__dot{background:var(--ok)}
.hl[data-live="no"] .hl__dot{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.hl__x{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.hl__x:hover{background:var(--cream)}
.hl__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* the conversation */
.hl__log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 14px}
.hl__msg{max-width:88%;margin:0;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.hl__msg--scout{background:var(--cream);color:var(--brown);border-bottom-left-radius:6px}
.hl__msg--me{align-self:flex-end;background:var(--brown);color:var(--white);border-bottom-right-radius:6px}
.hl__msg--me + .hl__msg--scout,.hl__msg--scout + .hl__msg--me{margin-top:4px}
.hl__notice{margin:-2px 0 0 4px;font-size:12px;line-height:1.4;color:var(--ink-3)}
.hl__ref{margin:0 0 0 4px;max-width:88%;font-size:13px;line-height:1.45;color:var(--ink-2)}
.hl__ref b{font-weight:700;color:var(--brown);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hl__links{display:flex;flex-wrap:wrap;gap:6px}
.hl__links a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;font-weight:600;color:var(--brown);text-decoration:none}
.hl__links a::after{content:"\2192";margin-left:6px;color:var(--ink-3);font-weight:500}
.hl__links a:hover{box-shadow:inset 0 0 0 1px var(--brown)}
.hl__offer{min-height:36px;padding:0 14px;border:0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;font-weight:600;color:var(--brown);cursor:pointer}
.hl__offer:hover{box-shadow:inset 0 0 0 1px var(--brown)}
.hl__choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.hl__choice{min-height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14.5px;font-weight:600;color:var(--brown);cursor:pointer;transition:box-shadow .2s ease,background .2s ease}
.hl__choice:hover{box-shadow:inset 0 0 0 1px var(--brown)}
.hl__choice[data-go="scout"]{background:var(--brown);color:var(--white);box-shadow:none}
.hl__choice[data-go="scout"]:hover{background:var(--brown-2)}
.hl__try{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:8px}
.hl__label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hl__chip{min-height:34px;padding:7px 12px;border:0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;line-height:1.35;color:var(--ink-2);text-align:left;cursor:pointer}
.hl__chip:hover{box-shadow:inset 0 0 0 1px var(--brown);color:var(--brown)}
.hl__typing{display:inline-flex;align-items:center;gap:5px;padding:14px 15px}
.hl__typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.55;animation:hldot 1.2s ease-in-out infinite}
.hl__typing i:nth-child(2){animation-delay:.15s}
.hl__typing i:nth-child(3){animation-delay:.3s}
@keyframes hldot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* the person path, a clean white form card in the conversation */
.hl__card{align-self:stretch;display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--white);border:1px solid var(--line-2)}
.hl__card form{display:grid;gap:8px}
.hl__card label{font-size:13px;font-weight:600;color:var(--brown)}
.hl__card .input{min-height:44px;padding:10px 12px;font-size:16px}
.hl__card textarea.input{min-height:76px;resize:none}
.hl__card .btn{justify-self:start;margin-top:4px}
.hl__card .said{min-height:0}
.hl__card .said:empty{display:none}
.hl__fine{font-size:12px;line-height:1.45;color:var(--ink-3)}
.hl__fine a{color:var(--ink-2)}
/* while the request is filed the card gives up its frame, so the
   connecting moment is one cream plate and not a box in a box */
.hl__card:has(.hl__connect){padding:0;border-color:transparent;background:none}
.hl__connect{display:grid;justify-items:center;gap:12px;padding:20px 12px 18px;border-radius:16px;background:var(--cream)}
.hl__connect p{font-size:14.5px;font-weight:600;color:var(--brown)}
.hl__ring{position:relative;display:grid;place-items:center;width:72px;height:72px}
.hl__ring i{position:absolute;inset:16px;border-radius:50%;border:1.5px solid var(--line-2);opacity:0;animation:hlring 2.4s var(--ease) infinite}
.hl__ring i:nth-child(2){animation-delay:1.2s}
.hl__ring .hl__av{position:relative}
@keyframes hlring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.hl__ring i:first-child{opacity:1;transform:scale(1.35)}.hl__typing i{opacity:.55}}

/* the composer */
.hl__compose{flex:none;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;padding:12px 12px 8px 14px;border-top:1px solid var(--line)}
.hl__compose textarea{display:block;width:100%;min-height:44px;max-height:120px;padding:11px 12px;border:1px solid var(--line-2);border-radius:14px;background:var(--white);color:var(--brown);font-size:16px;line-height:1.35;resize:none;caret-color:var(--red);transition:border-color .2s ease,box-shadow .2s ease}
.hl__compose textarea::placeholder{color:#A99A90}
.hl__compose textarea:focus{outline:0;border-color:var(--brown);box-shadow:0 0 0 4px rgba(21,33,27,.07)}
.hl__send{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:14px;background:var(--brown);color:var(--white);cursor:pointer;transition:background .2s ease}
.hl__send:hover{background:var(--brown-2)}
.hl__send:disabled{opacity:.45;cursor:wait}
.hl__send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hl__aside{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--ink-3)}
.hl__aside button{border:0;background:none;padding:2px 0;font-size:12px;font-weight:600;color:var(--brown);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Browse help, the five common topics in one sliding row. The row fades
   out at its right edge so a chip cut by the panel reads as more to come
   and not as a fault. */
.hl__browse{flex:none;padding:8px 0 12px;border-top:1px solid var(--line);background:var(--white)}
.hl__quick{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:4px 40px 6px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.hl__quick::-webkit-scrollbar{display:none}
.hl__quick .hl__label{flex:none;margin-right:4px}
.hl__quick a{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.hl__quick a:hover{box-shadow:inset 0 0 0 1px var(--brown);color:var(--brown)}
.hl__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 16px 0}
.hl__foot a{font-weight:600;font-size:13.5px;color:var(--brown);text-decoration:none}
.hl__foot a:hover{text-decoration:underline;text-underline-offset:3px}
.hl__foot button{border:0;background:none;padding:6px 0;font-size:12.5px;color:var(--ink-3);cursor:pointer}
.hl__foot button:hover{color:var(--brown)}

/* on a phone the pill tucks below the edge while the page is read downward
   (.hl--tuck, set by shell.js) and comes back on any scroll up, at the top,
   at the end or when a keyboard reaches it. Seen covering the urgent row's
   arrow on /help/ at 390 wide on 2026-10-04, which is why. */
.hl.hl--tuck{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
/* on a phone the pill is a 48px circle, its word kept for screen readers,
   and the panel is a bottom sheet over a light scrim. The pill hides under
   the sheet and comes back when it closes. No logo in the sheet's head, the
   nav above carries the burro (Tyler, one logo per screen), and Scout's
   compass is a face, not a logo. */
@media (max-width:639px){
  .hl__btn{width:48px;height:48px;padding:0;justify-content:center}
  .hl__btn .hl__mark{width:23px;height:23px}
  .hl__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .hl.hl--open::before{content:"";position:fixed;inset:0;background:rgba(21,33,27,.22)}
  .hl.hl--open .hl__btn{visibility:hidden}
  .hl__panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:min(88svh,calc(100svh - 56px));border-width:1px 0 0;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  @media (prefers-reduced-motion:no-preference){.hl__panel:not([hidden]){animation:hlsheet .36s var(--ease) both}}
  .hl__msg{max-width:90%}
}
@keyframes hlsheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html.lock .hl,.hl.hl--away{display:none}
html.has-help .foot{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
@media print{.hl{display:none}}

/* ── burropack, 2026-10-30: the short foot and the drawer's last line ── */
.foot__name{display:inline-flex;align-items:center;gap:12px}
.foot__name .wm__mark{width:clamp(40px,3vw + 20px,58px);height:auto;color:#0E1311}
.foot__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.foot__cols--pack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
@media (min-width:760px){.foot__cols--pack{grid-template-columns:repeat(3,minmax(0,200px))}}
.drawer__say{margin-top:10px;font-size:14.5px;color:var(--ink-3);text-align:center}

/* The listening-cell PNG family. Explicit surface classes let a section use
   the right contrast without forcing the whole page into a different theme.
   Most pages are light. The homepage alone starts on basalt. */
.wm__mark{display:inline-grid;position:relative;aspect-ratio:1}
.wm__mark .wm__variant{grid-area:1/1;width:100%;height:100%;object-fit:contain;border-radius:0}
.wm__mark .wm__variant--dark,.wm__mark .wm__variant--lime{display:none}
.wm__mark .wm__variant--light{display:block}
.brand-on-dark .wm__mark .wm__variant--light,.brand-on-lime .wm__mark .wm__variant--light{display:none}
.brand-on-dark .wm__mark .wm__variant--dark,.brand-on-lime .wm__mark .wm__variant--lime{display:block}
.foot__name .wm__mark{height:clamp(40px,3vw + 20px,58px)}
.nav .wm__mark{width:38px;height:38px;margin:-3px 0}


/* ── THE FOOT, v2, 2026-10-29 ─────────────────────────────────────────────
   Dark and quiet. The mark, one line, the pack as faces with a green dot, the
   latest from Trail Notes, four short columns, a plain bottom line and a
   faint wordmark along the edge. Overrides the light honeycomb foot above. */
.foot.foot--v2{position:relative;overflow:hidden;background:#0B0F0D;color:#E9E6DD;padding:clamp(48px,6vw,80px) 0 0;border-top:1px solid rgba(192,235,70,.25)}
.foot--v2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(60% 50% at 85% 0%,rgba(192,235,70,.08),transparent 70%)}
.foot--v2 .wrap{position:relative;z-index:1}
.foot--v2 a{color:rgba(233,230,221,.72);text-decoration:none;transition:color .15s ease}
.foot--v2 a:hover,.foot--v2 a[aria-current="page"]{color:#fff}
.f2-top{display:grid;gap:28px;align-items:end;padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid rgba(233,230,221,.1)}
@media (min-width:900px){.f2-top{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
.foot--v2 .foot__name{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:clamp(36px,2.4vw + 18px,54px);letter-spacing:-.06em;line-height:.9;color:#F2EFE7!important}
.foot--v2 .foot__name i{font-style:normal;color:#C0EB46}
.foot--v2 .foot__name .wm__mark{width:auto;height:clamp(40px,2.4vw + 22px,56px)}
.f2-say{margin:12px 0 0;font-size:clamp(16px,.4vw + 14px,19px);font-weight:600;letter-spacing:-.02em;color:rgba(233,230,221,.7)}
.f2-pack{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:5px 14px 5px 8px;border-radius:999px;border:1px solid rgba(233,230,221,.12);background:rgba(233,230,221,.04)}
.f2-pack span{position:relative;display:block;margin-left:-2px}
.f2-pack span:first-child{margin-left:0}
.f2-pack img{display:block;width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #0B0F0D}
.f2-pack span::after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#81C784;box-shadow:0 0 0 2px #0B0F0D}
.f2-pack b{margin-left:6px;font-size:13.5px;font-weight:600;color:#F2EFE7}
.f2-read{position:relative;display:grid;gap:4px;padding:16px 52px 16px 18px;border-radius:14px;border:1px solid rgba(233,230,221,.12);background:rgba(233,230,221,.04)}
.f2-read:hover{border-color:rgba(192,235,70,.5)}
.f2-read small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C0EB46}
.f2-read b{font:600 19px/1.25 'Newsreader',Georgia,serif;color:#F2EFE7}
.f2-read i{position:absolute;right:16px;top:50%;margin-top:-15px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#C0EB46;color:#0B0F0D;font-style:normal;font-size:14px}
.f2-cols{display:grid;gap:28px 20px;grid-template-columns:repeat(2,minmax(0,1fr));padding:clamp(32px,4vw,48px) 0}
@media (min-width:900px){.f2-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.f2-cols h4{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,230,221,.45)}
.f2-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.f2-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:18px 0 22px;border-top:1px solid rgba(233,230,221,.1);font-size:13.5px;color:rgba(233,230,221,.55)}
.f2-end p{margin:0}
.f2-legal{display:flex;flex-wrap:wrap;gap:16px}
.f2-legal a{color:rgba(233,230,221,.5)}
.f2-mark{position:relative;z-index:0;margin:0 auto -0.24em;text-align:center;font-weight:700;font-size:clamp(72px,17vw,250px);line-height:.85;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(233,230,221,.08);user-select:none;pointer-events:none;white-space:nowrap}
html.has-help .foot.foot--v2{padding-bottom:0}
html.has-help .foot--v2 .f2-end{padding-bottom:calc(22px + 64px + env(safe-area-inset-bottom,0px))}

/* ── working days: Ion's photography band, one scene per product page,
   2026-10-30. A real working moment under the lime band, rounded, with a
   quiet caption. Images in site/img/working-days/, sources in the brand kit. */
.wd{background:#0E1311;padding:clamp(20px,3vw,40px) 0}
.wd figure{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/2;max-height:640px;width:100%;background:#1C2420 center 30%/cover no-repeat}
@media (min-width:900px){.wd figure{aspect-ratio:21/9}}
.wd figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;padding:12px 16px;border-radius:18px;background:rgba(14,19,17,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#F2EFE7;font-size:15px;line-height:1.4}
.wd figcaption b{font-weight:600}
.wd figcaption small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C0EB46}