/* ============================================================
   local.css — the 2026-08-29 Oshkosh pass and the portfolio swipe.
   Kept out of styles.css on purpose: styles.css is shared by every page on the site, and these
   rules belong to the home page only. Adding them there is the cross-site bleed pattern.

   Tokens come from styles.css (--ink, --paper, --accent, --line, --mono...). Do not hardcode a
   colour here that already has a variable.
   ============================================================ */

/* ---------- the location pin that marks an eyebrow as a place, not a label ---------- */
/* Daniel 2026-08-29: the tweet-deck label only. It sits directly above the deck rather than at
   the head of a section, so the shared gold dash was pointing at nothing and reading as a stray
   rule. The dash is dropped and its gold moves into the type itself, which is the same --accent
   token as the URL box outline. Scoped to --deck on purpose: every other eyebrow on the site
   keeps the dash and the quiet grey. */
.eyebrow--deck{color:var(--accent);gap:0}
.eyebrow--deck::before{display:none}
.eyebrow--pin{display:flex;align-items:center;gap:8px}
.eyebrow--pin::before{display:none}          /* the shared eyebrow rule draws a dash; the pin replaces it */
.eyebrow--pin .pin{width:14px;height:14px;flex:0 0 14px;fill:var(--accent)}

/* ---------- gold outline on the hero's URL demo input, restored (Daniel 2026-08-29 10:29) ----------
   "i preferred when this box had a yellow outline to make it stand out." The old rule that gave
   this input a gold treatment was `.hero__form .bw-web` in styles.css, written for a hero layout
   that no longer exists here (the two-column split, 08:03, dropped the .hero__form wrapper). With
   that selector dead, build.css's generic `.bw-web{border:1px solid var(--line)}` was the only
   rule left matching, so the input went plain. Scoped to #demowow (the home hero's own demo
   mount) so it doesn't touch the same input on /build or anywhere else, and given higher
   specificity than build.css's bare class so load order can't flip it back off. */
#demowow .bw-web{border:1px solid var(--accent);box-shadow:0 0 0 1px rgba(231,178,76,.28)}
#demowow .bw-web:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(231,178,76,.4)}

/* ============================================================
   PORTFOLIO SWIPE
   The rail is edge-to-edge on purpose: a card cut off at the right edge is the affordance that
   tells someone there is more to swipe, and a contained rail hides that.
   ============================================================ */
.pf{padding-bottom:clamp(38px,5vw,60px)}
.pf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pf__nav{display:flex;align-items:center;gap:10px}
.pf__count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--t-low);min-width:56px}
.pf__arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);
  color:var(--t-hi);font-size:16px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.pf__arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pf__arrow:disabled{opacity:.3;cursor:default}
.pf__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.pf__rail{
  display:flex;gap:18px;margin-top:26px;
  /* the first card must line up with the heading above it, and the heading sits inside .wrap,
     which is max-width 1200 and centred. So the rail's left padding is the wrap's own left
     edge: the gutter when the viewport is narrow, the centring margin once it is wide. */
  padding:4px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) 6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;           /* momentum on iOS */
  scrollbar-width:none;
}
.pf__rail::-webkit-scrollbar{display:none}
.pf__rail:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.pf__card{flex:0 0 min(84vw,620px);scroll-snap-align:center;margin:0}
.pf__shot{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-2)}
.pf__shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
/* Every card says Example. These are concept screens, not client software, and the stamp is the
   thing that keeps that true at a glance. Do not remove it. */
.pf__stamp{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:rgba(8,8,9,.72);border:1px solid rgba(255,255,255,.2);
  border-radius:4px;padding:4px 8px;backdrop-filter:blur(3px)}
.pf__card figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--t-mid);margin-top:12px}

/* ============================================================
   RAIL ONE, "Built and running". It reuses the portfolio rail's furniture on purpose: two rails
   that look different would read as two unrelated features rather than as work and ideas. The
   only differences are the ones that carry meaning: the card is a link, so it gets a hover and a
   focus ring and an out-arrow, and the stamp says Live in the accent colour instead of Example in
   grey. That colour is the fastest way a reader tells the two rails apart.
   ============================================================ */
.rb__card{text-decoration:none;display:block}
.rb__card .pf__shot{transition:border-color .15s}
.rb__card:hover .pf__shot{border-color:var(--accent)}
.rb__card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.rb__cap{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--t-mid);margin-top:12px}
.rb__go{font-style:normal;font-size:11px;color:var(--t-low);transition:color .15s}
.rb__card:hover .rb__go{color:var(--accent)}
.pf__stamp--live{color:var(--accent);border-color:rgba(231,178,76,.45)}

/* A phone or tablet capture in a landscape card. Contained and centred on a recessed panel
   instead of cropped, because cropping a phone screen to 3/2 cuts away the part of the screen
   the card exists to show. Same treatment as the portfolio page, kept in step with it. */
.pf__shot--tall{background:
  radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.045), transparent 62%), var(--ink-2);
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center}
.pf__shot--tall img{width:auto;height:100%;aspect-ratio:auto;object-fit:contain;
  border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.45)}

@media (max-width:760px){
  .pf__card{flex:0 0 86vw}
  .pf__head{align-items:flex-start}
  .pf__nav{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion: reduce){
  .pf__rail{scroll-behavior:auto}
}

/* ============================================================
   THE LOCAL BAND. Four tiles and a row of towns, no prose.
   Photographs are desaturated to sit inside the monochrome shell and come back to full colour
   on hover, so the band reads as part of the page rather than as stock imagery pasted on.
   ============================================================ */
/* align-items:start stops the figures stretching to the tallest row; without it a grid item
   stretches and the image inside grows with it, which is what made these render as portraits.
   The 4:3 box lives on a wrapper with the image absolutely filling it, so the ratio holds no
   matter what width/height attributes the <img> carries. */
.lb__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;align-items:start}
.lb__tile{margin:0}
.lb__tile > img,
.lb__tile > svg{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);
}
.lb__tile > img{filter:grayscale(100%) contrast(106%) brightness(.82);transition:filter .25s ease}
.lb__tile:hover > img{filter:grayscale(35%) contrast(104%) brightness(.94)}
.lb__tile figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--t-low);margin-top:10px}
.lb__tile--map > svg{background:var(--ink);padding:10px}
.lb__wi{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.3);stroke-width:1.5}
.lb__dot{fill:var(--accent-dim);stroke:var(--accent);stroke-width:1}
.lb__dot-c{fill:var(--accent)}

.lb__towns{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0}
.lb__towns li{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--t-mid);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px}

@media (max-width:760px){
  .lb__grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .lb__tile img{transition:none}
}

/* ============================================================
   THE OFFER STACK. What they get is the list above; this is what it costs, in one glance.
   Figures must match pricing.html exactly.
   ============================================================ */
/* .inclist li is coloured --t-mid, which is a light grey meant for the dark sections. On the
   paper background that renders as near-invisible grey on white. Fixed here, scoped to this
   section, rather than in the shared pages.css, which every other page also reads. */
.section--paper .inclist li{color:#4a4a4a}
/* Same problem on the form's fine print, and this one carries the "applying does not guarantee
   selection" disclosure, so it has to be readable rather than merely present. */
/* SUPERSEDED 2026-08-29: this dated from when the form was a black card sitting on the paper, so
   its fine print was white. The form is light now (see "the application form, on light" below,
   which loads later and wins). Left in place only because deleting it would hide that the colour
   changed on purpose; the value here is now the light one so the two cannot disagree. */
.section--paper .leadform .qualline{color:#6f6f78}

.pricebox{margin-top:26px;border:1px solid var(--line-dark);border-radius:12px;padding:18px 20px;background:rgba(11,11,12,.03)}
.pricebox__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line-dark);font-size:15px}
.pricebox__row:last-of-type{border-bottom:0}
.pricebox__row span{flex:1 1 auto;min-width:0}
.pricebox__row b{flex:0 0 auto;font-family:var(--display);font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.pricebox__note{font-size:13.5px;color:#5d5d5d;margin-top:12px;line-height:1.5}
.pricebox__note a{color:#8a6a1f;text-decoration:underline}

/* ============================================================
   FOUNDER LINE. One sentence, one receipt, the two stats. Nothing else lives here.
   ============================================================ */
.founder__in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.founder__in > div:first-child{max-width:52ch}
.founder .whyproof{color:var(--t-mid);font-size:15.5px;margin-top:12px}
.founder .sourceline{margin-top:10px}
.founder .bjstrip{margin-top:clamp(34px,4vw,52px)}

/* ============================================================
   THE TEAM BAND (Daniel 2026-08-29 06:18).
   It has to read as a different KIND of thing from the sections above and below it, or it
   becomes another three-card grid nobody stops on. So: a split panel, lede on the left and a
   roster on the right, divided by a hairline, on a lighter ink with a gold rule across the
   top. No borders around the people, because a bordered card grid is exactly the template
   look this is avoiding.

   HEIGHT DISCIPLINE: this section and the quote rail together were built to fit inside a
   +15% page-height budget measured against the 2026-08-29 06:08 build (5877px at 390,
   4422px at 1440). That is why the padding is tighter than .section's default and why the
   roster is rows rather than cards. If either grows, re-measure before shipping.
   ============================================================ */
.team{
  background:var(--ink-2);
  border-top:1px solid var(--accent-dim);
  padding:clamp(24px,3vw,40px) 0 clamp(14px,2.2vw,30px);
}
.team__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,58px);align-items:start}
/* no max-width: the grid column already sets the measure, and a ch cap on top of it made the
   sentence wrap two lines narrower than the column it sits in. */
.team__lede{max-width:none}
/* the band headline is deliberately a step down from .h-lg: this is a section inside the page,
   not a second hero, and at .h-lg it shouted over the demo above it and cost two extra lines
   of page height. */
.team__h{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(25px,2.9vw,34px)}
/* .b2 is scoped to .hero h1 in styles.css, so the accent word here needs its own rule.
   The gold beat is what stops the headline reading as one flat run of words. */
.team__h .b2{color:var(--accent)}
.team__line{color:var(--t-mid);font-size:15px;line-height:1.5;margin-top:12px}

.team__roster{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.team__row:last-child{border-bottom:0;padding-bottom:0}
/* the roster is a 4-column row: mark, name, job, tag. The job column is the flexible one, so a
   longer job line wraps inside its own column instead of pushing the tag off the row. */
.team__row{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
  gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--line);
}
.team__mono{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--t-mid);
  background:var(--ink-3);border:1px solid var(--line);
}
/* the one human is the only warm mark in the roster. That contrast IS the point of the section. */
.team__mono--human{color:var(--accent);background:var(--accent-dim);border-color:rgba(231,178,76,.4)}
.team__name{font-family:var(--display);font-size:16px;letter-spacing:-.01em;color:var(--t-hi)}
.team__job{font-size:13.5px;color:var(--t-mid);line-height:1.3}
/* Human vs AI agent is stated, never implied. Three names in a row otherwise read as three
   people, which would be a lie on a page whose whole argument is that it does not lie. */
.team__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-low);border:1px solid var(--line);border-radius:999px;padding:4px 9px;white-space:nowrap;
}
.team__tag--human{color:var(--accent);border-color:rgba(231,178,76,.4)}

.team__promise{
  margin-top:clamp(13px,1.8vw,22px);
  border-left:2px solid var(--accent);padding:2px 0 2px 16px;
  font-family:var(--display);font-size:clamp(14.5px,1.35vw,17px);line-height:1.35;
  letter-spacing:-.01em;color:var(--t-hi);max-width:70ch;
}

@media (max-width:900px){
  .team__in{grid-template-columns:1fr;gap:24px}
  .team__lede{max-width:none}
}
@media (max-width:560px){
  /* at phone width the tag would take a fourth column off the screen, so it moves under the
     name and the job takes the full row beneath both. */
  .team__row{grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;padding:6px 0}
  .team__job{grid-column:2 / -1;font-size:12.5px;line-height:1.3}
  .team__mono{width:34px;height:34px;flex-basis:34px;font-size:11px;grid-row:span 2}
  .team__line{font-size:14.5px;line-height:1.45}
  .team__promise{font-size:14px}
  .qt__q{font-size:15px}
  .qt__card{padding:14px 14px 13px}
}

/* ============================================================
   THE X POST SWIPE. Same rail mechanics as the portfolio, but the card is now a white X
   screenshot rather than a card in the site's palette.

   Daniel 2026-08-29: "These need look like real twitter screenshots." The earlier version drew
   the post in the site's own dark palette with initials where the face goes, and he was right
   that it read as a designed testimonial — which is the one thing a quoted stranger must not
   look like. So the card is X's own surface: white, near-black text, X's blue for links and the
   verified badge, X's grey for the handle and the footer. It sits on the dark section, so the
   white reads as something pasted in from somewhere else, which is exactly the point.

   THE COLOURS BELOW ARE DELIBERATELY LITERAL, NOT TOKENS. Every other component on this page
   uses var(--ink-2) and friends, and that is correct for the page's own furniture. These do not,
   because they are not the page's furniture: they are X's, and if the site's palette is retuned
   later, these cards must NOT move with it or they stop looking like screenshots. Do not
   "clean this up" by swapping in the site variables.
   ============================================================ */
.qt{padding:clamp(22px,2.8vw,38px) 0 clamp(12px,1.8vw,24px)}
.qt__heading{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(19px,1.8vw,24px);line-height:1.15}
.qt__head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.qt__nav{display:flex;align-items:center;gap:10px}
.qt__count{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--t-low);min-width:46px}
.qt__arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);
  color:var(--t-hi);font-size:16px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.qt__arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.qt__arrow:disabled{opacity:.3;cursor:default}
.qt__arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.qt__rail{
  display:flex;gap:16px;margin-top:12px;
  padding:4px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) 6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* each card sizes to its own post rather than stretching to the tallest one. Stretching left a
     short post sitting above 200px of empty white, which is the one thing a real screenshot never
     looks like. Ragged bottoms are correct here: they read as separate screenshots. */
  align-items:flex-start;
}
.qt__rail::-webkit-scrollbar{display:none}
.qt__rail:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qt .sourceline{margin-top:9px}

/* the card is a link, so it needs the hover and focus states of one. The rail has 4px of vertical
   padding around it, so the lift on hover has room to happen without being clipped. */
.xc{
  flex:0 0 min(84vw,412px);scroll-snap-align:center;
  display:flex;flex-direction:column;gap:11px;text-decoration:none;
  background:#fff;border:1px solid #cfd9de;border-radius:16px;
  padding:16px 17px 14px;
  box-shadow:0 1px 2px rgba(0,0,0,.28),0 10px 26px -12px rgba(0,0,0,.55);
  /* X's stack, so the text sets the way it does in the app rather than in the site's display face. */
  font-family:"TwitterChirp",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.xc:hover{transform:translateY(-2px);border-color:#aab8c2;
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 16px 34px -14px rgba(0,0,0,.62)}
.xc:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.xc__top{display:flex;align-items:flex-start;gap:11px}
/* the account's real profile photo, 400x400 served locally. The grey behind it is what shows
   while the file decodes, so a slow connection never flashes white-on-white. */
.xc__av{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;background:#e1e8ed;display:block}
.xc__id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.xc__nm{display:flex;align-items:center;gap:4px;min-width:0}
.xc__nm b{font-size:15px;color:#0f1419;font-weight:700;letter-spacing:-.003em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc__v{width:16px;height:16px;flex:0 0 16px;fill:#1d9bf0}
.xc__h{font-size:14px;color:#536471;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xc__x{width:19px;height:19px;flex:0 0 19px;fill:#0f1419;margin-top:1px}

.xc__t{margin:0;font-size:16px;line-height:1.375;color:#0f1419;letter-spacing:.003em;
  overflow-wrap:anywhere}
.xc__lnk{color:#1d9bf0}

.xc__d{font-size:14px;color:#536471;padding-top:1px}
/* the excerpt label. Quiet on purpose — it is a disclosure, not a badge — but it sits on its own
   line under the timestamp so it can never be missed or mistaken for part of the post. */
.xc__ex{display:block;font-size:12px;color:#8899a6;margin-top:3px;letter-spacing:.01em}
/* the metrics footer. The row is fixed-height so a card with a 1-digit count and a card with a
   3-digit one still line up across the rail. */
.xc__m{display:flex;align-items:center;gap:26px;border-top:1px solid #eff3f4;padding-top:11px}
.xc__mi{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#536471;line-height:1}
.xc__mi svg{width:17px;height:17px;flex:0 0 17px;fill:#536471}

@media (max-width:760px){
  .xc{flex:0 0 86vw;padding:15px 15px 13px}
  .qt__head{align-items:center;flex-wrap:nowrap}
  .qt__nav{width:auto;flex:0 0 auto}
  .xc__t{font-size:15.5px}
  .xc__m{gap:20px}
}
@media (hover:none){
  /* no lift on touch: it fires on tap and reads as a glitch rather than a hover. */
  .xc:hover{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .qt__rail{scroll-behavior:auto}
}

/* ---------- footer photo credits. Required by the CC BY-SA licences. ---------- */
.foot__credits{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--t-low);
  margin-top:18px;line-height:1.6}
.foot__credits a{text-decoration:underline}

/* ============================================================
   WHAT IT SOLVES. Five beats, one line each, sitting between the demo and the work teaser.

   Built as a definition list in spirit: a short bold claim, then the concrete thing that happens
   in a real week. On a phone the two stack, because a two-column row at 390px would leave the
   example line four words wide. From 720px the claim takes a fixed column so all five examples
   start on the same vertical line, which is what makes the list scannable rather than a wall.

   One small icon per row (Daniel 08:38), left of the label, vertically centered with it. Purely
   decorative — the words already carry the meaning — so the icons are alt="".
   ============================================================ */
.wis__list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.wis__row{display:flex;flex-direction:column;gap:5px;padding:17px 0;border-bottom:1px solid var(--line)}
.wis__krow{display:flex;align-items:center;gap:10px}
.wis__icon{width:28px;height:28px;flex:0 0 28px;display:block}
.wis__k{font-size:17px;line-height:1.3;color:var(--t-hi);font-weight:600}
.wis__v{font-size:15.5px;line-height:1.5;color:var(--t-mid)}
@media (min-width:720px){
  .wis__row{flex-direction:row;align-items:center;gap:26px}
  .wis__krow{flex:0 0 190px}
  .wis__v{flex:1;font-size:16.5px}
}

/* ============================================================
   THE HERO SPLIT + THE X DECK (Daniel 2026-08-29 08:03).

   The right half of the hero was a photograph doing nothing while the argument for custom
   software sat in a rail two thirds down the page. It now holds a stack of the same fourteen
   posts: the front card readable, two behind it offset and scaled back so the shape says "there
   are more" without a caption. The photograph stays as the backdrop, which is the whole reason
   the deck reads as sitting ON Main Street rather than on a panel.

   The stack is a grid with every card in the same cell, so depth is transform-only and nothing
   reflows when a card leaves. --d is the card's depth (0 = front). --out is the direction a
   leaving card travels. Both are set from x-deck.js.
   ============================================================ */
.hero__inner--split{display:block}
.hero__col{max-width:1000px}

.xd{margin-top:34px;display:flex;flex-direction:column;gap:14px;min-width:0}
.xd__src{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--t-low);line-height:1.6}
.xd:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
.xd__stack{position:relative;display:grid;touch-action:pan-y;min-height:288px}
.xd__card{
  grid-area:1/1;align-self:start;
  transform:translateY(calc(var(--d) * 14px)) scale(calc(1 - var(--d) * .05));
  opacity:calc(1 - var(--d) * .28);
  z-index:calc(10 - var(--d));
  transition:transform .34s cubic-bezier(.22,1.1,.36,1),opacity .34s ease;
  will-change:transform;
}
.xd__card.is-live{cursor:grab}
.xd__card.is-drag{cursor:grabbing;transition:none}
/* Daniel 2026-08-29 08:5x: dragging LEFT must exit LEFT (and reveal the next card), dragging
   RIGHT must exit RIGHT. --out=1 means "advancing to the next post" (set from dir, which is 1
   for a left-drag/right-arrow and -1 for a right-drag/left-arrow) — so the exit itself has to run
   the OPPOSITE sign of --out to land on the same side the finger moved. This is the fix for
   Daniel's "flies off the opposite side" bug: it used to be var(--out) * 118%, which put the
   exit on the wrong side every time. */
.xd__card.is-out{transform:translateX(calc(var(--out) * -118%)) rotate(calc(var(--out) * -13deg)) scale(.94);opacity:0}
.xd__card .xc{width:100%;height:100%}
/* back cards are clipped to the front card's height (set from x-deck.js); the front never is */
.xd__card:not(.is-live){overflow:hidden}
/* only the front card is interactive; the two behind must not swallow a click meant for it */
.xd__card:not(.is-live){pointer-events:none}
.xd__card:not(.is-live) .xc:hover{transform:none;box-shadow:0 1px 2px rgba(0,0,0,.28),0 10px 26px -12px rgba(0,0,0,.55)}
/* Daniel 2026-08-29: the back cards used to leak a sliver of their own text/timestamp under the
   front card's bottom edge, because clipping each card to the front's height doesn't stop it
   showing whatever real content sits at that clip line. Paint the back cards' content invisible
   (visibility, not display, so layout/height math in x-deck.js is unaffected) so only the .xc
   card's own solid white face, border and shadow show through the peek — the depth effect stays,
   no text or avatar ever does. */
.xd__card:not(.is-live) .xc *{visibility:hidden}

/* Daniel 08:36: no dot row, no round buttons — a plain thin arrow on each side of the card,
   vertically centered, sitting outside the card edge once there is room for it. */
.xd__side{position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:28px;height:44px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;
  font-size:28px;line-height:1;color:rgba(255,255,255,.7);
  /* Below 1100px this sits on top of the card, which is often a light/white screenshot, so a
     white glyph alone would vanish. The dark halo keeps it visible on any background without
     giving it a circle/pill of its own. */
  text-shadow:0 1px 4px rgba(0,0,0,.65),0 0 8px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;transition:color .15s}
.xd__side:hover{color:rgba(255,255,255,1)}
.xd__side:focus-visible{outline:2px solid var(--accent);outline-offset:2px;color:#fff}
.xd__side--prev{left:2px}
.xd__side--next{right:2px}

@media (min-width:1000px){
  .hero__inner--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,430px);
    gap:52px;align-items:start}
  .hero__col{max-width:none}
  .xd{margin-top:6px}
  .xd__stack{min-height:330px}
}

/* Daniel 2026-08-29 (mobile screenshot, ~390px): below 1100px the deck's own eyebrow label sat
   flush against the fine print above it, wrapped to two lines with the gold rule out of place,
   then left a big gap (the default .xd margin-top:34px, sized for the desktop grid column) before
   the first tweet card. Give the label breathing room above, force it onto one line at 390/360px
   by trimming its size and tracking, and collapse the gap below it to match the desktop pacing.
   Desktop (>=1100px) is untouched — this only applies below the split's own breakpoint.

   FIX 2026-08-29: the label now lives INSIDE .xd as its first flex child (see index.html), not
   as a separate sibling before it, so the 32px-ish breathing room above it has to come from .xd's
   own margin-top (the label's own margin-top would just stack on top of the container's, doubling
   the gap) and the 14px gap down to the first card is the flex column's own `gap:14px` — no
   sibling-combinator rule needed any more. */
@media (max-width:1099px){
  .xd{margin-top:40px}
  .eyebrow--deck{font-size:clamp(9px,2.6vw,10.5px);letter-spacing:.1em;white-space:nowrap}
}
/* Below 1100px there isn't gutter room outside the card, so the arrows overlay its edges instead
   of pushing it narrower; at 1100px and up they move fully outside. */
@media (min-width:1100px){
  /* 2026-08-29 QA: width was still 28px here (the <899px fix below only covers phones). Grown
     to 44 and the offset pushed out by half the growth so the glyph's outside edge stays put —
     background is transparent, so this is purely an invisible hit-area gain, no visual change. */
  .xd__side{width:44px}
  .xd__side--prev{left:-48px}
  .xd__side--next{right:-48px}
}
@media (prefers-reduced-motion:reduce){
  .xd__card{transition:none}
}

/* ============================================================
   WHAT IT SOLVES + THE WORK, SIDE BY SIDE (Daniel 2026-08-29 08:02).

   Two stacked full-width sections became one band. Below 1100px they stack exactly as they did,
   so nothing about the phone layout changes; from 1100px the claims sit left and the carousel
   sits right, and the dead vertical band between the old sections is gone.
   ============================================================ */
.wis__split{display:block}
.wis__col{min-width:0}
.wis__col--work{margin-top:54px}
.wis__col--work .sourceline{margin-top:14px}

/* REBUILT 2026-08-29 (Daniel: "prefer the auto scroll and size and style [of the ideas strip].
   Can they both be like that?"). This was a one-card-per-view PAGED carousel; it is now the same
   continuous-drift strip as .idst (ideas-carousel.js/idst__*) — own namespace kept (.rbc__*)
   because this one is a set of LINKS with a Built/Live/In-use stamp and a paper-band theme the
   ideas strip does not carry, but the mechanism, the fixed-height shot (normalising the wide/tall
   mix in BUILT into one clean rhythm) and the caption treatment are the same rules, just sized to
   fit this band's own layout: full-width single column below 1100px (literally the same card
   size as .idst at each of its two tiers, see below), and a narrower size at >=1100px so ~1.3
   cards show inside the five-things split's right-hand column instead of the ideas strip's
   full-width ~3.5. */
.rbc{margin-top:22px;position:relative}
.rbc:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px}
.rbc__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 76px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 76px),transparent 100%)}
.rbc__track{display:flex;gap:18px;will-change:transform;touch-action:pan-y;cursor:grab}
.rbc__track:active{cursor:grabbing}
/* Default tier: single-column layout below 1100px, same card size as .idst's own default
   (288+18 gap) — literally the same size and rhythm as the ideas strip at this width range. */
.rbc__card{flex:0 0 288px;min-width:0;text-decoration:none;display:block}
.rbc__shot{position:relative;height:210px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--ink-2)}
.rbc__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.rbc__stamp{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);
  background:rgba(7,7,8,.72);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:3px 8px;backdrop-filter:blur(4px)}
.rbc__stamp--live{color:var(--accent);border-color:rgba(231,178,76,.5)}
/* Two-line clamp, same as .idst__cap: one long business name must never shift the strip's rhythm. */
.rbc__cap{display:block;margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--t-mid);
  min-height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rbc__go{font-style:normal;color:var(--accent);margin-left:6px}
.rbc__card:hover .rbc__cap{color:var(--t-hi)}
/* Thin side arrow, pushed fully outside the image at every width that has room for it — never
   overlaid on the card (Daniel 2026-08-29 QA on both this strip and the ideas strip: an arrow
   sitting on top of the screenshot reads as a broken button). Below 480px there is no gutter to
   spare beside a near-full-width card, so the arrows are hidden entirely and the carousel is
   swipe-only (swipe-drag.js already drives it) — never overlaid as the fallback. */
.rbc__side{position:absolute;top:120px;transform:translateY(-50%);z-index:20;
  width:44px;height:52px;display:flex;align-items:center;justify-content:center;
  background:rgba(7,7,8,.62);border:1px solid rgba(255,255,255,.16);border-radius:8px;
  color:rgba(255,255,255,.72);font-size:22px;line-height:1;cursor:pointer;
  backdrop-filter:blur(6px);padding:0}
.rbc__side:hover{color:#fff;background:rgba(7,7,8,.82)}
.rbc__side:focus-visible{outline:2px solid var(--accent);outline-offset:2px;color:#fff}
.rbc__side--prev{left:-14px}
.rbc__side--next{right:-14px}
@media (max-width:760px){
  /* Phone tier: literally the same card size as .idst's own phone tier (250+14 gap, 176 shot). */
  .rbc__track{gap:14px}
  .rbc__card{flex:0 0 250px}
  .rbc__shot{height:176px}
  .rbc__side{top:88px;width:44px;height:46px}
  .rbc__side--prev{left:-18px}
  .rbc__side--next{right:-18px}
  .rbc__viewport{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)}
}
/* <480px: no room at all beside a near-full-width card for even an outside-pushed arrow to sit
   without appearing to touch it — hidden here, swipe still works (same rule as the ideas strip). */
@media (max-width:479px){
  .rbc__side{display:none}
}
/* >=1100px: the five-things/Our-Work split. The right column is (1200 - 58) / 2 = 571px, and a
   420px card + 16px gap puts ~1.3 cards in view (571 / 436 ≈ 1.3), matching the spec exactly —
   this is the one tier that is NOT the same pixel size as the ideas strip, because the ideas
   strip never has to fit inside a half-width column. */
@media (min-width:1100px){
  .rbc__track{gap:16px}
  .rbc__card{flex:0 0 420px}
  .rbc__shot{height:278px}
  .rbc__side{width:44px}
  .rbc__side--prev{left:-48px}
  .rbc__side--next{right:-48px}
  .wis__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:58px;align-items:start}
  .wis__col--work{margin-top:0}
  .wis__list{margin-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .rbc__track{will-change:auto}
}

/* ============================================================
   THE LIGHT BANDS (Daniel 2026-08-29: "I like the warm light background, use it more").

   The page now alternates on purpose: dark hero, LIGHT five-things/Our Work, the treehouse photo
   band, the ideas strip, the Oshkosh photo band, LIGHT offer/apply, then dark through the FAQ to
   the footer. Two touching bands never share a background unless one is a photo band, where the
   photograph itself is the separation.

   EVERYTHING BELOW IS SCOPED UNDER .section--paper. That is deliberate and it is the whole
   safety story: .wis, .rbc and .leadform are all shared with dark bands and with other pages, so
   a bare `.rbc__cap{color:#4a4a4a}` here would have quietly repainted the concept strip and the
   carousels on /portfolio. If a rule below ever loses its .section--paper prefix, it is a bug.
   ============================================================ */

/* ---- five things, on light ---- */
.section--paper .wis__list{border-top-color:var(--line-dark)}
.section--paper .wis__row{border-bottom-color:var(--line-dark)}
.section--paper .wis__k{color:var(--ink)}
.section--paper .wis__v{color:#4a4a4a}          /* 8.0:1 on --paper */
/* The five icons are drawn with paper-white strokes and gold accents, so on paper the strokes
   vanish. A CSS filter is the obvious reach and the wrong one: any invert that darkens the white
   also swings the gold off-brand. Instead the icon keeps its exact artwork and gets a small dark
   chip to sit on, which preserves both the white line and the gold mark, needs no second set of
   SVGs, and reads as an intentional badge rather than a patch. */
.section--paper .wis__icon{width:34px;height:34px;flex-basis:34px;padding:3px;
  background:var(--ink);border-radius:9px}

/* ---- the Our Work carousel, on light ---- */
/* The lift has to be a DOWNWARD shadow only, and that is a constraint, not a taste call. The
   viewport clips at its padding edge and each card is exactly one viewport wide, so a shadow
   thrown left, right or up is cut off at the frame — and padding the viewport to make room for
   it just exposes the next card as a sliver with a half-caption, which is what the first attempt
   here did. A y-offset shadow with negative spread lands in the gap between the tile and its
   caption, which is inside the clip, so it survives. Do not add side or top shadow to anything
   inside .rbc__viewport. */
.section--paper .rbc__shot{background:#fff;border-color:rgba(11,11,12,.13);
  box-shadow:0 10px 22px -12px rgba(11,11,12,.45)}
.section--paper .rbc__cap{color:#4a4a4a}
.section--paper .rbc__card:hover .rbc__cap{color:var(--ink)}
/* The stamp sits on top of a screenshot, not on the paper, so it stays a dark chip: a light chip
   would disappear into whatever the render happens to be showing behind it. */
.section--paper .rbc__stamp{background:rgba(11,11,12,.78);color:#fff;
  border-color:rgba(255,255,255,.28)}
/* Gold at --accent is a signal colour picked against black; as TEXT on paper it lands near 2:1.
   These two are the only places gold carries words on a light band, so they use a deepened gold
   that still reads as the same accent and clears 4.5:1. */
.section--paper .rbc__stamp--live{color:var(--accent);border-color:rgba(231,178,76,.55)}
.section--paper .rbc__go{color:#8a6a1e}
.section--paper .rbc__side{background:rgba(255,255,255,.92);color:#3a3a40;
  border:1px solid rgba(11,11,12,.12);border-radius:8px;
  box-shadow:0 2px 10px rgba(11,11,12,.12)}
.section--paper .rbc__side:hover{color:var(--ink);background:#fff}
.section--paper .sourceline{color:#6f6f78}

/* ---- the application form, on light ---- */
/* This form is the one place on the page a stranger has to TYPE, and it was a black card marooned
   on the paper: the field you are asked to fill looked like a hole cut in the section. White
   fields on paper, ink text, and the gold ring kept as the focus signal so the accent still means
   "this is the live one". Scoped to .section--paper so the same form on any dark band is
   untouched. */
.section--paper .leadform{background:#fff;border-color:rgba(11,11,12,.12);
  box-shadow:0 1px 2px rgba(11,11,12,.04),0 12px 30px rgba(11,11,12,.08)}
.section--paper .leadform .formhead{color:var(--ink)}
.section--paper .leadform label{color:#5c5c66}
.section--paper .leadform input:not([type=checkbox]),
.section--paper .leadform textarea{background:#fff;border-color:rgba(11,11,12,.20);color:var(--ink)}
.section--paper .leadform input:not([type=checkbox])::placeholder,
.section--paper .leadform textarea::placeholder{color:#8a8a93}
.section--paper .leadform input:focus,
.section--paper .leadform textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(231,178,76,.28)}
.section--paper .leadform .checkline{color:var(--ink)}
.section--paper .leadform .qualline{color:#6f6f78}
.section--paper .leadform .err{color:#a8321a}
.section--paper .leadform .btn--primary{background:var(--ink);color:#fff}
.section--paper .leadform .btn--primary:hover{background:var(--accent);color:var(--ink)}
.section--paper .leadform .leaddone{color:var(--ink)}

/* ============================================================
   IDEAS STRIP (Daniel 2026-08-29). The concepts band was a full-viewport paged carousel and it
   read as one enormous card; the point of the band is quantity, so it is now a low drifting
   strip. Its own namespace on purpose: .rbc__* now belongs to a second continuous-drift strip
   (work-carousel.js's "Our Work"), which shares this same mechanism and, at its default and
   phone tiers, this same exact card size — only .xd__* (the hero tweet deck) is still a PAGED
   carousel. Fixed card and image heights are what hold the whole band under ~520px on desktop,
   and they also normalise the tall/wide mix in the concept renders into one clean rhythm — so if
   a card height changes here, re-measure the band, do not assume.
   ============================================================ */
.idst{position:relative}
/* The viewport clips at the wrap edge, which is what puts a half card at the right and tells the
   eye there is more without a counter or a dot row. The mask fades that cut edge so it reads as
   "continues" rather than "chopped"; the left side gets a shorter fade for the same reason as
   the strip drifts leftward out of view. */
.idst__viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 76px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 76px),transparent 100%)}
.idst__track{display:flex;gap:18px;will-change:transform;touch-action:pan-y;cursor:grab}
.idst__track:active{cursor:grabbing}
/* 288 + 18 gap = 306, and the wrap's inner width at 1440 is 1072, so exactly 3.5 cards land in
   view and the fourth is cut in half. Measured, not guessed: change either number and the half
   card at the edge stops being half. */
.idst__card{flex:0 0 288px;min-width:0;display:flex;flex-direction:column}
.idst__shot{position:relative;height:210px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#0d0d0f}
.idst__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.idst__stamp{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;color:rgba(255,255,255,.82);background:rgba(7,7,8,.72);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 8px;
  backdrop-filter:blur(4px)}
/* Two lines of caption, clamped: an eleven-card strip only stays a rhythm if every card is the
   same height, and one long business name must not be allowed to shift the band. */
.idst__cap{display:block;margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--t-mid);
  min-height:38px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 2026-08-29 QA: hit area widened 34->44 (still <44 was a miss on a thumb/mouse). The offset
   moves out by the same amount the width grew, so the edge nearest the strip (where the visible
   pill actually sits) lands at the SAME point it always did — the extra px is added on the
   outward/gutter side only, so this does not cover any more of the image than the original
   design already (deliberately) did. See the TAP TARGETS note further down for the twin fix on
   .xd__side/.rbc__side. */
.idst__side{position:absolute;top:120px;transform:translateY(-50%);z-index:20;
  width:44px;height:52px;display:flex;align-items:center;justify-content:center;
  background:rgba(7,7,8,.62);border:1px solid rgba(255,255,255,.16);border-radius:8px;
  color:rgba(255,255,255,.72);font-size:22px;line-height:1;cursor:pointer;
  backdrop-filter:blur(6px);padding:0}
.idst__side:hover{color:#fff;background:rgba(7,7,8,.82)}
.idst__side:focus-visible{outline:2px solid var(--accent);outline-offset:2px;color:#fff}
.idst__side--prev{left:-14px}
.idst__side--next{right:-14px}
/* .section--tight: the strip is a glance, so the band does not earn full section padding. This
   is what keeps the total under ~520px at 1440. */
.section--tight{padding:clamp(40px,4.2vw,56px) 0}
@media(max-width:760px){
  .idst__track{gap:14px}
  .idst__card{flex:0 0 250px}
  .idst__shot{height:176px}
  .idst__side{top:88px;width:44px;height:46px}
  .idst__side--prev{left:-18px}
  .idst__side--next{right:-18px}
  .idst__viewport{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)}
}
/* <480px: at the widest phones -18px still lands the 44px arrow mostly on top of the card, not
   in the page's own gutter (Daniel 2026-08-29 QA, phone screenshot: the arrow pill visibly
   overlapped the first card). No room to spare here for an outside-pushed arrow either, so it is
   hidden and the strip is swipe-only (swipe-drag.js already drives it) — same rule as .rbc__side. */
@media (max-width:479px){
  .idst__side{display:none}
}

/* ============================================================
   OUR OWN BUSINESS RUNS ON IT (Emily round-4 gate, 2026-08-29).
   A three-row before/after list, not cards: the whole point of the section is that each pair
   reads as ONE sentence about the same task changing, and putting a border between the halves
   would break the pair back into two unrelated claims. The "After" line is the one that carries
   the weight, so it is the one that gets the ink; "Before" is deliberately quieter.
   Below 760px the pair stacks, before over after, which keeps the reading order intact.
   ============================================================ */
/* Daniel 2026-08-29: the section sits over a black-and-white photo of the Goat Creek Treehouse,
   the actual building the story is about. Same ::before/::after idiom as .section--build-photo
   so there is one photo-band pattern on the site, not two. The readability budget is deliberate
   and generous: brightness(.58) on the image, then a 78-88% black gradient on top, which keeps
   white body text far above 7:1 even over the brightest patch of sky in the frame. If the photo
   is ever swapped, re-check contrast rather than assuming the numbers still hold. The hairlines
   and the quiet "Before" text are lifted off var(--line)/var(--t-low) because those tokens are
   tuned for flat black and disappear over an image. */
.ourres{position:relative;background:#070708;color:#fff;overflow:hidden;isolation:isolate}
.ourres::before{content:"";position:absolute;inset:-24px;
  background:url("img/treehouse-bw.jpg") center 42%/cover no-repeat;
  filter:grayscale(100%) contrast(104%) brightness(.72);transform:scale(1.02);z-index:-2}
.ourres::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,8,.84) 0%,rgba(7,7,8,.72) 42%,rgba(7,7,8,.86) 100%);
  z-index:-1}
.ourres .wrap{position:relative;z-index:1}
.ourres .ourres__b{color:rgba(255,255,255,.62)}
.ourres .ourres__foot{color:rgba(255,255,255,.58)}
.ourres__intro{margin-top:14px;color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.6}
/* TRIMMED LAYOUT (Daniel 2026-08-29): full-width ~1100px container, two columns on desktop — the
   lead (eyebrow/heading/one paragraph) on the left, the proof (stats + tight before/after lines)
   on the right, footnote spanning the bottom. Below 900px it stacks to one column. */
.ourres__wrap{max-width:1100px}
.ourres__wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:8px 48px;align-items:start}
.ourres__foot{grid-column:1 / -1}
@media(max-width:900px){
  .ourres__wrap{grid-template-columns:1fr}
}
.ourres__tight{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}
.ourres__tight li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;padding:8px 0 0;
  border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;line-height:1.4}
.ourres__tight li:first-child{border-top:none;padding-top:0}
.ourres__tight .ourres__arrow{color:var(--accent)}
/* The three figures from the prose, pulled out to be scannable. Deliberately not cards: the band
   is a photograph and three bordered tiles would compete with it, so the only separation is
   space and a single hairline above. Gold carries the figures because this band is the one place
   on the page where the numbers ARE the argument. */
.orstats{list-style:none;padding:22px 0 0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:26px 54px;
  border-top:1px solid rgba(255,255,255,.16)}
.orstats li{min-width:0}
.orstats__f{display:block;font-family:var(--display);font-size:22px;line-height:1.15;
  letter-spacing:-.01em;color:var(--accent);font-weight:700}
.orstats__l{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
@media(max-width:760px){
  .orstats{gap:18px;flex-direction:column;margin-top:20px;padding-top:18px}
  .orstats__f{font-size:19px}
}
.ourres__b{color:var(--t-low);font-size:15px;line-height:1.55}
.ourres__a{color:#fff;font-size:16px;line-height:1.55}
.ourres__foot{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--t-low)}

/* THE RISK REVERSAL AND THE INCLUSIONS, inside the offer box on the paper section.
   The guarantee is set at body weight rather than as fine print on purpose: it is the answer to
   the only objection the price raises, and fine print reads as something being hidden. The
   inclusion list is the verbatim Keep It Running rung from pricing.html and nothing else may
   be added to it. */
.pricebox__guarantee{margin-top:14px;font-size:14.5px;line-height:1.6;color:#2f2f33;
  border-top:1px solid var(--line-dark);padding-top:14px}
.pricebox__inc{margin-top:14px}
.pricebox__inclbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a;margin-bottom:9px}
.inclist--tight{margin:0}
.inclist--tight li{font-size:14.5px}
.pricebox__incnote{font-size:13px;color:#5d5d5d;margin-top:10px;line-height:1.55}

/* ============================================================
   TAP TARGETS ON A PHONE, 2026-08-29 QA. The tweet deck's arrows are 28px wide, which is a miss
   on a thumb. Below 900px they become 44 wide and the left/right offsets move out by the same
   8px, so the arrow GLYPH stays exactly where it was (still overlaying the card, by design for
   that deck) and only the invisible hit area grows. If the base width or the 2px offset above
   ever changes, these two numbers have to change with it.

   rbc (Our Work) no longer shares this rule (2026-08-29): its arrows moved fully outside the
   image instead of overlaying it (see the .rbc__side block above), so it has its own width/
   offset numbers for touch widths, next to its own outside-positioning media queries.
   ============================================================ */
@media (max-width:899px){
  .xd__side{width:44px;min-height:44px}
  .xd__side--prev{left:-6px}
  .xd__side--next{right:-6px}
}