/* Flinter · the landing pages' drawings (src/components/Art.astro), the bento they sit in, and the plate under a
   page's head. After bencho.dev's cards: one small white piece of UI centred on a flat grey plate, with room around
   it. White and grey, ink for what's picked, a calm green for done; no orange but the mark. Each drawing has a resting
   state and one change, played once when its card gets `is-on` (site.js) as it comes into view. */

@property --t { syntax: "<color>"; inherits: true; initial-value: #23402E; }

.a {
  --out: cubic-bezier(.22, 1, .36, 1);
  --rim: rgba(17, 17, 19, .07);
  --bone: #EEECE9;
  --chip: #F1EFEC;
  --ok: #12A150; --okt: #E7F5EC;
  --wait: #9A5D07; --waitt: #FBF1DE;
  position: relative; display: grid; justify-items: center; gap: 10px; width: 300px;
  font: 400 12px/1.4 var(--sans); letter-spacing: -.005em; color: var(--ink-2); text-align: left;
  pointer-events: none; user-select: none;
}
/* Base styles in :where(), so each drawing's own rules win without a fight. */
:where(.a) :where(p, ul) { margin: 0; padding: 0; list-style: none; }
:where(.a) b { font-weight: 500; color: var(--ink); }
:where(.a) small { font-size: 11px; color: var(--mute); }
:where(.a) em { font-style: normal; }
:where(.a) img { display: block; object-fit: cover; }
:where(.a) code { font: 500 10.5px/1 var(--mono); color: var(--mute); }
.a .li { --s: 13px; --sw: 1.8; }
.aw { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--rim), 0 1px 2px -1px rgba(17, 17, 19, .06), 0 2px 4px rgba(17, 17, 19, .03); }
.ab { display: block; height: 6px; border-radius: 3px; background: var(--bone); }
.a-stack { display: grid; justify-items: center; gap: 10px; width: 100%; }
.a-t { font-size: 13.5px; letter-spacing: -.015em; }

/* ───── The one change ───── */
/* Shown once on: blurs in. */
.a-show { opacity: 0; filter: blur(4px); translate: 0 4px; transition: opacity .55s var(--out), filter .55s var(--out), translate .55s var(--out); transition-delay: var(--d, .3s); }
.is-on .a-show { opacity: 1; filter: none; translate: 0 0; }
/* Two states in one place: the first at rest, the second once on. */
.a-x { display: inline-grid; }
.a-x > * { display: inline-flex; align-items: center; gap: 5px; grid-area: 1 / 1; transition: opacity .4s var(--out), filter .4s var(--out), translate .4s var(--out); transition-delay: var(--d, .35s); }
.a-x > :last-child { opacity: 0; filter: blur(3px); translate: 0 3px; }
.is-on .a-x > :first-child { opacity: 0; filter: blur(3px); translate: 0 -3px; }
.is-on .a-x > :last-child { opacity: 1; filter: none; translate: 0 0; }
/* A row that opens in. */
.a-grow { height: 0 !important; opacity: 0; overflow: hidden; background: #F8F7F5; transition: height .5s var(--out), opacity .5s var(--out); transition-delay: var(--d, .35s); }
.is-on .a-grow { height: var(--gh, 30px) !important; opacity: 1; }
/* A tick that turns green. */
.a-ck { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D9D6D2; transition: background .35s var(--out), box-shadow .35s var(--out); transition-delay: var(--d, .3s); }
.a-ck::after { content: ""; width: 7px; height: 4px; margin-top: -2px; border: solid #fff; border-width: 0 0 1.6px 1.6px; rotate: -45deg; opacity: 0; transition: opacity .25s; transition-delay: var(--d, .3s); }
.is-on .a-ck, .a-done .a-ck { background: var(--ok); box-shadow: none; }
.is-on .a-ck::after, .a-done .a-ck::after { opacity: 1; }
/* A switch, on (ink) or off (grey). */
.a-tg { position: relative; flex: none; width: 26px; height: 16px; margin-left: auto; border-radius: 999px; background: var(--ink); transition: background .35s var(--out) .45s; }
.a-tg::after { content: ""; position: absolute; top: 2px; left: 12px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .35s var(--out) .45s; }
.is-on .a-flip, .a-flip-on { background: #D9D6D2; }
.is-on .a-flip::after, .a-flip-on::after { left: 2px; }
.is-on .a-flip-on { background: var(--ink); }
.is-on .a-flip-on::after { left: 12px; }
/* A two- or three-way switch whose thumb slides once on. */
.a-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--chip); }
.a-seg em { position: relative; z-index: 1; padding: 5px 10px; font-size: 10.5px; font-weight: 500; text-align: center; color: var(--mute); transition: color .35s var(--out) .35s; }
.a-seg em:first-of-type, .is-on .a-seg em:nth-of-type(2) { color: var(--ink); }
.is-on .a-seg em:first-of-type { color: var(--mute); }
.a-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--rim), 0 1px 2px rgba(17, 17, 19, .06); transition: translate .45s var(--out) .35s; }
.is-on .a-thumb { translate: 100% 0; }
.a-seg3 { --n: 3; }

/* Shared pieces: a button, a field, a pill, a brand mark. */
.a-btn { display: inline-grid; place-items: center; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12px; font-weight: 500; color: #fff; background: var(--ink); }
.a-btn .li { --s: 12px; --sw: 2.2; }
.a-sm { height: 28px; padding: 0 11px; font-size: 11.5px; }
.a-f { display: grid; gap: 1px; padding: 6px 10px; border-radius: 9px; font-size: 12px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-f small { font-size: 9.5px; }
.a-bm { display: inline-block; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.a-ok, .a-wait, .a-new, .a-call, .a-done-st, .a-cur { color: var(--soft); background: var(--chip); }
.a-ok { color: var(--ok) !important; background: var(--okt) !important; }
.a-wait { color: var(--wait) !important; background: var(--waitt) !important; }
.a-call { color: var(--ink) !important; background: #E9E7E3 !important; }
.a-done-st { color: #fff !important; background: var(--ink) !important; }
.a-ex { padding: 3px 7px; border-radius: 999px; font-size: 9.5px !important; color: var(--mute) !important; background: var(--chip); }
.a-by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); }
.a-by .mk { --s: 16px; }
.a-caret { display: inline-block; width: 1.5px; height: .95em; margin-left: 2px; vertical-align: -1px; background: var(--ink); animation: a-blink 1.1s steps(1) infinite; }
@keyframes a-blink { 50% { opacity: 0; } }

/* Lists: a head, then rows split by hairlines. */
.a-list { width: 100%; padding: 2px 4px 4px; }
.a-h { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; font-size: 12px; }
.a-h > :last-child:not(:first-child):not(b) { margin-left: auto; font-size: 11px; color: var(--mute); }
.a-h .li { color: var(--soft); }
.a-list li { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 10px; box-shadow: inset 0 1px var(--line); font-size: 12px; color: var(--ink); }
.a-list li > .li { color: var(--mute); }
.a-list li > span { display: grid; gap: 1px; min-width: 0; }
.a-list li > span b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-list li code { margin-left: auto; }
.a-list li > em { display: inline-grid; place-items: center; margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; }
.a-list li > em.a-st, .a-list li > em.a-rs { padding: 0; background: none; }
.a-st > span, .a-rs > span { padding: 3px 8px; border-radius: 999px; }
.a-list li img { flex: none; width: 28px; height: 28px; border-radius: 7px; }

/* ═════════════ Building the site ═════════════ */
/* prompt */
.a-box { width: 100%; padding: 14px 12px 10px 14px; border-radius: 18px; }
.a-say { min-height: 40px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.a-row { display: flex; justify-content: space-between; margin-top: 14px; }
.a-ico, .a-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.a-ico { color: var(--soft); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-send { color: #fff; background: #CFCBC6; transition: background .35s var(--out) .2s; }
.is-on .a-send { background: var(--ink); }

/* site */
.a-win { width: 100%; overflow: hidden; border-radius: 12px; }
.a-bar { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; background: #FAFAF9; box-shadow: inset 0 -1px var(--line); }
.a-bar > i { width: 6px; height: 6px; border-radius: 50%; background: #E2DFDB; }
.a-url { display: inline-flex; align-items: center; gap: 4px; margin: 0 auto; padding-right: 26px; font-size: 10px; color: var(--mute); }
.a-url .li { --s: 9px; }
.a-site { display: grid; gap: 6px; padding: 8px; }
.a-nav { display: flex; align-items: center; gap: 8px; height: 18px; }
.a-nav b { margin-right: auto; font: 400 13px/1 var(--serif); }
.a-nav span { width: 22px; height: 4px; border-radius: 2px; background: var(--bone); }
.a-nav em { padding: 4px 8px; border-radius: 999px; font-size: 8.5px; color: #fff; background: #3A2A1E; }
.a-hero { position: relative; height: 92px; overflow: hidden; border-radius: 7px; }
.a-hero img { width: 100%; height: 100%; }
.a-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 6, .55), transparent 75%); }
.a-hero b { position: absolute; z-index: 1; left: 10px; bottom: 9px; font: 400 16px/1.02 var(--serif); color: #fff; }
.a-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.a-three img { width: 100%; height: 44px; border-radius: 5px; }

/* pages */
.a--pages li code + em { margin-left: 4px; color: var(--ink); background: var(--chip); }

/* edit */
.a-page { position: relative; display: grid; justify-items: start; gap: 8px; width: 100%; padding: 30px 18px 18px; }
.a-tb { position: absolute; top: -14px; left: 14px; display: flex; align-items: center; gap: 1px; height: 28px; padding: 0 4px; border-radius: 9px; color: #fff; background: var(--ink); }
.a-tb > * { display: grid; place-items: center; width: 22px; height: 20px; font: 600 11px/1 var(--sans); color: #fff; }
.a-tb i:not(.li) { font: italic 400 14px/1 var(--serif); }
.a-tb .li { --s: 12px; color: #fff; }
.a-tb-c { width: 12px !important; height: 12px !important; margin: 0 5px; border-radius: 50%; background: #E3D3BC; }
.a-kick { font-size: 10.5px; color: var(--mute); }
.a-hl { margin: 0 -6px; padding: 3px 6px; border-radius: 6px; font: 500 21px/1.15 var(--sans); letter-spacing: -.035em; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.a-cta { margin-top: 4px; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #fff; background: var(--ink); }

/* chat */
.a-talk { display: grid; gap: 10px; width: 100%; }
.a-you { justify-self: end; max-width: 82%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; font-size: 12.5px; line-height: 1.4; color: var(--ink); background: #E8E6E2; }
.a-fl { display: flex; align-items: flex-start; gap: 8px; }
.a-fl .mk { --s: 20px; margin-top: 3px; }
.a-reply { padding: 10px 12px; border-radius: 4px 14px 14px 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.a-tag { display: flex; align-items: center; gap: 5px; width: max-content; margin-top: 8px; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; color: var(--ok); background: var(--okt); }
.a-tag .li { --s: 11px; --sw: 2.2; }

/* langs */
.a-lang { display: grid; justify-items: start; gap: 8px; width: 100%; padding: 14px 16px 16px; }
.a-lang .a-seg { justify-self: end; margin-bottom: 2px; }
.a-l1 { font: 500 19px/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.a-l2 { font-size: 12px; color: var(--soft); }
.a-lang .a-cta { display: inline-grid; }

/* blog */
.a-blog li { height: 46px; gap: 10px; }
.a-blog li img { width: 34px; height: 34px; }

/* form */
.a-form { display: grid; gap: 7px; width: 100%; padding: 14px; }
.a-form .a-btn { margin-top: 3px; }

/* seo */
.a-q { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12px; color: var(--ink); }
.a-q .li { color: var(--mute); }
.a-res { display: grid; gap: 3px; width: 100%; padding: 12px 14px; }
.a-res small { font-size: 10.5px; color: var(--soft); }
.a-res b { font-size: 13px; letter-spacing: -.01em; }
.a-res p { font-size: 11.5px; line-height: 1.4; color: var(--soft); }
.a-ticks { display: flex; gap: 6px; }
.a-ticks span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 5px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--rim); }

/* templates */
.a-tpl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.a-tpl .aw { display: grid; gap: 6px; padding: 5px 5px 8px; border-radius: 11px; transition: box-shadow .4s var(--out) .3s; }
.a-tpl img { width: 100%; height: 100px; border-radius: 7px; }
.a-tpl b { padding: 0 3px; font-size: 11px; }
.is-on .a-tpl .a-pick { box-shadow: 0 0 0 1.5px var(--ink); }

/* theme */
.a-theme { display: grid; gap: 12px; width: 100%; padding: 14px; transition: --t .5s var(--out) .45s; }
.is-on .a-theme { --t: #A8492A; }
.a-sw { position: relative; display: flex; gap: 8px; }
.a-sw i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.a-ring { position: absolute; top: -3px; left: -3px; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); transition: translate .45s var(--out) .3s; }
.is-on .a-ring { translate: 32px 0; }
.a-type { display: flex; align-items: center; gap: 10px; }
.a-type > b { font: 400 30px/1 var(--serif); }
.a-type > span { display: grid; }
.a-prev { display: grid; justify-items: start; gap: 8px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--t) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 12%, transparent); }
.a-prev b { font: 400 18px/1.1 var(--serif); color: var(--t); }
.a-pbtn { padding: 5px 11px; border-radius: 999px; font-size: 10.5px; color: #fff; background: var(--t); }

/* import */
.a-drop { position: relative; display: grid; place-items: center; width: 100%; height: 150px; border-radius: 16px; }
.a-drop::before { content: ""; position: absolute; inset: 8px; border-radius: 11px; background: #F8F7F5; box-shadow: inset 0 0 0 1px var(--line); }
.a-drop p { position: absolute; bottom: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute); }
.a-file { position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 11px; opacity: 0; filter: blur(4px); translate: 0 -54px; rotate: -4deg; transition: opacity .7s var(--out) .25s, filter .7s var(--out) .25s, translate .7s var(--out) .25s, rotate .7s var(--out) .25s; }
.is-on .a-file { opacity: 1; filter: none; translate: 0 -14px; rotate: 0deg; }
.a-file img { width: 42px; height: 30px; border-radius: 5px; }
.a-file > span { display: grid; }

/* history */
.a-hist li { height: 42px; }
.a-v { flex: none; width: 24px; font: 500 10.5px/1 var(--mono); color: var(--mute); }
.a-rs > :first-child { color: var(--ink); background: var(--chip); }
.a-rs > :last-child { color: var(--ok); background: var(--okt); }

/* share */
.a-share { display: grid; gap: 3px; width: 100%; padding: 16px; }
.a-share p { margin-bottom: 10px; font-size: 11.5px; color: var(--soft); }
.a-link { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 4px 0 10px; border-radius: 10px; font-size: 11.5px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-link > .li { color: var(--mute); }
.a-link > span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-link em { place-items: center; height: 28px; padding: 0 11px; border-radius: 7px; font-size: 11px; font-weight: 500; color: #fff; background: var(--ink); }

/* ═════════════ Backend ═════════════ */
/* auth */
.a-auth { display: grid; justify-items: center; gap: 8px; width: 250px; padding: 16px; }
.a-logo { font: 400 22px/1 var(--serif); color: var(--ink); }
.a-auth .a-t { margin-bottom: 4px; }
.a-ob { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 32px; border-radius: 9px; font-size: 11.5px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-or { font-size: 10px; color: var(--mute); }
.a-auth .a-f { width: 100%; padding: 8px 10px; }
.a-auth .a-btn { width: 100%; }

/* db */
.a-tbl { width: 100%; padding: 2px 4px 6px; }
.a-tr { --gh: 28px; display: grid; grid-template-columns: 1.3fr 1fr .45fr; align-items: center; height: 28px; padding: 0 10px; font-size: 11.5px; color: var(--ink); box-shadow: inset 0 1px var(--line); }
.a-th { height: 26px; border-radius: 7px; font-size: 10px; color: var(--mute); background: #FAFAF9; box-shadow: none; }
.a-tr span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* files */
.a-files li { --gh: 42px; height: 42px; }
.a-ext { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; font: 600 8.5px/1 var(--mono); color: #A6402D; background: #FBECE8; }
.a-prog { display: block; width: 90px; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: var(--bone); }
.a-prog i { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: left; scale: .25 1; transition: scale 1s var(--out) .2s; }
.is-on .a-prog i { scale: 1 1; }
.a-files li > .a-ck { margin-left: auto; }

/* roles */
.a-roles li, .a-leads li, .a-clients li, .a-orders li { height: 42px; }
.a-roles li img, .a-leads li img { width: 26px; height: 26px; border-radius: 50%; }

/* secure, domain, agent, tasks */
.a-sec li, .a-dom li, .a-agent li, .a-tasks li { gap: 10px; }
.a-tasks li.a-done { color: var(--mute); }

/* ═════════════ Money ═════════════ */
/* pay */
.a-pay { display: grid; gap: 7px; width: 100%; padding: 12px; }
.a-item { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; padding-bottom: 10px; box-shadow: inset 0 -1px var(--line); }
.a-item img { width: 34px; height: 34px; border-radius: 8px; }
.a-item > span { display: grid; flex: 1; }
.a-item > b { justify-items: end; font-size: 13px; }
.a-paid { height: 22px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; color: var(--ok); background: var(--okt); }
.a-paid .li { --s: 11px; --sw: 2.4; }
.a-apple, .a-gpay { display: flex; align-items: center; justify-content: center; gap: 3px; height: 32px; border-radius: 8px; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.a-apple { color: #fff; background: #000; }
.a-gpay { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-apple .a-bm { width: 14px; height: 14px; margin: -2px 1px 0 0; }
.a-gpay .a-bm { width: 13px; height: 13px; margin-right: 2px; }
.a-cardrow { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 11.5px; color: var(--soft); background: #F7F6F4; }
.a-cardrow > span { flex: 1; }
.a-cardrow .a-bm { width: 24px; height: 12px; color: var(--mute); }

/* subs */
.a-subs { display: grid; gap: 12px; width: 100%; padding: 12px; }
.a-plan { display: flex; align-items: center; gap: 10px; }
.a-plan img { width: 44px; height: 44px; border-radius: 9px; }
.a-plan > span { display: grid; flex: 1; gap: 2px; }
.a-plan > b { justify-items: end; font-size: 16px; letter-spacing: -.02em; }
.a-plan > b small { margin-left: 1px; font-size: 10px; font-weight: 400; }
.a-subs .a-btn { width: 100%; }

/* orders */
.a-orders li code { margin-left: 0; }
.a-orders li > b { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.a-orders li > em { min-width: 58px; margin-left: 0; }

/* donate */
.a-don { display: grid; gap: 11px; width: 100%; padding: 14px; }
.a-amts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.a-amts em { display: grid; place-items: center; height: 36px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-amts .a-sel { box-shadow: inset 0 0 0 1.5px var(--ink); }
.a-tgl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); }
.a-tgl .a-tg { margin-left: 0; }
.a-don .a-btn { width: 100%; }

/* booking */
.a-book { display: grid; gap: 9px; width: 100%; padding: 12px; }
.a-book .a-h { height: auto; padding: 0 2px 2px; }
.a-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.a-days em { display: grid; place-items: center; padding: 6px 0; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.a-days small { font-size: 9.5px; font-weight: 400; }
.a-days .a-sel { color: #fff; background: var(--ink); box-shadow: none; }
.a-days .a-sel small { color: rgba(255, 255, 255, .6); }
.a-times { display: flex; gap: 5px; }
.a-times em { padding: 6px 9px; border-radius: 8px; font-size: 11px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s var(--out) .4s; }
.a-times .a-full { color: var(--mute); background: #F5F4F2; box-shadow: none; }
.is-on .a-times .a-pick { box-shadow: inset 0 0 0 1.5px var(--ink); }
.a-book .a-btn { width: 100%; }

/* product */
.a-prod { display: grid; gap: 9px; width: 232px; padding: 6px 6px 10px; }
.a-prod img { width: 100%; height: 118px; border-radius: 9px; }
.a-pi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.a-pi > span { display: grid; }
.a-mini em { padding: 3px 7px; font-size: 9.5px; }
.a-price { font-size: 17px; letter-spacing: -.02em; }
.a-prod .a-btn { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 11px; }

/* map */
.a-map { width: 100%; overflow: hidden; }
.a-mapimg { position: relative; height: 118px; background: #F3F1EE; }
.a-mapimg svg { display: block; width: 100%; height: 100%; }
.a-mapimg path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.a-mapimg .a-thin { stroke-width: 3.5; }
.a-pin { position: absolute; top: 50%; left: 52%; display: grid; place-items: center; width: 26px; height: 26px; margin: -30px 0 0 -13px; border-radius: 50% 50% 50% 3px; background: var(--ink); rotate: -45deg; opacity: 0; translate: 0 -16px; transition: translate .55s var(--out) .3s, opacity .4s var(--out) .3s; }
.a-pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.is-on .a-pin { opacity: 1; translate: 0 0; }
.a-hours { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.a-hours > span { display: grid; gap: 1px; }
.a-open { font-size: 10.5px; line-height: 1.35; text-align: right; color: var(--ok); }

/* ═════════════ Going live and growing ═════════════ */
/* publish */
.a-pbar { display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 8px 0 12px; border-radius: 13px; }
.a-pbar .mk { --s: 18px; }
.a-pbar > b { flex: 1; font-size: 12.5px; }
.a-state > span { font-size: 11px; color: var(--mute); }
.a-state i { width: 6px; height: 6px; border-radius: 50%; background: #CFCBC6; }
.a-state .a-live { color: var(--ok); }
.a-state .a-live i { background: var(--ok); }
.a-addr { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 5px 0 13px; border-radius: 999px; font-size: 12px; color: var(--ink); }
.a-addr .li { color: var(--mute); }
.a-addr em { margin-left: 10px; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 500; background: var(--chip); }

/* chart */
.a-chart { display: grid; gap: 12px; width: 100%; padding: 12px 14px 14px; }
.a-chart .a-h { align-items: flex-start; height: auto; padding: 0; }
.a-chart .a-h > span { display: grid; gap: 3px; }
.a-chart .a-h > span b { font-size: 22px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.a-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.a-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 1px 1px; background: #DAD7D2; transform-origin: bottom; scale: 1 .1; transition: scale .8s var(--out); transition-delay: var(--d); }
.a-bars i:nth-last-child(-n+7) { background: var(--ink); }
.is-on .a-bars i { scale: 1 1; }

/* sources */
.a-src li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 30px; gap: 10px; }
.a-src li span { color: var(--ink-2); }
.a-src li i { position: relative; height: 6px; border-radius: 3px; background: var(--bone); }
.a-src li i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--ink); transform-origin: left; scale: 0 1; transition: scale .8s var(--out) var(--d); }
.is-on .a-src li i::after { scale: 1 1; }
.a-src li b { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

/* email */
.a-mail { position: relative; width: 100%; height: 142px; }
.a-note { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border-radius: 14px; }
.a-note img { flex: none; width: 20px; height: 20px; margin-top: 1px; object-fit: contain; }
.a-note > span { display: grid; flex: 1; gap: 2px; min-width: 0; }
.a-note > span small { line-height: 1.35; }
.a-back { top: 70px; opacity: .55; scale: .94; }
.a-front { top: 16px; opacity: 0; filter: blur(4px); translate: 0 -14px; transition: opacity .6s var(--out) .3s, filter .6s var(--out) .3s, translate .6s var(--out) .3s; }
.is-on .a-front { opacity: 1; filter: none; translate: 0 0; }
.a-now { flex: none; }

/* ═════════════ Tools and agents ═════════════ */
/* tools */
.a-tools { display: grid; grid-template-columns: repeat(3, 52px); gap: 8px; }
.a-tools .aw { display: grid; place-items: center; height: 52px; border-radius: 13px; transition: box-shadow .4s var(--out) .3s; }
.a-tools img { width: 24px; height: 24px; object-fit: contain; }
.is-on .a-tool-on { box-shadow: 0 0 0 1.5px var(--ink); }
.a-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 11.5px; color: var(--soft); }
.a-pill img { width: 14px; height: 14px; object-fit: contain; }
.a-pill .li { --sw: 2.4; color: var(--ok); }

/* agent */
.a-agent .a-h .li { color: var(--ink); }

/* slack */
.a-slack { width: 100%; padding: 2px 4px 14px; }
.a-slack .a-h { box-shadow: inset 0 -1px var(--line); }
.a-slack .a-h img { width: 14px; height: 14px; object-fit: contain; }
.a-msg { display: flex; gap: 10px; padding: 12px 10px 0; }
.a-bot { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: var(--ink); }
.a-bot .li { --s: 15px; }
.a-who { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.a-msg p:last-child { font-size: 12px; line-height: 1.45; color: var(--ink-2); }

/* leads, clients */
.a-clients li img { width: 30px; height: 30px; }

/* ai */
.a-ai { display: grid; gap: 8px; width: 264px; padding: 10px; }
.a-ai .a-h { gap: 9px; height: auto; padding: 2px 2px 10px; box-shadow: inset 0 -1px var(--line); }
.a-ai .a-h > :last-child { display: grid; margin-left: 0; color: inherit; font-size: 12px; }
.a-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font: 400 15px/1 var(--serif); color: #fff; background: #3A2A1E; }
.a-uq, .a-ua { max-width: 86%; padding: 8px 11px; font-size: 11.5px; line-height: 1.4; }
.a-uq { justify-self: end; border-radius: 13px 13px 3px 13px; color: #fff; background: var(--ink); }
.a-ua { justify-self: start; border-radius: 13px 13px 13px 3px; color: var(--ink); background: var(--chip); }
.a-in { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-top: 2px; padding: 0 4px 0 11px; border-radius: 999px; font-size: 11px; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line-2); }
.a-in .li { width: 24px; height: 24px; padding: 6px; border-radius: 50%; color: #fff; background: var(--ink); }

/* ═════════════ Code ═════════════ */
/* github */
.a-gh li { --gh: 40px; height: 40px; }
.a-gh .a-h .a-bm { width: 15px; height: 15px; color: var(--ink); }
.a-gh .a-h .a-x > :last-child { color: var(--ok); }

/* code */
.a-code { width: 100%; overflow: hidden; border-radius: 12px; }
.a-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #FAFAF9; box-shadow: inset 0 -1px var(--line); }
.a-tabs > * { padding: 7px 10px 6px; border-radius: 7px 7px 0 0; font: 500 10.5px/1 var(--mono); color: var(--mute); }
.a-tabs em { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.a-lines { display: grid; padding: 10px 0 12px; font: 400 11px/1.75 var(--mono); color: var(--ink-2); }
.a-ln { white-space: pre; transition: background .5s var(--out) .35s; }
.a-ln .n { display: inline-block; width: 30px; padding-right: 12px; text-align: right; color: #C4C0BB; }
.a-ln i { font-style: normal; color: var(--mute); }
.a-ln b { font-weight: 500; }
.is-on .a-add { background: var(--okt); }
.is-on .a-add .n { color: var(--ok); }

/* terminal */
.a-term { display: grid; gap: 5px; width: 100%; padding: 11px 14px 15px; border-radius: 14px; font: 400 11px/1.55 var(--mono); color: #EDEDF0; background: #111113; }
.a-tt { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font: 400 10px/1 var(--sans); color: rgba(255, 255, 255, .4); }
.a-tt i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.a-tt span { margin-left: 8px; }
.a-tl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-pr { margin-right: 8px; color: rgba(255, 255, 255, .4); }
.a-dim { color: rgba(255, 255, 255, .42); }
.a-ok-t { color: #7DD3A0; }

/* phone */
.a-phone { width: 156px; height: 236px; padding: 6px; border-radius: 30px; background: #141416; }
.a-screen { display: grid; align-content: start; gap: 5px; height: 100%; padding: 14px 10px 10px; overflow: hidden; border-radius: 24px; background: #FBF8F4; }
.a-ph-top { display: flex; align-items: center; justify-content: space-between; }
.a-ph-top b { font: 400 15px/1 var(--serif); }
.a-ph-top img { width: 18px; height: 18px; border-radius: 50%; }
.a-ph-h { margin-top: 4px; font: 400 15px/1.1 var(--serif); color: var(--ink); }
.a-screen > small { font-size: 9px; }
.a-ph-card { position: relative; height: 82px; margin-top: 4px; overflow: hidden; border-radius: 10px; }
.a-ph-card img { width: 100%; height: 100%; }
.a-ph-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent 65%); }
.a-ph-card span { position: absolute; z-index: 1; left: 8px; bottom: 7px; display: grid; }
.a-ph-card b { font-size: 11px; color: #fff; }
.a-ph-card small { font-size: 9px; color: rgba(255, 255, 255, .8); }
.a-phone .a-btn { height: 28px; margin-top: 4px; border-radius: 999px; font-size: 11px; }

/* ═════════════ People ═════════════ */
/* team */
.a-team { display: grid; gap: 9px; width: 100%; padding: 14px; }
.a-team .a-f { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; }
.a-team .a-f em { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--soft); }
.a-team .a-f .li { --s: 11px; }
.a-team .a-btn { width: 100%; }
.a-faces { display: flex; align-items: center; margin-top: 2px; }
.a-faces img { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.a-faces img + img { margin-left: -6px; }
.a-faces > span { margin-left: 8px; font-size: 11px; color: var(--soft); }

/* links */
.a-links { display: grid; justify-items: center; gap: 5px; width: 232px; padding: 16px 14px 14px; }
.a-links > img { width: 44px; height: 44px; border-radius: 50%; }
.a-links .a-t { margin-top: 3px; }
.a-links > small { margin-bottom: 6px; }
.a-lk { display: grid; place-items: center; width: 100%; height: 30px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* quiz */
.a-quiz { display: grid; gap: 7px; width: 100%; padding: 14px; }
.a-quiz .a-h { height: auto; padding: 0 0 2px; }
.a-right { color: var(--ok); font-weight: 500; }
.a-right .li { --s: 12px; --sw: 2.4; }
.a-quiz .a-t { margin-bottom: 4px; line-height: 1.3; }
.a-opt { display: flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .35s var(--out) .35s, background .35s var(--out) .35s; }
.is-on .a-ans { background: var(--okt); box-shadow: inset 0 0 0 1.5px var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .a, .a *, .a *::before, .a *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ═════════════ Where the drawings sit ═════════════ */
/* Since 2026-11-05 the inner pages wear the home's look (pages.css): the drawings sit in the home's grey cells
   (front.css .f-cell, no hairlines, rounded), and under a page's head in a light tray held by a glass rim on a live
   gradient plate (pages.css .lp-plate, .lp-glass, .lp-tray). A drawing scales with its cell (a container query), the
   way a screenshot would, and never reflows. The white tray and the hairline bento before this are in
   Desktop/Flinter Website/versions/inner-pages-before-2026-11-05/. */

/* The bento's cells (Landing.astro, /drawings): bigger in the big cells, smaller where a cell gets narrow. */
.lp-cell-art > .a { zoom: 1; }
.f-cell.f-is-xl .lp-cell-art > .a { zoom: 1.24; }
.f-cell.lp-is-half .lp-cell-art > .a { zoom: 1.1; }
@container (max-width: 370px) { .lp-cell-art > .a { zoom: .9 !important; } }
@container (max-width: 335px) { .lp-cell-art > .a { zoom: .82 !important; } }

/* The tray under a page's head: one to three drawings side by side, larger. */
.lp-tray > .a { flex: none; zoom: 1.08; }
.lp-tray[data-n="2"] > .a { zoom: 1.28; }
.lp-tray[data-n="1"] > .a { zoom: 1.4; }
@container (max-width: 1040px) { .lp-tray[data-n="3"] > .a { zoom: .94; } }
@container (max-width: 900px) { .lp-tray[data-n="3"] > .a:nth-child(3) { display: none; } .lp-tray[data-n="3"] > .a, .lp-tray[data-n="2"] > .a { zoom: 1.05; } }
@container (max-width: 640px) { .lp-tray > .a:nth-child(n+2) { display: none; } .lp-tray > .a { zoom: 1 !important; } }
@container (max-width: 340px) { .lp-tray > .a { zoom: .88 !important; } }

/* /drawings: every drawing in the same grey cells, three a row. */
.dw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dw-grid .f-cell-art { height: 320px; }
@media (max-width: 960px) { .dw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dw-grid { grid-template-columns: minmax(0, 1fr); } }