/* ============================================================
   BLUEGREY - the Fellside page (SITE-028), built from the signed-off
   mock-up CLAUDE OUTPUTS/SITE-027_Fellside_MainPage_v14.html; SITE-035 to v16.
   ------------------------------------------------------------
   THE SAME LOOK ON A LAPTOP AND A 4K SCREEN. The page is designed at
   1778px wide (SITE-035; 1440 before). Above 900px the root font size is the viewport width
   divided by 111.125 (16px at 1778, 12.96px at 1440, 34.6px at 3840) and
   every length on the page chrome is in rem, so the whole page scales
   like a picture: the same composition, just bigger. Below 900px the
   root goes back to 16px and the layout is fluid and stacks (the
   phone and tablet rules at the foot of this file). fellside.js sets
   the root size from the real content width (no scrollbar) and the
   calc() here is the fallback without JavaScript.
   THE APP SCREENS (the .app block and the device frames) stay in PX:
   each one is drawn at a fixed size and scaled into its slot with a
   transform by fellside.js, so it never squashes or wraps.
   Colours and fonts are the brand's (Brand Pack v1; the page lives in
   the paper world, the carbon bands carry the ivory text).
   ============================================================ */
:root {
  --carbon: #14181D; --ivory: #E8E2D6; --paper: #F4F1EA; --paper2: #ECE7DC; --ink: #14181D; --muted: #5C5750; --faint: #6b665f;
  --blue: #4A90E8; --btn: #2F6FC4; --btnh: #3B7DD6; --bday: #245C9E; --blue2: #8FB3E0; --blue3: #D6E4F6;
  --sage: #3F6A4B; --sage2: #E2EEE5; --amber: #8F5A1E; --amber2: #F6E7D3; --line: rgba(20, 24, 29, .09);
  --brass: #C9954A; --bumff: #1E3A33;
  --head: Manrope, Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  /* three curves, nothing linear */
  --e-out: cubic-bezier(.22, 1, .36, 1); --e-inout: cubic-bezier(.65, 0, .35, 1); --e-soft: cubic-bezier(.33, 1, .68, 1);
  /* one elevation scale */
  --sh1: 0 1px 1px rgba(20, 24, 29, .04), 0 2px 4px rgba(20, 24, 29, .04);
  --sh2: 0 1px 2px rgba(20, 24, 29, .05), 0 6px 16px rgba(20, 24, 29, .07), 0 18px 40px rgba(20, 24, 29, .06);
  --sh3: 0 2px 4px rgba(20, 24, 29, .06), 0 16px 40px rgba(20, 24, 29, .12), 0 40px 100px rgba(20, 24, 29, .14);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: clip; }
/* SITE-035: drawn at 1778 wide (16px root at 1778; 1440/1778 = 0.81 of the first live size) */
@media (min-width: 900px) { html { font-size: calc(100vw / 111.125); } }
body { background: var(--paper); color: var(--ink); font: 1rem/1.55 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: -.028em; line-height: 1.06; }
p { margin: 0; }
button, input { font: inherit; }
.num, .n, td, .tab-num, .tile .n, .big, .quote b { font-variant-numeric: tabular-nums; }
.wrap { max-width: 104.875rem; margin: 0 auto; padding: 0 2rem; }
.tm { font-size: .5em; vertical-align: super; font-weight: 600; margin-left: 1px; letter-spacing: 0; }
.vn { font-family: var(--head); font-weight: 800; letter-spacing: -.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }

/* ---------- nav: a bar that shrinks to a slim strip once the page scrolls ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem max(2rem, calc((100% - 100rem) / 2)); position: fixed; left: 0; right: 0; top: 0; z-index: 40; background: rgba(244, 241, 234, .86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: padding .35s var(--e-out), background .35s var(--e-out), box-shadow .35s var(--e-out); }
.brand { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--ink); }
.brand .mk { width: 2rem; height: 2rem; display: block; transition: width .35s var(--e-out), height .35s var(--e-out); }
.brand .w { font-family: var(--head); font-weight: 800; font-size: 1.375rem; letter-spacing: -.03em; line-height: 1; transition: font-size .35s var(--e-out); }
.brand .by { display: flex; align-items: center; gap: .3125rem; font: 500 .6875rem var(--body); color: var(--muted); margin-top: .125rem; }
.bgwm { height: .8125rem; width: auto; display: block; color: var(--ink); margin-top: 1px; }
.bgwm svg { height: 100%; width: auto; display: block; }
.nav .links a { color: var(--muted); text-decoration: none; margin-left: 1.625rem; font-size: .9375rem; transition: color .2s var(--e-out); }
.nav .links a:hover { color: var(--ink); }
.nav .links a.cta { color: #fff; background: var(--ink); padding: .5625rem 1rem; border-radius: 999px; }
.nav.compact { padding-top: .5rem; padding-bottom: .5rem; background: rgba(244, 241, 234, .95); box-shadow: 0 1px 0 rgba(20, 24, 29, .08); }
.nav.compact .brand .mk { width: 1.625rem; height: 1.625rem; }
.nav.compact .brand .w { font-size: 1.125rem; }
.nav.compact .by { display: none; }
.nav.compact .links a { font-size: .875rem; }

/* ---------- the email box (both of them) ---------- */
.capture { display: flex; gap: .5rem; max-width: 31.25rem; background: #fff; border-radius: .875rem; padding: .375rem; box-shadow: var(--sh2); position: relative; }
.capture input[type="email"] { flex: 1; border: 0; outline: 0; padding: .625rem .75rem; font-size: 1rem; background: transparent; min-width: 0; color: var(--ink); }
.capture input[type="email"]:focus-visible { outline: 2px solid var(--btn); border-radius: .5rem; }
.capture button { border: 0; background: var(--btn); color: #fff; font-weight: 600; border-radius: .625rem; padding: .75rem 1.125rem; cursor: pointer; white-space: nowrap; transition: background .2s var(--e-out), transform .15s var(--e-out); }
.capture button:hover { background: var(--btnh); }
.capture button:active { transform: scale(.98); }
.capture button[disabled] { opacity: .7; cursor: default; }
/* the honeypot: off screen for people, present for robots */
.capture .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.under { font-size: .8125rem; color: var(--muted); margin-top: .625rem; }
.thanks { display: none; font-weight: 600; color: var(--sage); margin-top: .75rem; }
.thanks.show, .thanks:target { display: block; }
form.capture.sent, form.capture:has(+ .thanks:target) { display: none; }
.err { display: none; font-size: .8125rem; color: var(--amber); margin-top: .625rem; }
.err.show { display: block; }

/* ---------- one section per screen, soft snap, lean in and out ---------- */
html { scroll-snap-type: y proximity; }
.snap { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 7.5rem 0 5.5rem; scroll-snap-align: start; }
.hero.snap, .final.snap, .bumffsec.snap { justify-content: center; }
.snap > .wrap { width: 100%; }
@supports (animation-timeline: view()) {
  .lean { animation: lean linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; transform-origin: 50% 50%; }
  @keyframes lean { 0% { transform: scale(.94) translateY(1.5rem); opacity: .5; } 30%, 70% { transform: none; opacity: 1; } 100% { transform: scale(.94) translateY(-1.5rem); opacity: .5; } }
}
[data-maxvh] { margin-left: auto; margin-right: auto; width: 100%; }
/* a wide, short window (a 1512x820 laptop, a 16:9 monitor): less air above and below each section, so the logo wall and the levels still fit one screen */
@media (min-width: 900px) and (min-aspect-ratio: 16/9.5) { .snap { padding: 4rem 0 3rem; } .hero.snap { padding: 5rem 0 2rem; } }

/* ---------- hero: text in a narrow column, the three devices large ---------- */
.hero.snap { display: grid; grid-template-columns: .78fr 1.22fr; gap: 3rem; align-items: center; text-align: left; padding: 6rem 0 3rem; }
.hero .htext h1 { font-size: 2.75rem; font-weight: 800; line-height: 1.06; max-width: none; margin: 0; }
.hero .htext .sub { font-size: 1.0625rem; color: var(--muted); margin: 1rem 0 0; max-width: none; }
.hero .htext .capture { margin: 1.5rem 0 0; }
.hero .htext .under { text-align: left; }
.hero .devices { margin: 0; max-width: none; position: relative; }
.devices .d-desk { width: 86%; margin: 0 auto; }
.devices .d-pad { position: absolute; left: -2%; bottom: -6%; width: 30%; }
.devices .d-phone { position: absolute; right: 0; bottom: -8%; width: 17%; }

/* ---------- the device frames (PX: scaled by a transform) ---------- */
.shot { position: relative; width: 100%; }
.shot > .scaler { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.browser { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--sh3); border: 1px solid rgba(20, 24, 29, .07); }
.browser .bar { height: 38px; background: #F1EDE5; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #DAD4C8; display: block; }
.browser .bar .url { margin-left: 18px; background: #fff; border-radius: 7px; height: 22px; width: 360px; font: 12px var(--body); color: var(--faint); display: flex; align-items: center; padding: 0 10px; }
.pad { background: #1b1f25; border-radius: 34px; padding: 18px; box-shadow: var(--sh3); }
.pad .glass { border-radius: 18px; overflow: hidden; background: #fff; }
.phonef { background: #14181D; border-radius: 48px; padding: 12px; box-shadow: var(--sh3); }
.phonef .glass { border-radius: 38px; overflow: hidden; background: #fff; position: relative; }
.phonef .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; border-radius: 14px; background: #14181D; z-index: 5; }

/* ===== the app (PX zone, start) ===== */
.app { display: grid; grid-template-columns: 212px 1fr; font-size: 13px; line-height: 1.55; color: var(--ink); background: #fff; position: relative; font-family: var(--body); }
.app.ipad { grid-template-columns: 64px 1fr; }
.app.phone { grid-template-columns: 1fr; }
.app .h3, .app .h4 { font-family: var(--head); letter-spacing: -.028em; margin: 0; line-height: 1.06; }
.side { background: #F8F6F1; border-right: 1px solid var(--line); padding: 16px 12px; }
.side .co { display: flex; gap: 9px; align-items: center; margin: 4px 6px 18px; }
.side .co .mk { display: block; }
.side .co b { font-family: var(--head); font-size: 14px; display: block; line-height: 1.1; }
.side .co small { font-size: 11px; color: var(--muted); }
.side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #3b3833; font-size: 13px; margin-bottom: 2px; }
.side a svg { flex: 0 0 16px; }
.side a.on { background: #fff; box-shadow: var(--sh1); font-weight: 600; color: var(--ink); }
.side a.on svg { color: var(--btn); }
.side .grp { font-size: 11px; color: var(--faint); margin: 16px 10px 6px; }
.app.ipad .side .co b, .app.ipad .side .co small, .app.ipad .side a span, .app.ipad .side .grp { display: none; }
.app.ipad .side a { justify-content: center; }
.app.phone .side { display: none; }
.app .main { padding: 22px 26px 26px; min-width: 0; }
.app.phone .main { padding: 54px 16px 86px; }
.mh { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.mh .h3 { font-size: 24px; font-weight: 800; }
.mh .d { color: var(--muted); font-size: 12px; }
.app.phone .mh { flex-direction: column; align-items: flex-start; }
.app .grid { display: grid; gap: 12px; margin-top: 16px; }
.k4 { grid-template-columns: repeat(4, 1fr); }
.app.phone .k4 { grid-template-columns: 1fr 1fr; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; position: relative; overflow: hidden; }
.tile .l { font-size: 11.5px; color: var(--muted); }
.tile .n { font-family: var(--head); font-weight: 800; font-size: 24px; margin-top: 3px; letter-spacing: -.02em; }
.tile .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tile svg.spark { position: absolute; right: 10px; top: 12px; width: 64px; height: 24px; }
.app.phone .tile svg.spark { display: none; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: 11px; border-radius: 999px; padding: 1px 6px; }
.d-up { background: var(--sage2); color: var(--sage); }
.d-warn { background: var(--amber2); color: var(--amber); }
.d-flat { background: #EEEAE2; color: var(--muted); }
.app .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.app .card .h4 { margin: 0 0 8px; font: 600 13px var(--body); display: flex; justify-content: space-between; align-items: center; letter-spacing: 0; line-height: 1.55; }
.app .card .h4 span { font-weight: 500; color: var(--faint); font-size: 11.5px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.p-amber { background: var(--amber2); color: var(--amber); }
.p-blue { background: var(--blue3); color: var(--bday); }
.p-sage { background: var(--sage2); color: var(--sage); }
.p-grey { background: #EEEAE2; color: var(--muted); }
.av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; flex: 0 0 24px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; padding: 6px 6px; border-bottom: 1px solid var(--line); }
table.t td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.t td.r, table.t th.r { text-align: right; }
.app.phone .hide-phone { display: none !important; }
.app.ipad .hide-pad { display: none !important; }
.bar-h { height: 8px; border-radius: 4px; background: #EEEAE2; overflow: hidden; }
.bar-h i { display: block; height: 100%; border-radius: 4px; background: var(--btn); }
.fab { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 10px; z-index: 4; }
.fab .ask { height: 46px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 600; box-shadow: var(--sh2); }
.fab .bang { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 18px var(--head); color: var(--amber); box-shadow: var(--sh2); }
.app.phone .fab .ask span { display: none; }
.app.phone .fab .ask { padding: 0 14px; }
.tabbar { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: #fff; border-top: 1px solid var(--line); justify-content: space-around; align-items: center; font-size: 10px; color: var(--faint); z-index: 3; }
.tabbar div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tabbar .on { color: var(--btn); font-weight: 600; }
.app.phone .tabbar { display: flex; }
.app.phone .fab { bottom: 76px; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 360px; background: #fff; border-left: 1px solid var(--line); box-shadow: -20px 0 40px rgba(20, 24, 29, .08); padding: 18px; z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.qb { align-self: flex-end; background: var(--btn); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; max-width: 85%; }
.ab { border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 12px; }
.src { font-size: 11px; color: var(--faint); margin-top: 8px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 11.5px; display: inline-block; margin: 0 4px 6px 0; background: #fff; }
.chip.act { background: var(--ink); color: #fff; border-color: var(--ink); }
.askin { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; color: var(--faint); margin-top: auto; display: flex; justify-content: space-between; }
.dl { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: #3b3833; background: #fff; }
/* the team section's soft highlight on the phone: a glow, nothing moves */
[data-hl] { transition: box-shadow .45s var(--e-out); }
[data-hl].hl { box-shadow: 0 0 0 3px rgba(74, 144, 232, .55), 0 10px 30px rgba(47, 111, 196, .25); }
/* ===== the app (PX zone, end) ===== */

/* ---------- section furniture ---------- */
.show h2, .sec h2 { font-size: 2rem; font-weight: 800; line-height: 1.12; text-align: center; }
.show .lead, .sec .lead { font-size: 1.0625rem; color: var(--muted); text-align: center; max-width: 36em; margin: 1rem auto 0; line-height: 1.55; text-wrap: balance; }
/* split sections: text one side, big picture the other */
.split2 { display: grid; grid-template-columns: 25rem 1fr; gap: 4rem; align-items: center; }
.split2.rev { grid-template-columns: 1fr 25rem; }
.split2 h2 { text-align: left; }
.split2 .lead { text-align: left; margin: 1rem 0 0; max-width: none; text-wrap: initial; }
.split2 .stage { margin: 0; justify-content: center; }
.split2 .wide { margin: 0; max-width: none; }

/* ---------- Take a look around: pills in fixed grids, a stage of fixed height ---------- */
.controls { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; margin-top: 2rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; background: #fff; border-radius: 1.125rem; padding: .25rem; box-shadow: var(--sh1); position: relative; }
.seg button { border: 0; background: transparent; padding: .4375rem .6875rem; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 500; font-size: .875rem; text-align: center; position: relative; z-index: 1; transition: color .25s var(--e-out); }
.seg button[aria-selected="true"] { color: #fff; }
.seg .thumb { position: absolute; top: .25rem; border-radius: 999px; background: var(--ink); transition: left .35s var(--e-out), width .35s var(--e-out), top .35s var(--e-out), height .35s var(--e-out); z-index: 0; }
.stage { margin-top: 1.25rem; position: relative; display: flex; justify-content: center; align-items: center; height: var(--stageh, auto); }
.stage .frame { width: 100%; max-width: 100%; }
/* without JavaScript nothing can scale the screens: show each at its drawn size, scrollable, rather than nothing */
html:not(.js) .shot { overflow: auto; }
html:not(.js) .shot > .scaler { position: static; transform: none; }
.caption { text-align: left; margin: 1rem 0 0; color: var(--muted); min-height: 4.8em; font-size: .9375rem; }
.caption b { color: var(--ink); }
.stage .frame.swap { animation: slidein .5s var(--e-out); }
@keyframes slidein { from { opacity: 0; transform: translateX(1.625rem); } to { opacity: 1; transform: none; } }

/* ---------- A view for everyone: dark band, three devices overlapping, captions beneath ---------- */
.views { background: var(--carbon); color: var(--ivory); }
.views h2 { color: var(--ivory); }
.views .lead { color: #bdb6aa; }
.vstage { position: relative; margin-top: 2.5rem; }
.vstage .v-desk { width: 68%; margin: 0 auto; }
.vstage .v-phone { position: absolute; left: 4%; bottom: -4%; width: 14%; z-index: 2; }
.vstage .v-pad { position: absolute; right: 2%; bottom: -6%; width: 27%; z-index: 2; }
.vcaps { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 2rem; margin-top: 2.5rem; text-align: center; color: #bdb6aa; font-size: .9375rem; }
.vcaps b { display: block; color: var(--ivory); font-family: var(--head); font-size: 1.125rem; margin-bottom: .25rem; }

/* ---------- Your team, in their pocket: the phone in the middle, four panels round it ---------- */
.team { background: #fff; }
.orbit { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: center; margin-top: 2.5rem; }
.orbit .ph { width: 18.75rem; }
.orbit .ph[data-maxvh] { width: 18.75rem; }
.orbit .col { display: flex; flex-direction: column; gap: 1.5rem; }
.call { background: var(--paper); border-radius: 1rem; padding: 1.5rem; cursor: pointer; transition: background .3s var(--e-out), box-shadow .3s var(--e-out); border: 0; text-align: left; font: inherit; color: inherit; width: 100%; display: block; }
.call b { display: flex; gap: .625rem; align-items: center; font-family: var(--head); font-size: 1.1875rem; justify-content: flex-start; }
.call b svg { color: var(--btn); width: 1.375rem; height: 1.375rem; flex: 0 0 1.375rem; }
.call span { display: block; color: var(--muted); margin-top: .375rem; }
.call.on { background: #F7F4EE; box-shadow: 0 0 0 1.5px rgba(47, 111, 196, .45), var(--sh1); }

/* ---------- Ask it anything ---------- */

/* ---------- Works with what you've got: ten categories and the API card ---------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 2.25rem; }
.cat { background: #fff; border-radius: 1rem; padding: 1rem 1.125rem; }
.cat h3 { margin: 0 0 .75rem; font: 600 .875rem var(--body); color: var(--ink); letter-spacing: 0; line-height: 1.55; }
.cat .ls { display: flex; flex-wrap: wrap; gap: .5rem .875rem; margin: 0; padding: 0; list-style: none; }
.cat .lg { display: flex; align-items: center; gap: .4375rem; font-size: .8125rem; color: #6b665f; position: relative; }
.cat .lg svg, .cat .lg img.mk { width: 1rem; height: 1rem; flex: 0 0 1rem; display: block; }
.cat .lg img.mk { border-radius: .25rem; }
.cat .lg svg { fill: currentColor; transition: fill .25s var(--e-out), color .25s var(--e-out); }
.cat .lg:hover svg { fill: var(--c); color: var(--c); }
.cat .lg .tx { width: 1rem; height: 1rem; border-radius: .25rem; background: #E9E4DA; color: #5C5750; font: 700 .5625rem var(--head); display: flex; align-items: center; justify-content: center; flex: 0 0 1rem; }
.cat .lg.used::after { content: ""; width: .3125rem; height: .3125rem; border-radius: 50%; background: var(--btn); margin-left: -.1875rem; align-self: flex-start; }
.cat.api { grid-column: span 2; background: var(--carbon); color: var(--ivory); display: flex; flex-direction: column; justify-content: space-between; }
.cat.api h3 { color: var(--ivory); font-size: 1rem; font-family: var(--head); font-weight: 700; }
.cat.api p { color: #bdb6aa; font-size: .875rem; margin: 0 0 .75rem; }
.cat.api .lg { color: #bdb6aa; }
.logonote { display: flex; align-items: center; gap: .5rem; justify-content: center; margin-top: 1.25rem; color: var(--muted); font-size: .875rem; }
.logonote i { width: .375rem; height: .375rem; border-radius: 50%; background: var(--btn); display: inline-block; flex: 0 0 .375rem; }

/* ---------- Bumff: an advert for something else ---------- */
.bumffsec { background: var(--bumff); }
.bumffad { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; color: #EFEAE0; }
.bumffad .soon { display: flex; align-items: center; gap: .875rem; }
.bumffad .soon .pillsoon { border: 1.5px solid var(--brass); color: #E6C48F; border-radius: 999px; padding: .3125rem .75rem; font-size: .8125rem; font-weight: 600; }
.bumffad .from { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: #B8C7BF; }
.bumffad .from .bgwm { color: #EFEAE0; height: .875rem; }
.bumffsec .bumffad h2 { font-size: 3.5rem; letter-spacing: -.04em; margin-top: 1.375rem; color: #fff; text-align: left; line-height: 1.06; }
/* SITE-031.1: the Bumff mark sits left of the heading at 64px with an 18px gap; a faint ivory edge and a soft shadow keep the green tile
   from vanishing into the green band (mock-up v13) */
.bumffad h2.bumffh { display: flex; align-items: center; gap: 1.125rem; }
.bumffad h2.bumffh .mk { width: 4rem; height: 4rem; flex: 0 0 4rem; display: block; border-radius: .875rem; box-shadow: 0 0 0 1.5px rgba(232, 226, 214, .28), 0 10px 28px rgba(0, 0, 0, .3); }
.bumffad .bt { font-family: var(--head); font-weight: 700; font-size: 1.5rem; margin-top: .5rem; color: #fff; }
.bumffad .bd { color: #B8C7BF; margin-top: .875rem; font-size: 1.0625rem; max-width: 30em; }
.bumffad .capture { margin-top: 1.75rem; background: rgba(255, 255, 255, .08); box-shadow: none; border: 1px solid rgba(255, 255, 255, .14); }
.bumffad .capture input[type="email"] { color: #fff; }
.bumffad .capture input[type="email"]::placeholder { color: #9FB2A8; }
.bumffad .capture button { background: var(--brass); color: #1E1A12; }
.bumffad .capture button:hover { background: #D7A65C; }
.bumffad .thanks { color: #cfe3d4; }
.bumffad .err { color: #E6C48F; }
.quote { background: #FBF8F2; color: var(--ink); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); transform: rotate(-2.5deg); max-width: 27.5rem; margin-left: auto; }
.quote .qh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .75rem; border-bottom: 2px solid var(--ink); }
.quote .qh b { font-family: var(--head); font-size: 1.125rem; }
.quote .qh span { font-size: .8125rem; color: var(--muted); }
.quote .ql, .quote .qt { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.quote .qt { border-bottom: 0; font-size: 1rem; }
.quote .qt b { font-family: var(--head); font-size: 1.375rem; }
.quote .qb2 { display: flex; gap: .5rem; margin-top: .75rem; }
.quote .send { background: var(--bumff); color: #fff; padding: .5rem .875rem; border-radius: .5625rem; font-weight: 600; font-size: .8125rem; }
.quote .po { border: 1px solid var(--line); padding: .5rem .875rem; border-radius: .5625rem; font-size: .8125rem; }

/* ---------- Go as far as you want: the climb (SITE-035, rules further down) ---------- */

/* ---------- Looked after, on your terms ---------- */
.care { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.care .c { background: #fff; border-radius: 1rem; padding: 2rem; box-shadow: var(--sh2); }
.care h3 { font-size: 1.5rem; font-weight: 800; }
.care p { color: var(--muted); margin-top: .625rem; font-size: 1rem; }
.mock { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: .875rem; padding: 1.25rem; background: var(--paper); }
.mock .t { font-weight: 600; }
.mock .box { margin-top: .5rem; background: #fff; border: 1px solid var(--line); border-radius: .625rem; padding: .625rem; color: var(--muted); font-size: .875rem; }
.mock .sub { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
.mock .btns { display: flex; gap: .5rem; margin-top: .75rem; }
.mock .btns span { padding: .4375rem .75rem; border-radius: .5625rem; font-size: .8125rem; font-weight: 600; }
.mock .btns .b-blue { background: var(--btn); color: #fff; }
.mock .btns .b-ink { background: var(--ink); color: #fff; }
.mock .btns .b-quiet { color: var(--muted); }
.mock .btns .b-line { border: 1px solid var(--line); background: #fff; }

/* ---------- the proof band ---------- */
.proof { background: var(--carbon); color: var(--ivory); }
.proof h2 { color: var(--ivory); }
.proof .lead { color: #bdb6aa; }
.big { font-family: var(--head); font-weight: 800; font-size: clamp(4rem, 9vw, 7.5rem); letter-spacing: -.05em; line-height: 1; text-align: center; margin-top: 2.5rem; }
.big small { font-size: .2em; letter-spacing: 0; font-weight: 600; color: #bdb6aa; margin-left: .5rem; }
.stack { display: flex; height: 1rem; border-radius: .5rem; overflow: hidden; margin: 2.25rem auto 0; max-width: 56.25rem; gap: 2px; }
.stack i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--e-out); }
.stack i.grown { transform: scaleX(1); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem 1.375rem; margin: 1rem auto 0; max-width: 56.25rem; font-size: .8125rem; color: #cfc8bc; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: .4375rem; }
.legend i { width: .625rem; height: .625rem; border-radius: .1875rem; display: inline-block; }

/* ---------- the last email box, and the footer ---------- */
.final { text-align: center; }
.final .capture { margin: 1.875rem auto 0; }
footer.foot { padding: 1.875rem 0 2.5rem; font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); }
footer.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; align-items: center; }
footer.foot a { color: inherit; }
/* APPS-077.4: the small Sign in link beside the email, as on every other page's footer */
footer.foot .foot__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
footer.foot .brand .w { font-size: 1.125rem; }

/* ---------- reveal (staggered, once) ---------- */
html.js .rv { opacity: 0; transform: translateY(.875rem); transition: opacity .7s var(--e-out), transform .7s var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.js .rv.in { opacity: 1; transform: none; }

/* ---------- SITE-035: Ask, straight after the hero (mock-up v16) ---------- */
.askhero .chat { background: #fff; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(20, 24, 29, .05), 0 1.5rem 3.75rem rgba(20, 24, 29, .12); overflow: hidden; display: flex; flex-direction: column; height: min(33.75rem, 57vh); }
.askhero .ch { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--line); font-family: var(--head); font-weight: 700; font-size: 1rem; }
.askhero .chmark .mk { display: block; width: 1.5rem; height: 1.5rem; }
.askhero .chsub { margin-left: auto; font-family: var(--body); font-weight: 400; font-size: .8125rem; color: var(--muted); }
.askhero .cb { flex: 1; padding: 1.375rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .875rem; background: #FAF8F3; overflow: hidden; min-height: 0; }
.askhero .msg { opacity: 0; transform: translateY(.5rem); transition: opacity .35s var(--e-out), transform .35s var(--e-out); }
.askhero .msg.in { opacity: 1; transform: none; }
.askhero .msg.q { align-self: flex-end; background: var(--btn); color: #fff; padding: .625rem .9375rem; border-radius: 1rem 1rem .25rem 1rem; max-width: 78%; font-size: .9375rem; }
.askhero .msg.a { align-self: flex-start; background: #fff; border: 1px solid var(--line); padding: .875rem 1rem; border-radius: 1rem 1rem 1rem .25rem; width: 88%; font-size: .90625rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(20, 24, 29, .04); }
.askhero .msg.a p + p, .askhero .msg.a .al + p, .askhero .msg.a .bars + p, .askhero .msg.a .hb + p { margin-top: .5rem; }
.askhero .al { margin-top: .5rem; }
.askhero .al div { display: flex; justify-content: space-between; gap: .75rem; padding: .375rem 0; border-top: 1px solid var(--line); font-size: .84375rem; }
.askhero .al div span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.askhero .bars { display: flex; align-items: flex-end; gap: .875rem; height: 5.5rem; margin: .625rem 0 .125rem; padding-bottom: 1.125rem; position: relative; }
.askhero .bars i { flex: 1; background: var(--blue3); border-radius: .3125rem .3125rem 0 0; position: relative; }
.askhero .bars i.hl { background: #E8C9A0; }
.askhero .bars i em { position: absolute; bottom: -1.125rem; left: 0; right: 0; text-align: center; font-style: normal; font-size: .71875rem; color: var(--muted); }
.askhero .bars i b { position: absolute; top: -1.0625rem; left: 0; right: 0; text-align: center; font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.askhero .hb { margin-top: .5rem; }
.askhero .hb div { display: grid; grid-template-columns: 9.375rem 1fr 3.375rem; gap: .625rem; align-items: center; font-size: .8125rem; padding: .1875rem 0; }
.askhero .hb i { height: .5rem; border-radius: .25rem; background: var(--btn); display: block; }
.askhero .hb span:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.askhero .typing { display: inline-flex; gap: .25rem; padding: .25rem .125rem; }
.askhero .typing span { width: .375rem; height: .375rem; border-radius: 50%; background: #B9B3A8; animation: tdot 1s infinite; }
.askhero .typing span:nth-child(2) { animation-delay: .15s; }
.askhero .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.askhero .ci { display: flex; gap: .625rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid var(--line); }
.askhero .field { flex: 1; border: 1px solid var(--line); border-radius: .75rem; padding: .625rem .875rem; font-size: .90625rem; min-height: 2.625rem; display: flex; align-items: center; color: var(--ink); }
.askhero .caret { display: inline-block; width: 2px; height: 1.125rem; background: var(--btn); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.askhero .send { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--btn); color: #fff; display: grid; place-items: center; flex: 0 0 2.5rem; }
.askhero .try { margin-top: 1.125rem; font-size: .875rem; color: var(--muted); }
.askhero .chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.askhero .chips button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .375rem .8125rem; font: inherit; font-size: .875rem; cursor: pointer; color: var(--ink); transition: border-color .2s, background .2s, color .2s; }
.askhero .chips button:hover { border-color: var(--blue2); }
.askhero .chips button.on { border-color: var(--btn); background: #EEF3FB; color: var(--btn); }
.askhero .chips button:focus-visible { outline: 2px solid var(--btn); outline-offset: 2px; }
.askhero .askpts { list-style: none; margin: 1.125rem 0 0; padding: 0; display: grid; gap: 0; }
.askhero .askpts li { padding: .4375rem 0 .4375rem 1.375rem; border-top: 1px solid var(--line); font-size: .90625rem; position: relative; }
.askhero .askpts li::before { content: ""; position: absolute; left: 2px; top: .8125rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--btn); }

/* ---------- SITE-035: the climb up the fell, and the checks card ---------- */
.climb h2, .climb .lead { text-align: center; }
.climb .lead { max-width: 44em; margin-left: auto; margin-right: auto; }
.climb .fell { position: relative; height: min(15.625rem, 27vh); margin-top: 2.125rem; }
.climb .fell svg.hill { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 1rem; }
.climb #climbed { transition: stroke-dasharray .7s var(--e-out); }
.climb .wp { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); }
.climb .wp .pin { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; border: 3px solid var(--btn); transition: background .25s, box-shadow .25s, transform .25s; }
.climb .wp.reached .pin { background: var(--btn); }
.climb .wp.on .pin { background: var(--btn); box-shadow: 0 0 0 .4375rem rgba(47, 111, 196, .18); transform: scale(1.15); }
.climb .wp .lab { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: var(--head); font-weight: 700; font-size: 1rem; color: var(--muted); transition: color .25s; }
.climb .wp.on .lab, .climb .wp.reached .lab { color: var(--ink); }
.climb .wp .lab small { display: block; font-family: var(--body); font-weight: 400; font-size: .78125rem; color: var(--muted); }
.climb .wp:focus-visible { outline: none; }
.climb .wp:focus-visible .pin { outline: 2px solid var(--btn); outline-offset: 4px; }
.climb .says { display: grid; grid-template-columns: 1fr 16.25rem; gap: 1.75rem; align-items: center; margin-top: 1.375rem; }
.climb .saybox { background: #fff; border-radius: 1rem; box-shadow: var(--sh2); padding: 1.125rem 1.25rem; display: flex; gap: .875rem; align-items: flex-start; min-height: 5.75rem; }
.climb .saymark .mk { display: block; width: 2.25rem; height: 2.25rem; }
.climb .saybox small { color: var(--muted); font-size: .8125rem; }
.climb .saybox p { font-size: 1.03125rem; margin-top: .25rem; line-height: 1.45; transition: opacity .25s; }
.climb .brain .bt { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
.climb .brain .bt b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.climb .brain .bar { height: .625rem; background: var(--blue3); border-radius: .3125rem; margin-top: .5rem; overflow: hidden; }
.climb .brain .bar i { display: block; height: 100%; width: 16.6%; background: linear-gradient(90deg, #4A90E8, var(--btn)); border-radius: .3125rem; transition: width .7s var(--e-out); }
.climb .brain small { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--muted); min-height: 2.6em; }
.climb .check2 { display: flex; gap: .875rem; align-items: flex-start; max-width: 51.25rem; margin: 1.5rem auto 0; padding: .875rem 1.125rem; border-radius: .875rem; background: var(--sage2); }
.climb .check2 .tick { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.climb .check2 p { font-size: .9375rem; line-height: 1.5; }
@media (max-width: 899.98px) {
  /* phones: the window grows to the tallest answer (the mock-up's fixed 460px clipped four of the five at 390), so nothing jumps between answers */
  .askhero .chat { height: auto; }
  .askhero .cb { min-height: 34rem; }
  .askhero .hb div { grid-template-columns: 6.875rem 1fr 2.875rem; }
  .askhero .chsub { display: none; }
  .climb .says { grid-template-columns: 1fr; }
  .climb .fell { height: 12.5rem; }
  .climb .wp .lab { font-size: .75rem; bottom: 1.5rem; }
  .climb .wp .lab small { display: none; }
}

/* ---------- v17 (SITE-036): every section centred when it settles; smaller, roomier nav ---------- */
/* the extra 3rem on top allows for the fixed nav, so the content sits centred in the window below it */
@media (min-width: 900px) {
  .snap, .hero.snap { justify-content: center; padding: 6rem 0 3rem; }
  /* the hero is seen with the taller resting bar (about 5.3rem), so it takes that much on top instead of the compact bar's 3rem */
  .hero.snap { padding-top: 8.25rem; }
  .nav { padding-top: 1.375rem; padding-bottom: 1.375rem; }
  .nav .links a { font-size: .84375rem; margin-left: 1.5rem; }
  .nav .links a.cta { padding: .5rem .9375rem; }
  .nav.compact { padding-top: .875rem; padding-bottom: .875rem; }
  .nav.compact .links a { font-size: .78125rem; margin-left: 1.375rem; }
  .nav.compact .links a.cta { padding: .375rem .8125rem; }
  .nav.compact .brand .mk { width: 1.5rem; height: 1.5rem; }
  .nav.compact .brand .w { font-size: 1rem; }
}

/* ---------- less motion: everything at rest, no snap, no lean ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lean { animation: none !important; }
  html.js .rv { opacity: 1; transform: none; }
  .stack i { transform: none; }
  .stage .frame.swap { animation: none; }
}

/* ---------- phones and tablets: fluid, stacked, no snap ---------- */
@media (max-width: 899.98px) {
  html { scroll-snap-type: none; }
  .lean { animation: none !important; }
  .snap { min-height: 0; padding: 4rem 0; }
  .hero.snap { padding: 6rem 0 3rem; }
  .hero.snap, .split2, .split2.rev { grid-template-columns: 1fr; }
  .split2.rev .wide { order: 2; }
  .hero .htext h1 { font-size: 2.25rem; }
  .stage { height: auto; }
  .cats { grid-template-columns: 1fr 1fr; }
  .cat.api { grid-column: span 2; }
  .vstage .v-phone, .vstage .v-pad { display: none; }
  .vstage .v-desk { width: 100%; }
  .vcaps { grid-template-columns: 1fr; text-align: left; }
  .bumffad { grid-template-columns: 1fr; }
  .quote { margin: 0 auto; }
  .orbit { grid-template-columns: 1fr; }
  .orbit .ph, .orbit .ph[data-maxvh] { max-width: 18.75rem; margin: 0 auto; width: 100%; }
  .care { grid-template-columns: 1fr; gap: 2.125rem; }
  .nav .links a:not(.cta) { display: none; }
  .devices .d-pad { display: none; }
  .devices .d-desk { width: 100%; }
  .devices .d-phone { width: 26%; right: -2%; }
  .capture { flex-wrap: wrap; }
  .capture input[type="email"], .capture button { flex: 1 1 100%; }
  .seg button { padding: .4375rem .625rem; font-size: .875rem; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 1rem; }
  .nav { padding-left: 1rem; padding-right: 1rem; }
  .cats { grid-template-columns: 1fr; }
  .cat.api { grid-column: span 1; }
  .bumffsec .bumffad h2 { font-size: 2.75rem; }
}

/* ---------- v18 (SITE-038): thirteen categories in a five-column grid; the link back to BlueGrey ---------- */
.brand a { color: inherit; text-decoration: none; }
.brand .brand__top { display: block; }
a.by { text-decoration: none; color: var(--muted); transition: color .2s var(--e-out); }
a.by:hover, a.by:focus-visible { color: var(--btn); }
a.by::after { content: "\2197"; font-size: .625rem; margin-left: 1px; opacity: .7; }
footer.foot .bglink { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.cat.w2, .cat.api { grid-column: span 2; }
@media (min-width: 900px) {
  .cats { grid-template-columns: repeat(5, 1fr); gap: .625rem; margin-top: 1.75rem; }
  .cat { padding: .8125rem 1rem; }
  .cat h3 { margin-bottom: .5625rem; }
  .cat .ls { gap: .375rem .8125rem; }
}
@media (max-width: 899px) {
  .cats { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .cat.w2, .cat.api { grid-column: span 2; }
}

/* ---------- v19 (SITE-042): two more example businesses, each laid out its own way ----------
   The app screens stay in PX (a second PX zone): Tarnside Marquees on a top-bar shell (.app.hire),
   Scarthwaite Lifts on a dark rail (.app.lift). Their own colours sit in the custom properties on purpose. */
.app.hire { display: block; background: #FBF9F4; --btn: #2E6B4F; --bday: #245C3E; --blue2: #9CC4AE; --blue3: #DCEBE2; }
.hire .htop { display: flex; align-items: center; gap: 26px; padding: 14px 26px; background: #fff; border-bottom: 1px solid var(--line); }
.hire .hco { display: flex; gap: 10px; align-items: center; }
.hire .hco b { font-family: Georgia, "Times New Roman", serif; font-size: 17px; display: block; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.hire .hco small { font-size: 10.5px; color: var(--faint); }
.hlogo { width: 30px; height: 30px; border-radius: 50%; background: #2E6B4F; color: #F4F1EA; display: flex; align-items: center; justify-content: center; font: 700 15px Georgia, serif; }
.hire .htop .hnav { display: flex; gap: 4px; flex: 1; }
.hire .htop .hnav a { padding: 7px 14px; border-radius: 999px; color: #5C5750; font-size: 13px; }
.hire .htop .hnav a.on { background: #2E6B4F; color: #fff; font-weight: 600; }
.hwho { display: flex; gap: 10px; align-items: center; }
.hsearch { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--faint); font-size: 12px; }
.hire .main { padding: 20px 26px; }
.hire .mh .h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 25px; letter-spacing: -.01em; }
.hire .card, .hire .tile { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 24, 29, .06), 0 6px 18px rgba(20, 24, 29, .04); }
.hire .tile .n { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.app.ipad.hire .htop { gap: 14px; padding: 12px 18px; }
.app.ipad.hire .hsearch span { display: none; }
.app.phone.hire .htop { padding: 52px 16px 12px; justify-content: space-between; }
.app.phone.hire .htop .hnav, .app.phone.hire .hsearch { display: none; }
.app.phone.hire .main { padding: 14px 16px 86px; }
.act { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
.ai { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.ai.o, .ai.a { background: #F6E7D3; color: #A86A24; }
.ai.b { background: var(--blue3); color: var(--bday); }
.ai.g { background: #E2EEE5; color: #4F7F5B; }
.ai.n { background: #EEEAE2; color: #5C5750; }
.at b { display: block; font-weight: 600; font-size: 12.5px; }
.at span { font-size: 11.5px; color: #8a847c; }
.ar { display: flex; gap: 6px; align-items: center; }
.abtn { border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: 11px; font-weight: 600; background: #fff; color: var(--ink); white-space: nowrap; }
.app.phone .ar .abtn { display: none; }
.dt { width: 44px; font-size: 11px; font-weight: 600; color: var(--bday); background: var(--blue3); border-radius: 7px; padding: 4px 0; text-align: center; flex: 0 0 44px; }
.st { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #EEEAE2; }
.st.d { background: var(--btn); }
.st.w { background: #E3B47A; }
.st.l { background: #B4483C; }
.tl { position: relative; height: 196px; display: grid; grid-template-columns: repeat(10, 1fr); font-size: 11px; color: #8a847c; }
.tl > span { border-left: 1px dashed rgba(20, 24, 29, .1); padding-left: 6px; }
.tlbar { position: absolute; left: 0; right: 0; top: 38px; height: 6px; border-radius: 3px; background: #EEEAE2; }
.tlbar i { display: block; height: 100%; border-radius: 3px; background: var(--btn); }
.tlm { position: absolute; transform: translateX(-6px); display: flex; flex-direction: column; gap: 4px; width: max-content; max-width: 150px; font-size: 11.5px; color: var(--ink); line-height: 1.3; }
.tlm b { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--blue2); position: absolute; left: 0; box-sizing: border-box; }
.tlm em { position: absolute; left: 5px; width: 1px; background: rgba(20, 24, 29, .12); }
.tlm span { padding-left: 0; white-space: normal; }
.tlm.e { transform: translateX(calc(-100% + 12px)); text-align: right; }
.tlm.e b { left: auto; right: 0; border-color: var(--ink); background: var(--ink); }
.tlm.e em { left: auto; right: 5px; }
.tlm.e span { font-weight: 600; }
.tlm.d b { border-color: var(--btn); background: var(--btn); }
.tlm.now b { border-color: #A86A24; background: #A86A24; }
.tlm.now span { font-weight: 700; color: #A86A24; }
.tlm.a span { color: var(--bday); }
.mailp { background: #FBF9F4; border-radius: 12px; padding: 12px 14px; margin-bottom: 6px; }
.mailp .mh2 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.mailp .mh2 span { color: #8a847c; }
.mailp p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #3b3833; }
.mailp u { text-decoration: none; background: var(--blue3); border-radius: 3px; padding: 0 2px; }
.app.lift { grid-template-columns: 72px 1fr; background: #F2F4F5; --btn: #1E7F86; --bday: #16636A; --blue2: #8CC5C9; --blue3: #D5ECEE; }
.lift .rail { background: #14181D; display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 6px; }
.llogo { width: 36px; height: 36px; border-radius: 9px; background: #1E7F86; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 17px var(--head); margin-bottom: 14px; }
.lift .rail a { width: 56px; padding: 9px 0 7px; border-radius: 10px; color: #8A969E; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; }
.lift .rail a.on { background: #1E7F86; color: #fff; }
.lift .main { padding: 0 24px 24px; }
.lstrip { display: flex; justify-content: space-between; align-items: center; margin: 0 -24px 16px; padding: 10px 24px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12px; color: #5C5750; }
.lstrip .live { display: flex; gap: 6px; align-items: center; font-weight: 600; color: var(--bday); }
.lstrip .live i { width: 8px; height: 8px; border-radius: 50%; background: #2FB36B; box-shadow: 0 0 0 3px rgba(47, 179, 107, .2); }
.lift .mh .h3 { font-size: 22px; letter-spacing: -.02em; }
.lift .card, .lift .tile { border-radius: 8px; border: 1px solid #DFE4E6; }
.lift .tile { border-left: 4px solid var(--btn); }
.lift table.t th { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.p-red { background: #F6DEDA; color: #9A3529; }
.app.ipad.lift { grid-template-columns: 64px 1fr; }
.app.ipad.lift .rail a span { display: none; }
.app.ipad.lift .rail a { width: 44px; }
.app.phone.lift { grid-template-columns: 1fr; }
.app.phone.lift .rail { display: none; }
.app.phone.lift .main { padding: 0 16px 86px; }
.app.phone.lift .lstrip { margin: 0 -16px 12px; padding: 50px 16px 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
/* the business buttons are aria-pressed buttons, not tabs */
.seg button[aria-pressed="true"] { color: #fff; }
.caption .bizl { display: block; font-size: .8125rem; color: var(--faint); margin-bottom: .25rem; }

/* ---------- v19 (SITE-042): set up around your business ---------- */
/* SITE-042.3 (mock-up v22): four boxes, one row from 1200px, two by two from 900 to 1199px, stacked below 900px */
.made .mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 900px) and (max-width: 1199px) { .made .mgrid { grid-template-columns: 1fr 1fr; } }
.made .mc { background: #fff; border-radius: 1.125rem; padding: 1.5rem 1.5rem 1.625rem; box-shadow: var(--sh1); text-align: left; }
.made .mc .mi { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--blue3); color: var(--btn); display: flex; align-items: center; justify-content: center; margin-bottom: .875rem; }
.made .mc .mi svg { width: 1.375rem; height: 1.375rem; }
.made .mc h3 { font-size: 1.1875rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.01em; }
.made .mc p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.55; }

/* ---------- v19 to v23 (SITE-042, SITE-045.1): the footer. The cost screens (#cost, #cost2) and their rules went in
   SITE-045.1, when pricing moved to /fellside/pricing/. ---------- */
footer.foot { padding: 2.75rem 0 2.25rem; }
footer.foot .wrap { display: block; }
.ftop { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; }
.fcols { display: grid; grid-template-columns: repeat(3, auto); gap: .75rem 4rem; }
.fcols h2 { margin: 0 0 .625rem; font: 600 .8125rem var(--body); color: var(--ink); letter-spacing: 0; line-height: 1.55; }
.fcols a { display: block; color: var(--muted); text-decoration: none; font-size: .84375rem; margin: 0 0 .4375rem; }
.fcols a:hover { color: var(--btn); }
.flegal { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.125rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--faint); }
.flegal span:last-child { max-width: 46em; }
.flegal a { color: inherit; }
footer.foot .flegal a.bglink { border-bottom: 0; text-decoration: underline; text-underline-offset: 2px; }
/* SITE-045.1 (mock-up v23): the way from "For a fraction of the usual cost" to the pricing page */
.made .mc .mlink { display: block; margin-top: .625rem; color: var(--btn); font-weight: 600; text-decoration: none; }
.made .mc .mlink::after { content: " \2192"; }
.made .mc .mlink:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .made .mgrid { grid-template-columns: 1fr; }
  .fcols { grid-template-columns: 1fr 1fr; }
}

/* ---------- v24 (SITE-045.2, from SITE-044): the ! button shown working, and "Your data is secure." ----------
   The demo is a 9-second CSS loop. It plays only while it is on screen: fellside.js adds .play when it comes into
   view and takes it off when it leaves, which also starts the loop from the beginning each time. Without .play
   (no JavaScript, reduced motion, off screen) it shows the finished state: the panel open and the reply showing.
   The cursor sits on the ! button itself (inside .dbw) and travels in from up and to the left, so it lands on the
   button at any width, with no script measuring the demo. */
.bangi { display: inline-flex; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--amber); align-items: center; justify-content: center; font-size: .8em; vertical-align: .08em; box-shadow: var(--sh1); }
.care p b { color: var(--amber); }
.demo { position: relative; height: 15.5rem; margin-top: 1.25rem; border-radius: .875rem; background: var(--paper); border: 1px solid var(--line); overflow: hidden; font-size: .75rem; }
.dscr { position: absolute; inset: .75rem; }
.dh { display: flex; justify-content: space-between; align-items: baseline; }
.dh b { font: 800 .9375rem var(--head); }
.dh span { color: var(--faint); font-size: .6875rem; }
.dt3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .625rem; }
.dt3 i { font-style: normal; background: #fff; border: 1px solid var(--line); border-radius: .5625rem; padding: .5rem .625rem; font: 800 .9375rem var(--head); }
.dt3 small { display: block; font: 500 .65625rem var(--body); color: var(--faint); margin-bottom: 2px; }
.dbar { height: .625rem; border-radius: .3125rem; background: #E9E4DA; margin-top: .875rem; width: 80%; }
.dbar.s { width: 55%; margin-top: .5rem; }
.dfab { position: absolute; right: .75rem; bottom: .75rem; display: flex; gap: .4375rem; align-items: center; }
.dbw { position: relative; display: inline-flex; z-index: 3; }
.db { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font: 800 .9375rem var(--head); color: var(--amber); box-shadow: var(--sh1); }
.db.sm { width: 1.25rem; height: 1.25rem; font-size: .6875rem; box-shadow: none; }
.da { height: 1.875rem; padding: 0 .75rem; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; font-weight: 600; }
/* the arrow's tip (5,3 of 24) sits on the middle of the ! button */
.dcur { position: absolute; left: 50%; top: 50%; width: 1.375rem; height: 1.375rem; margin: -.172rem 0 0 -.286rem; transform-origin: .286rem .172rem; opacity: 0; pointer-events: none; }
.dpanel { position: absolute; right: .75rem; bottom: 3.25rem; width: min(19rem, 80%); background: #fff; border: 1px solid var(--line); border-radius: .75rem; padding: .625rem; box-shadow: var(--sh2); transform-origin: 100% 100%; z-index: 2; }
.dph { display: flex; gap: .4375rem; align-items: center; font-size: .78125rem; }
.dmsg { margin-top: .5rem; background: var(--paper); border-radius: .5rem; padding: .4375rem .5625rem; color: var(--ink); }
.dchip { display: inline-block; margin-top: .375rem; font-size: .65625rem; color: var(--bday); background: var(--blue3); border-radius: 999px; padding: .125rem .5rem; }
.dsent { display: inline-block; margin: .375rem 0 0 .375rem; font-size: .65625rem; color: var(--sage); font-weight: 600; }
.drep { margin-top: .5rem; background: var(--btn); color: #fff; border-radius: .5rem .5rem .5rem .125rem; padding: .4375rem .5625rem; }
.demo.play .dcur { animation: dcur 9s infinite; }
.demo.play .dfab .db { animation: dpress 9s infinite; }
.demo.play .dt3 i.hot { animation: dhot 9s infinite; }
.demo.play .dpanel { animation: dpanel 9s infinite; }
.demo.play .dmsg { animation: dmsg 9s infinite; }
.demo.play .dchip { animation: dchip 9s infinite; }
.demo.play .dsent { animation: dsent 9s infinite; }
.demo.play .drep { animation: drep 9s infinite; }
@keyframes dcur { 0% { transform: translate(-15rem, -9.5rem); opacity: 0; } 6% { opacity: 1; } 22% { transform: none; } 26% { transform: translateY(.125rem) scale(.85); } 30% { transform: none; } 38% { opacity: 1; } 44%, 100% { opacity: 0; transform: none; } }
@keyframes dpress { 0%, 24% { transform: none; box-shadow: var(--sh1); } 26% { transform: scale(.88); box-shadow: 0 0 0 6px rgba(168, 106, 36, .18); } 30%, 92% { transform: none; box-shadow: 0 0 0 4px rgba(168, 106, 36, .14); } 100% { box-shadow: var(--sh1); } }
@keyframes dpanel { 0%, 28% { opacity: 0; transform: translateY(.625rem) scale(.96); } 33%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(.375rem); } }
@keyframes dmsg { 0%, 38% { opacity: 0; transform: translateY(.25rem); } 43%, 100% { opacity: 1; transform: none; } }
@keyframes dchip { 0%, 48% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes dsent { 0%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
@keyframes drep { 0%, 70% { opacity: 0; transform: translateY(.25rem); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes dhot { 0%, 18%, 95%, 100% { box-shadow: none; } 24%, 90% { box-shadow: 0 0 0 2px #E3B47A; } }
@media (prefers-reduced-motion: reduce) { .dcur { display: none; } .demo * { animation: none !important; } }
.sec3 { list-style: none; margin: 1rem 0 0; padding: 0; }
.sec3 li { position: relative; padding: 0 0 .5rem 1.75rem; font-size: .9375rem; color: var(--muted); }
.sec3 li b { color: var(--ink); font-weight: 600; }
.sec3 li::before { content: ""; position: absolute; left: 0; top: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: .3125rem; background: var(--blue3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23245C9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / .875rem no-repeat; }
#care .mock { margin-top: .875rem; }

/* ---------- SITE-047.2 (SITE-048, option B): the page on phones. Everything here is below 900px, the page's own
   phone breakpoint; above it the swipe rows, dots and fold buttons do not show and nothing else changes. ---------- */
.pcar, .pdots, .pfold { display: none; }
@media (max-width: 899.98px) {
  /* a sideways row must not widen the column it sits in */
  .split2 > *, .orbit > *, .wrap > * { min-width: 0; }
  /* a little less air round each section, so each one is about one phone screen */
  .snap { padding: 3rem 0; }
  /* phones see phone screens: the hero and "A view for everyone" show the phone, not a shrunk computer */
  .devices .d-desk { display: none; }
  .devices .d-phone { position: static; width: 52%; margin: 0 auto; }
  .vstage .v-desk { display: none; }
  .vstage .v-phone { display: block; position: static; width: 52%; margin: 0 auto; }
  /* the swipe row: cards about 86% wide so the next one peeks in, one at a time, native scroll snap */
  .pcar, .made .mgrid[data-car], .care[data-car] { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 1.25rem -2rem 0; padding: .25rem 2rem .5rem; scroll-padding: 0 2rem; position: relative; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pcar::-webkit-scrollbar, .made .mgrid[data-car]::-webkit-scrollbar, .care[data-car]::-webkit-scrollbar { display: none; }
  .pcar > *, .made .mgrid[data-car] > *, .care[data-car] > * { flex: 0 0 86%; scroll-snap-align: center; min-width: 0; }
  .pcar:focus-visible, [data-car]:focus-visible { outline: 2px solid var(--btn); outline-offset: -2px; }
  .pdots { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
  .pdots button { width: 1.5rem; height: 1.5rem; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .pdots button::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #cfc8bc; transition: background .2s var(--e-out); }
  .pdots button.on::after { background: var(--carbon); }
  .pcard { background: #fff; border-radius: 1rem; padding: 1rem; box-shadow: var(--sh1); }
  .pcard__q { font: 700 .9375rem/1.35 var(--head); margin: 0 0 .625rem; }
  .pcard__c { font-size: .875rem; color: var(--muted); margin-top: .625rem; }
  .pcard__c b { color: var(--ink); }
  /* a fold: one tap away, never cut */
  .pfold { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; border: 1px solid var(--line); background: #fff; color: var(--btn); font: 600 .875rem var(--body); border-radius: 999px; padding: .4375rem .875rem; cursor: pointer; }
  .pfold::after { content: "\25BE"; font-size: .75rem; }
  .pfold[aria-expanded="true"]::after { content: "\25B4"; }
  html.js [data-fold]:not([data-fold-rest]):not(.open) { display: none; }
  html.js .cats[data-fold-rest]:not(.open) > .cat:nth-child(n+5) { display: none; }

  /* Ask it anything: the chat is the computer version; the five answers are the swipe cards */
  .askhero .chatcol, .askhero .chips { display: none; }
  .askhero .stext { order: -1; }
  .askcar { margin-top: .75rem; }
  .askcar .pcard__a { font-size: .875rem; line-height: 1.5; }
  .askcar .pcard__a p + p, .askcar .pcard__a .al + p, .askcar .pcard__a .bars + p, .askcar .pcard__a .hb + p { margin-top: .5rem; }
  .askcar .pcard__a .bars { margin-top: 1.5rem; }
  /* Take a look around: the business row stays; the page and screen buttons and the single stage are the
     computer version (they stay for a phone without JavaScript, which cannot build the cards) */
  html.js #look #segPage, html.js #look #segDev, html.js #look .stage, html.js #look .caption .pcap { display: none; }
  html.js #look .caption { min-height: 0; }
  .lookcar .pcard__shot { width: 62%; margin: 0 auto; }
  /* Your team: the phone first, then the first two, the other two one tap away */
  .orbit { gap: 1.25rem; margin-top: 1.5rem; }
  .orbit .ph, .orbit .ph[data-maxvh] { order: -1; max-width: 12.5rem; }
  .orbit .col { gap: .75rem; }
  .call { padding: 1rem 1.125rem; }
  /* Works with what you've got and Looked after: tighter so they fit */
  .care[data-car] .c { padding: 1.5rem; }
  /* the ! demo is narrower here, so its panel wraps more: more room, so the reply stays inside */
  .demo { height: 18.5rem; }
  .dpanel { width: 88%; }
}
@media (max-width: 480px) {
  /* the swipe rows bleed to the screen edge: the page gutter is 1rem here */
  .pcar, .made .mgrid[data-car], .care[data-car] { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; scroll-padding: 0 1rem; }
  .devices .d-phone { width: 46%; }
  .orbit .ph, .orbit .ph[data-maxvh] { max-width: 11rem; }
}

/* ---------- SITE-049.1: on phones, show it is a computer system that also works on iPad and phone ----------
   Below 900px only. The hero and "A view for everyone" show the computer screen (dark bezel, thin laptop base) with
   the iPad overlapping bottom left and the phone bottom right, labelled. "Take a look around" opens on Computer,
   with a Computer / iPad / Phone switch, each card framed like its device, and a full-size viewer for the computer
   and iPad screens. "Your team, in their pocket" keeps its phone. */
.devlabel, .pdev, .pview { display: none; }
@media (max-width: 899.98px) {
  /* the device stack */
  .devices { position: relative; margin-bottom: 3.25rem; }
  .devices .d-desk, .vstage .v-desk { display: block; position: relative; width: 100%; margin: 0; background: #1b1f25; padding: 5px 5px 7px; border-radius: 10px 10px 4px 4px; }
  .devices .d-desk::after, .vstage .v-desk::after { content: ""; position: absolute; left: -10px; right: -10px; bottom: -9px; height: 9px; background: linear-gradient(#c9c4ba, #a9a398); border-radius: 0 0 10px 10px; }
  .devices .d-desk .browser, .vstage .v-desk .browser { border-radius: 6px; box-shadow: none; }
  .devices .d-pad, .vstage .v-pad { display: block; position: absolute; left: -2%; right: auto; bottom: -14%; width: 44%; z-index: 2; }
  .devices .d-phone, .vstage .v-phone { display: block; position: absolute; left: auto; right: -1%; bottom: -18%; width: 26%; margin: 0; z-index: 3; }
  .vstage { margin-top: 1.75rem; margin-bottom: 3.75rem; }
  .devlabel { display: flex; gap: .5rem; justify-content: center; font-size: .78125rem; color: var(--muted); margin: 0; }
  .devlabel b { color: var(--ink); font-weight: 600; }
  .views .vstage .v-desk { box-shadow: 0 0 0 1px rgba(232, 226, 214, .2); }
  .views .devlabel { color: #bdb6aa; }
  .views .devlabel b { color: var(--ivory); }
  /* the device switch */
  html.js .pdev { display: flex; width: 100%; background: #e4dfd5; border-radius: .75rem; padding: 3px; }
  .pdev button { flex: 1; border: 0; background: none; border-radius: .5625rem; padding: .4375rem 0; font: 600 .8125rem var(--body); color: var(--muted); cursor: pointer; display: flex; gap: .375rem; justify-content: center; align-items: center; }
  .pdev button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
  .pdev svg { width: .9375rem; height: .9375rem; }
  /* each card framed like its device */
  .lookcar .pcard__shot { width: 100%; }
  .lookcar .pcard__shot.pf-phone { width: 62%; margin: 0 auto; }
  .lookcar .pf-desk .pzoom { background: #1b1f25; padding: 4px 4px 6px; border-radius: 8px 8px 3px 3px; }
  .lookcar .pf-desk .pzoom::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -7px; height: 7px; background: linear-gradient(#c9c4ba, #a9a398); border-radius: 0 0 8px 8px; }
  .lookcar .pf-desk .browser { border-radius: 4px; box-shadow: none; }
  .lookcar .pf-desk { margin-bottom: 7px; }
  .pzoom { display: block; position: relative; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; text-align: left; }
  .pzoom:focus-visible { outline: 2px solid var(--btn); outline-offset: 3px; }
  .pzoom__t { position: absolute; right: .5rem; top: .5rem; z-index: 2; background: rgba(20, 24, 29, .78); color: #fff; font: 600 .6875rem var(--body); border-radius: 999px; padding: .1875rem .5rem; }
  /* the full-size viewer */
  .pview.open { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; background: #0f1216; }
  .pview__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #fff; padding: .875rem 1rem; font: 600 .8125rem var(--body); }
  .pview__x { border: 0; background: none; color: #fff; font-size: 1.625rem; line-height: 1; padding: .25rem .5rem; cursor: pointer; }
  .pview__x:focus-visible, .pview__pan:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .pview__pan { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .pview__shot { padding: .75rem; box-sizing: content-box; }
  .pview__hint { color: #aab0b8; font-size: .75rem; text-align: center; padding: .625rem 1rem; margin: 0; }
  html.pview-on, html.pview-on body { overflow: hidden; }
}