/* Create Your AI · one stylesheet for every page */
@font-face { font-family: 'Imbue'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/imbue.woff2) format('woff2'); }
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/albert-sans.woff2) format('woff2'); }


/* Layout: the sentence is the layout. Each screen is one short sentence with its proof beside it,
   on one 12-column grid with one pair of margins. The idea: a tailor's fitting. The photograph in the
   word space of the name is a tape measure, and the build is told as the four verbs of the trade. */
:root {
  color-scheme: dark;
  --bg: #133621;
  --surface: #1a4429;
  --deep: #0e2a19;
  --ink: #f4d96c;
  --muted: #c9bb73;
  --accent: #f4d96c;
  --accent-ink: #133621;
  --wa: #1f8f5a;
  --display: "Imbue", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem);
  --step-head: clamp(1.5rem, 0.95rem + 1.5vw, 2.25rem);
  --step-display: clamp(4.5rem, 1.6rem + 10.4vw, 12rem);
  --m: clamp(16px, 2.2vw, 32px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.55 var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3, p { margin: 0; }
.wrap { padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)); }
.display { font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 100; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0; background: var(--accent); color: var(--accent-ink); font: 500 var(--step-body)/1 var(--text); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #fff0a8; } .link:hover { text-decoration-color: currentColor; } }

/* ---------- header ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; gap: 28px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.word { font: 500 var(--step-small)/1 var(--text); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 40px); margin-left: auto; font-size: var(--step-small); }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.lang { display: flex; gap: 2px; font-size: var(--step-small); }
.lang button { background: none; border: 0; padding: 8px 6px; color: var(--muted); }
.lang button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.top .btn { min-height: 44px; padding: 0 18px; font-size: var(--step-small); }
@media (max-width: 900px) { .nav { display: none; } .lang { margin-left: auto; } }
@media (max-width: 420px) { .top .btn { display: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding-top: 96px; padding-bottom: 32px; }
.hero h1 { align-self: center; justify-self: center; display: flex; align-items: baseline; justify-content: center; gap: 0.2em; font-size: min(19.4vw, 34svh); white-space: nowrap; }
.aimark { flex: none; height: 0.77em; width: auto; margin-bottom: -0.04em; overflow: visible; }
.lockup { display: block; height: 22px; width: auto; color: var(--ink); }
.hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.hero__foot p { grid-column: 6 / span 5; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.hero__foot .btn { grid-column: 11 / span 2; justify-self: end; }
@media (max-width: 900px) {
  .hero { padding-top: 88px; }
  .hero h1 { flex-direction: column; align-items: center; gap: 0.12em; font-size: 19vw; white-space: normal; text-align: center; }
  .hero h1 .aimark { height: 1.7em; margin-top: 0.12em; }
  .hero__foot { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .hero__foot p, .hero__foot .btn { grid-column: 1; justify-self: start; }
  .hero__foot .btn { width: 100%; }
}

/* ---------- the seam: one running stitch sewn down the page from the logo's needle ---------- */
main { position: relative; }
main > section { position: relative; z-index: 1; }
.seam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.js .seam { opacity: 0; transition: opacity 900ms var(--ease-out); }
.js .seam.is-on { opacity: 1; }
.seam__knot { opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center; transition: opacity 260ms ease, transform 600ms var(--ease-out); }
.seam.is-tied .seam__knot { opacity: 1; transform: none; }
.seam__needle { transition: opacity 300ms ease; }
.seam.is-tied .seam__needle { opacity: 0; }

/* ---------- two tape measures crossing, printed with what shoppers ask ---------- */
.tapes { position: relative; height: clamp(220px, 22vw, 320px); overflow: clip; --tilt: 4.5deg; }
.tape { position: absolute; left: -10vw; top: 50%; width: 120vw; height: 64px; margin-top: -32px; overflow: hidden; }
.tape--front { z-index: 2; background: var(--ink); color: var(--accent-ink); transform: rotate(calc(-1 * var(--tilt))); }
.tape--back { background: #d4b54a; color: var(--accent-ink); transform: rotate(calc(0.8 * var(--tilt))); pointer-events: none; }
.tape__run { display: flex; width: max-content; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64' viewBox='0 0 80 64' preserveAspectRatio='none'%3E%3Cpath d='M1 0v14M9 0v6M17 0v6M25 0v6M33 0v6M41 0v10M49 0v6M57 0v6M65 0v6M73 0v6M1 64v-14M9 64v-6M17 64v-6M25 64v-6M33 64v-6M41 64v-10M49 64v-6M57 64v-6M65 64v-6M73 64v-6' stroke='%23133621' stroke-width='1.5' stroke-opacity='.6'/%3E%3C/svg%3E") repeat-x 0 0 / 80px 64px; }
.tape--back .tape__run { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64' viewBox='0 0 80 64' preserveAspectRatio='none'%3E%3Cpath d='M1 0v14M9 0v6M17 0v6M25 0v6M33 0v6M41 0v10M49 0v6M57 0v6M65 0v6M73 0v6M1 64v-14M9 64v-6M17 64v-6M25 64v-6M33 64v-6M41 64v-10M49 64v-6M57 64v-6M65 64v-6M73 64v-6' stroke='%23133621' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E"); }
.tape__run > * { flex: none; display: inline-flex; align-items: center; gap: 14px; height: 100%; padding: 0 40px 0 0; border: 0; background: none; color: inherit; font: 500 var(--step-body)/1 var(--text); white-space: nowrap; }
.tape__run b { font: 400 var(--step-lead)/1 var(--display); font-variation-settings: "opsz" 100; }
.tape__run button:focus-visible { outline: 2px solid currentColor; outline-offset: -8px; }
@media (hover: hover) and (pointer: fine) { .tape__run button:hover span { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; } }
@media (max-width: 900px) { .tapes { height: 220px; --tilt: 9deg; } .tape { height: 56px; margin-top: -28px; } .tape__run { background-size: 80px 56px; } }
html:not(.js) .tapes { display: none; }

/* ---------- intro statement ---------- */
.intro { padding-block: clamp(120px, 22vh, 220px); }
.statement { margin-left: 16.66%; max-width: 62%; font: 500 var(--step-head)/1.3 var(--text); letter-spacing: -0.01em; }
.thumb { display: inline-block; height: 0.85em; width: 1.25em; margin: 0 0.12em; vertical-align: -0.1em; border-radius: 0.14em; overflow: hidden; background: var(--deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .intro { padding-block: 96px; } .statement { margin-left: 0; max-width: none; font-size: 1.5rem; line-height: 1.32; } }

/* ---------- showcase: fit it to your store (the live thing) ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--surface); }
.fit__plate { display: grid; place-items: center; padding: 40px; }
.fit__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 56px max(var(--m), 40px) 56px 24px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tabs button { background: none; border: 0; padding: 6px 0; font-size: var(--step-body); color: var(--muted); transition: color var(--t-hover) ease; }
.tabs button[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.fit__side h2 { font: 600 var(--step-head)/1.1 var(--text); letter-spacing: -0.02em; }
.fit__side .desc { margin-top: 28px; max-width: 34ch; }
.cells { display: grid; grid-template-columns: 1fr 1fr; }
.cells button { min-height: 72px; border: 0; padding: 0 22px; text-align: left; font-weight: 500; transition: transform var(--t-press) var(--ease-out), filter var(--t-hover) ease; }
.cells button:active { transform: scale(0.98); }
.cells button:hover { filter: brightness(1.08); }
.cell--ink { background: var(--ink); color: var(--bg); }
.cell--tone { background: var(--deep); color: var(--ink); }
@media (max-width: 900px) {
  .fit { grid-template-columns: 1fr; }
  .fit__plate { padding: 16px; }
  .ui { aspect-ratio: auto; height: 560px; }
  .fit__side { padding: 8px 16px 32px; gap: 28px; }
  .cells { grid-template-columns: 1fr; }
  .cells button { min-height: 60px; }
}

/* the concierge itself: a real interface fragment */
.ui { width: 100%; max-width: 560px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; background: #eef0ea; color: #17241b; font-size: 14px; line-height: 1.45; overflow: hidden; }
.ui__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #133621; color: #f4d96c; }
.ui__mark { width: 30px; height: 30px; border-radius: 50%; background: #f4d96c; color: #133621; display: grid; place-items: center; font: 400 15px/1 var(--display); }
.ui__head b { display: block; font-size: 14px; font-weight: 600; }
.ui__head small { display: block; font-size: 13px; color: #d8cb85; }
.ui__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; scrollbar-width: none; }
.ui__log::-webkit-scrollbar { display: none; }
.b { max-width: 84%; padding: 9px 13px; border-radius: 14px; }
.b--me { align-self: flex-end; background: #133621; color: #eef0ea; border-bottom-right-radius: 4px; }
.b--ai { align-self: flex-start; background: #ffffff; border: 1px solid #d9ddd0; border-bottom-left-radius: 4px; } /* taste-skill-ignore: interface fragment */
.b--photo { align-self: flex-end; width: 96px; height: 116px; padding: 0; overflow: hidden; border-bottom-right-radius: 4px; }
.b--photo img { width: 100%; height: 100%; object-fit: cover; }
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.picks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick { display: grid; gap: 3px; font-size: 13px; line-height: 1.3; }
.pick svg { width: 100%; aspect-ratio: 1; background: #e1e5da; border-radius: 8px; }
.pick b { font-weight: 600; }
.pick span { color: #5c6a5f; font-variant-numeric: tabular-nums; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid #d9ddd0; border-radius: 14px; } /* taste-skill-ignore: interface fragment */
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #133621; animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.wa { align-self: stretch; margin-top: 4px; padding: 12px; border-radius: 12px; background: #e5ded4; }
.wa__top { display: flex; align-items: center; gap: 8px; margin: -12px -12px 10px; padding: 10px 12px; border-radius: 12px 12px 0 0; background: #075e54; color: #fff; font-size: 13px; font-weight: 600; }
.wa__msg { margin-left: auto; max-width: 92%; padding: 9px 11px; border-radius: 10px 10px 2px 10px; background: #d9fdd3; color: #111b21; font-size: 14px; white-space: pre-line; }
.ui__input { display: flex; align-items: center; gap: 4px; margin: 0 16px 16px; padding: 4px; background: #fff; border: 1px solid #d9ddd0; border-radius: 10px; color: #5c6a5f; font-size: 14px; } /* taste-skill-ignore: interface fragment */
.ui__input:focus-within { outline: 2px solid #133621; outline-offset: 2px; }
.ui__input input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 4px; font: 400 16px/1.3 var(--text); color: #17241b; }
.ui__input input:focus-visible { outline: none; }
.ui__input input::placeholder { color: #5c6a5f; }
.ui__btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #5c6a5f; transition: transform var(--t-press) var(--ease-out); }
.ui__btn:active { transform: scale(0.94); }
.ui__btn--send { background: #133621; color: #f4d96c; }
.ui__btn svg { width: 18px; height: 18px; }
.sys { align-self: center; font-size: 13px; color: #5c6a5f; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { padding: 5px 11px; border: 1px solid #c9cfbf; border-radius: 999px; background: #f4f5f0; color: #17241b; font-size: 13px; } /* taste-skill-ignore: interface fragment */
.chip:hover { border-color: #133621; }
@media (prefers-reduced-motion: no-preference) { .ui__log > * { animation: rise .45s var(--ease-out) both; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- work ---------- */
.work { padding-block: 180px 40px; overflow: hidden; display: grid; gap: 140px; }
.proj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.proj__big { grid-column: 1 / span 7; position: relative; overflow: hidden; margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); background: var(--deep); }
.proj__big--a { height: 80svh; }
.proj__big--b { height: 60svh; }
.proj__big img { width: 120%; height: 120%; max-width: none; object-fit: cover; position: absolute; left: -10%; top: -10%; }
.proj__side { grid-column: 9 / span 4; display: grid; gap: 28px; }
.proj__small { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #eef0ea; }
.proj__small img { width: 100%; height: 100%; object-fit: cover; }
.proj__text { display: grid; gap: 14px; align-items: start; }
.proj__text h3 { font: 600 var(--step-head)/1.1 var(--text); letter-spacing: -0.02em; }
.proj__text p { font-size: var(--step-body); max-width: 44ch; }
.proj__text a { display: inline-block; margin-top: 10px; }
.proj__note { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
/* the large interface crop for Dress To */
.bigui { position: absolute; inset: 0; background: #eef0ea; color: #17241b; padding: 7vh 0 0 calc(max(var(--m), 16px) + 4vw); display: flex; flex-direction: column; gap: 2.2vh; font-size: clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem); line-height: 1.3; }
.bigui .b { max-width: 78%; padding: 0.55em 0.8em; border-radius: 0.7em; }
.bigui .b--me { border-bottom-right-radius: 0.2em; margin-right: 6%; }
.bigui .row { display: flex; gap: 0.5em; }
.bigui .row svg { width: 5.6em; height: 7em; background: #e1e5da; border-radius: 0.4em; flex: none; }
.minui { width: 100%; height: 100%; background: #eef0ea; color: #17241b; padding: 14px 16px; display: grid; gap: 8px; align-content: start; font-size: 13px; line-height: 1.35; }
.minui .q { justify-self: end; background: #133621; color: #eef0ea; padding: 6px 10px; border-radius: 10px 10px 2px 10px; }
.minui .r { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 10px; background: #fff; border-radius: 8px; }
.minui .r span { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 900px) {
  .work { padding-block: 96px 24px; gap: 88px; }
  .proj { grid-template-columns: 1fr; gap: 20px; }
  .proj__big, .proj__side { grid-column: 1; }
  .proj__big--a, .proj__big--b { height: auto; aspect-ratio: 4 / 5; width: 110%; }
  .proj__text { grid-template-columns: 1fr; gap: 10px; }
  .proj__small { width: 70%; justify-self: end; order: 2; }
  .bigui { padding-top: 5vh; font-size: 5vw; }
}

/* ---------- process: one verb at a time ---------- */
.verbs { margin-top: 160px; }
.panel { position: relative; height: 140svh; padding-top: calc(50svh - 0.5 * var(--verb)); padding-bottom: 200px; overflow: clip; background: var(--deep); --verb: var(--step-display); }
.panel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.panel__verb { position: sticky; top: calc(50svh - 0.5 * var(--verb)); z-index: 1; margin: 0; text-align: center; font-size: var(--verb); line-height: 1; color: var(--ink); }
.panel__text { position: absolute; left: max(var(--m), env(safe-area-inset-left, 0px)); bottom: 40px; z-index: 1; max-width: 40ch; padding: 18px 22px; background: rgb(14 42 25 / 0.82); font-size: var(--step-body); line-height: 1.5; }
.panel__text b { font-weight: 600; }
.panel[data-pos="a"] .panel__img { object-position: 50% 60%; }
.panel[data-pos="b"] .panel__img { object-position: 50% 30%; }
.panel[data-pos="c"] .panel__img { object-position: 50% 20%; }
@media (max-width: 900px) { .panel { --verb: 24vw; height: 120svh; padding-bottom: 190px; } .panel__text { left: 0; right: 0; bottom: 0; max-width: none; padding: 18px 16px 22px; } }

/* ---------- pricing: one plan as a sentence ---------- */
.price { background: var(--surface); padding-block: clamp(96px, 16vh, 180px); min-height: 80svh; display: grid; align-content: center; gap: 64px; }
.price h2 { font-size: var(--step-display); }
:root[lang="pt-BR"] .price h2 { font-size: min(var(--step-display), 9vw); }
.price__fig { display: inline-block; padding: 0.02em 0.15em 0.06em; background: var(--accent); color: var(--accent-ink); line-height: 0.92; }
.price__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.price__row p { grid-column: 1 / span 6; max-width: 46ch; }
.price__acts { grid-column: 10 / span 3; justify-self: end; display: grid; gap: 14px; justify-items: end; }
.price__acts .row2 { display: flex; gap: 18px; align-items: center; font-size: var(--step-small); }
.cur { display: flex; gap: 2px; }
.cur button { background: none; border: 0; padding: 6px 4px; color: var(--muted); font-size: var(--step-small); }
.cur button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.table-wrap { margin-top: 8px; }
.compare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid rgb(244 217 108 / 0.25); }
.compare thead { position: absolute; left: -9999px; }
.compare td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--step-small); color: var(--muted); }
.compare tbody th { font: 600 var(--step-lead)/1.2 var(--text); white-space: nowrap; }
.compare td:last-child { max-width: 34ch; }
.yearly { font-size: var(--step-body); }
@media (max-width: 760px) {
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; max-width: none; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 20px 0 12px; border-top: 1px solid rgb(244 217 108 / 0.25); }
  .compare tbody th, .compare td:last-child { grid-column: 1 / -1; }
  .compare th, .compare td { border: 0; padding: 4px 0; }
}
@media (max-width: 900px) {
  .price h2 { font-size: 13vw; }
  .price__row { grid-template-columns: 1fr; }
  .price__row p, .price__acts { grid-column: 1; justify-self: stretch; justify-items: stretch; }
  .price__acts .btn { width: 100%; }
}

/* ---------- questions ---------- */
.faq { padding-block: clamp(120px, 20vh, 220px); }
.faq h2 { font-size: var(--step-display); }
.faq__list { margin-top: 80px; margin-left: 33.33%; display: grid; gap: 12px; }
.faq details { padding: 12px 24px; margin-inline: -24px; transition: background-color var(--t-hover) ease; }
.faq details[open] { background: var(--surface); padding-block: 24px; }
.faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; cursor: pointer; list-style: none; font-size: var(--step-lead); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.chev { flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform var(--t-hover) var(--ease-out); }
.faq details[open] .chev { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin-top: 16px; max-width: 52ch; }
@media (max-width: 900px) { .faq h2 { font-size: 13vw; line-height: 0.95; } .faq__list { margin-left: 0; margin-top: 48px; gap: 4px; } .faq details { margin-inline: -16px; padding-inline: 16px; } } 

/* ---------- close: the idea again, inverted ---------- */
.close { background: var(--ink); color: var(--bg); min-height: 90svh; display: grid; grid-template-rows: 1fr auto; padding-block: clamp(80px, 14vh, 140px) 40px; }
.close h2 { font-size: var(--step-display); align-self: start; }
.close__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.close__row p { grid-column: 1 / span 5; max-width: 40ch; }
.close__row .btn { grid-column: 10 / span 3; justify-self: end; min-height: 56px; background: var(--bg); color: var(--ink); }
.close__row .btn:hover { background: var(--deep); }
@media (max-width: 900px) { .close { min-height: 80svh; } .close h2 { font-size: 13vw; } .close__row { grid-template-columns: 1fr; } .close__row p, .close__row .btn { grid-column: 1; } .close__row .btn { width: 100%; justify-self: stretch; } }

/* ---------- footer: contact as the headline ---------- */
.foot { background: var(--deep); min-height: 90svh; display: grid; grid-template-rows: auto 1fr auto auto; gap: 40px; padding-block: 40px 28px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: var(--step-small); }
.foot__top .notes { display: flex; flex-wrap: wrap; gap: 8px 40px; max-width: 60%; }
.mail { align-self: end; display: block; font-size: var(--step-display); text-transform: none; text-decoration: none; overflow-wrap: anywhere; }
.mail span { display: block; }
.mail:hover { text-decoration: underline; text-decoration-thickness: 0.03em; text-underline-offset: 0.08em; }
.foot__copy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.copy { min-height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: var(--bg); font-weight: 500; }
.meta { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; font-size: var(--step-small); color: var(--muted); }
.meta > :nth-child(3) { text-align: right; }
.meta details summary { cursor: pointer; }
.meta details p { margin-top: 10px; line-height: 1.5; max-width: 70ch; }
@media (max-width: 900px) { .foot__top .notes { max-width: none; flex-direction: column; } .mail { font-size: 13vw; } .meta { grid-template-columns: 1fr; } .meta > :nth-child(3) { text-align: left; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .aimark .sew { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sew 1500ms var(--ease-in-out) 800ms forwards; }
  @keyframes sew { to { stroke-dashoffset: 0; } }
  .js .aimark .needle { transform-box: fill-box; animation: needle 1000ms var(--ease-out) 300ms both; }
  @keyframes needle { from { opacity: 0; transform: translateY(-35%); } }
  .js .aimark > path:not(.needle):not(.thread):not(.tail) { animation: tape 900ms var(--ease-out) both; }
  @keyframes tape { from { opacity: 0; transform: translateY(6%); } }
  .js [data-r] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-r].is-in { opacity: 1; transform: none; }
  .js .hero h1 > span { display: inline-block; animation: lift 1000ms var(--ease-out) both; }
  @keyframes lift { from { opacity: 0; transform: translateY(0.25em); } }
  .panel__img { transform: scale(1.12); transition: transform 2400ms var(--ease-soft); }
  .panel.is-in .panel__img { transform: scale(1); }
  .proj__big img { transition: transform 1600ms var(--ease-soft); }
  .proj.is-in .proj__big img { transform: translate(4%, 4%); }
  .thumb img { transition: transform 600ms var(--ease-out); }
  .thumb:hover img { transform: scale(1.15); }
  /* the tapes run in opposite directions; scrolling speeds them up (script) and hovering stops them */
  .tape__run { animation: run 90s linear infinite; }
  .tape--back .tape__run { animation-duration: 120s; animation-direction: reverse; }
  @keyframes run { to { transform: translateX(-50%); } }
  .tapes:hover .tape__run, .tapes:focus-within .tape__run { animation-play-state: paused; }
  /* pointing at the name sews it again: two names so the animation restarts every time */
  .js .aimark.re-a .sew { animation: resew-a 1100ms var(--ease-in-out) both; }
  .js .aimark.re-b .sew { animation: resew-b 1100ms var(--ease-in-out) both; }
  @keyframes resew-a { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes resew-b { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .js .aimark.re-a .needle { animation: tug-a 1100ms var(--ease-in-out) both; }
  .js .aimark.re-b .needle { animation: tug-b 1100ms var(--ease-in-out) both; }
  @keyframes tug-a { 30% { transform: translateY(-9%); } 100% { transform: none; } }
  @keyframes tug-b { 30% { transform: translateY(-9%); } 100% { transform: none; } }
}

/* ================= shared by every page ================= */
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; padding: 10px 16px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
#main { position: absolute; top: 0; }
.lang span { padding: 8px 6px; color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }
.lang a { padding: 8px 6px; color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--ink); }
/* ---------- header: fixed, steps aside while you read, comes back when you scroll up ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: block; padding: 0; transition: transform 420ms var(--ease-out), background-color 240ms ease; }
.top__bar { display: flex; align-items: center; gap: 28px; min-height: 76px; padding-top: env(safe-area-inset-top, 0px); }
.top.is-solid, .top.is-open { background: var(--bg); }
.top.is-hidden { transform: translateY(-101%); }
.top .lang { display: flex; align-items: center; gap: 0; }
.nav { align-items: center; }
.nav a, .nav__ind { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.nav a::after, .nav__ind::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2'%3E%3Cpath d='M0 1h6' stroke='%23f4d96c' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 10px 2px; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after, .nav__ind:hover::after, .nav__ind[aria-expanded="true"]::after, .nav__ind.is-current::after { transform: scaleX(1); }
.nav a:hover, .nav__ind:hover { text-decoration: none; }
.chev-s { width: 10px; height: 7px; transition: transform 240ms var(--ease-out); }
.nav__ind[aria-expanded="true"] .chev-s { transform: rotate(180deg); }

/* the industries panel */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--deep); padding-block: 28px 40px; }
.mega[hidden] { display: none; }
.mega__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; }
.mega__list { grid-column: 1 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.mega__list a { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; padding: 10px; color: var(--ink); text-decoration: none; transition: background-color var(--t-hover) ease; }
.mega__list a:hover, .mega__list a:focus-visible, .mega__list a[aria-current="page"] { background: var(--surface); }
.mega__list img { grid-row: 1 / span 2; width: 84px; height: 63px; object-fit: cover; background: var(--surface); }
.mega__list .n { align-self: end; font: 400 var(--step-lead)/1 var(--display); font-variation-settings: "opsz" 100; text-transform: uppercase; }
.mega__list .d { align-self: start; font-size: var(--step-small); color: var(--muted); }
.mega__try { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: start; display: grid; gap: 10px; padding: 22px; background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color var(--t-hover) ease; }
.mega__try:hover { background: #20502f; }
.mega__try b { font: 600 var(--step-body)/1.25 var(--text); }
.mega__try > span:last-child { font-size: var(--step-small); }
.mega__ui { display: grid; gap: 6px; padding: 12px; margin-bottom: 6px; border-radius: 10px; background: #eef0ea; color: #17241b; font-size: 13px; line-height: 1.35; }
.mega__ui .q { justify-self: end; max-width: 85%; padding: 6px 10px; border-radius: 10px 10px 2px 10px; background: #133621; color: #eef0ea; }
.mega__ui .a { justify-self: start; max-width: 85%; padding: 6px 10px; border-radius: 10px 10px 10px 2px; background: #fff; } /* taste-skill-ignore: interface fragment */
.mega__all { grid-column: 1 / span 8; justify-self: start; margin-left: 10px; font-size: var(--step-small); }
@media (prefers-reduced-motion: no-preference) {
  .mega.is-anim { animation: megaIn 360ms var(--ease-out) both; }
  .mega.is-anim .mega__list li { animation: itemIn 460ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
  .mega.is-anim .mega__try { animation: itemIn 520ms var(--ease-out) 160ms both; }
  @keyframes megaIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes itemIn { from { opacity: 0; transform: translateY(12px); } }
}

/* the menu button: two lines that cross into a close mark */
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; margin-right: -8px; padding: 0 8px; border: 0; background: none; color: var(--ink); font: 500 var(--step-small)/1 var(--text); }
.menu-btn__icon { position: relative; width: 22px; height: 12px; }
.menu-btn__icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 320ms var(--ease-out), top 320ms var(--ease-out); }
.menu-btn__icon i:first-child { top: 1px; }
.menu-btn__icon i:last-child { top: 9px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { top: 5px; transform: rotate(-45deg); }

/* the small-screen menu: big words, the industries as a strip of pictures, language and the one action */
.menu { position: fixed; inset: 0; z-index: 25; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--deep); padding: calc(92px + env(safe-area-inset-top, 0px)) max(var(--m), 16px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.menu[hidden] { display: none; }
.menu__seam { position: absolute; left: 0; top: calc(78px + env(safe-area-inset-top, 0px)); width: 100%; height: 4px; }
.menu__in { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 36px; }
.menu__links { display: grid; gap: 2px; }
.menu__links a { justify-self: start; font: 400 clamp(3.25rem, 15vw, 6.5rem)/0.95 var(--display); font-variation-settings: "opsz" 100; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.menu__links a[aria-current="page"] { color: var(--muted); }
.menu__h { margin-bottom: 12px; font-weight: 600; }
.menu__inds ul { display: flex; gap: 12px; margin: 0 calc(-1 * max(var(--m), 16px)); padding: 0 max(var(--m), 16px) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--m), 16px); scrollbar-width: none; list-style: none; }
.menu__inds ul::-webkit-scrollbar { display: none; }
.menu__inds li { flex: 0 0 min(44%, 220px); scroll-snap-align: start; }
.menu__inds a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; font-size: var(--step-small); font-weight: 500; }
.menu__inds img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.menu__foot { align-self: end; display: grid; gap: 18px; justify-items: start; }
.menu__foot .btn { width: 100%; }
.menu__lang { display: flex; gap: 4px; padding: 4px; background: var(--surface); }
.menu__lang a { padding: 10px 16px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu__lang a[aria-current="true"] { background: var(--ink); color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-anim { animation: menuIn 420ms var(--ease-out) both; }
  .menu.is-anim .menu__links a { animation: wordIn 620ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 55ms); }
  .menu.is-anim .menu__inds, .menu.is-anim .menu__foot { animation: itemIn 560ms var(--ease-out) 360ms both; }
  .menu.is-anim .menu__seam { animation: seamIn 900ms var(--ease-in-out) 120ms both; }
  @keyframes menuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes wordIn { from { opacity: 0; transform: translateY(40%); } }
  @keyframes seamIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
body.menu-open { overflow: hidden; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } .nav { display: none; } .top .lang { margin-left: auto; } .mega { display: none; } }
@media (max-width: 560px) { .top__cta, .top .lang { display: none; } .menu-btn { margin-left: auto; } }

.foot { grid-template-rows: auto 1fr auto auto auto; }
.foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; padding-block: 24px 8px; }
.foot__links div { display: grid; align-content: start; gap: 10px; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.foot__h { font-weight: 600; color: var(--ink); }
@media (max-width: 700px) { .foot__links { grid-template-columns: 1fr 1fr; } .foot__links div:last-child { grid-column: 1 / -1; } }

/* ================= page hero for inner pages: the sentence is the layout ================= */
.phero { min-height: 78svh; display: grid; grid-template-rows: 1fr auto; gap: 48px; padding-top: 140px; padding-bottom: 48px; }
.phero h1 { align-self: end; }
.phero h1 .display { display: block; font-size: var(--step-display); }
.phero h1 .sub { display: block; margin-top: 28px; max-width: 26ch; font: 500 var(--step-head)/1.2 var(--text); letter-spacing: -0.01em; text-transform: none; }
.phero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.phero__foot p { grid-column: 6 / span 5; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.phero__foot .btn { grid-column: 11 / span 2; justify-self: end; }
.phero--short { min-height: 56svh; }
@media (max-width: 900px) {
  .phero { min-height: 0; padding-top: 120px; gap: 32px; }
  .phero h1 .display { font-size: 15vw; line-height: 0.92; }
  .phero h1 .sub { margin-top: 18px; font-size: 1.5rem; }
  .phero__foot { grid-template-columns: 1fr; gap: 20px; }
  .phero__foot p, .phero__foot .btn { grid-column: 1; justify-self: stretch; }
}

/* a section opener: one sentence, big */
.say { padding-block: clamp(96px, 16vh, 180px) 0; }
.say h2 { max-width: 22ch; font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
.say p { margin-top: 20px; max-width: 52ch; }

/* the list of jobs: two columns of short statements */
.jobs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; margin: 72px 0 0; padding: 0; list-style: none; }
.jobs li { grid-column: span 6; display: grid; align-content: start; gap: 4px; padding-left: 24px; border-left: 3px solid var(--ink); }
.jobs h3 { font: 600 var(--step-lead)/1.2 var(--text); letter-spacing: -0.01em; }
.jobs p { margin-top: 8px; max-width: 46ch; }
@media (max-width: 900px) { .jobs { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 48px; } .jobs li { grid-column: 1; } }

/* the rules it keeps: a filled band */
.rules { margin-top: clamp(96px, 16vh, 180px); padding-block: clamp(72px, 12vh, 140px); background: var(--surface); }
.rules__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.rules h2 { grid-column: 1 / span 5; font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
.rules ul { grid-column: 7 / span 6; display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.rules li { padding-left: 28px; position: relative; max-width: 52ch; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 2px; background: var(--ink); }
@media (max-width: 900px) { .rules__in { grid-template-columns: 1fr; gap: 28px; } .rules h2, .rules ul { grid-column: 1; } }

/* other industries, as one linked sentence */
.also { padding-block: clamp(96px, 16vh, 180px) 0; }
.also p { max-width: 42ch; font: 500 var(--step-head)/1.3 var(--text); letter-spacing: -0.01em; }
.also a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
.also a:hover { text-decoration-color: currentColor; }

/* industries hub: one row per industry */
.inds-list { margin: 0; padding: 0 0 clamp(96px, 14vh, 160px); list-style: none; }
.inds-list a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: baseline; padding-block: 28px; text-decoration: none; transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
.inds-list .n { grid-column: 1 / span 7; font: 400 clamp(2.75rem, 1rem + 5vw, 6.5rem)/0.95 var(--display); font-variation-settings: "opsz" 100; text-transform: uppercase; }
.inds-list .d { grid-column: 9 / span 4; max-width: 34ch; }
.inds-list a:hover .n { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.08em; }
@media (max-width: 900px) { .inds-list a { grid-template-columns: 1fr; gap: 10px; padding-block: 22px; } .inds-list .n, .inds-list .d { grid-column: 1; } .inds-list .n { font-size: 12vw; } }

/* about */
.principles { display: grid; gap: 0; margin: 64px 0 0; padding: 0; list-style: none; }
.principles li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: 36px; }
.principles h3 { grid-column: 1 / span 6; font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; max-width: 20ch; }
.principles p { grid-column: 8 / span 5; max-width: 42ch; }
.principles li:nth-child(odd) { background: var(--surface); margin-inline: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); padding-inline: max(var(--m), env(safe-area-inset-left, 0px)); }
@media (max-width: 900px) { .principles li { grid-template-columns: 1fr; gap: 12px; padding-block: 28px; } .principles h3, .principles p { grid-column: 1; } }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-top: clamp(96px, 16vh, 180px); }
.split__img { grid-column: 1 / span 6; margin-left: calc(-1 * max(var(--m), env(safe-area-inset-left, 0px))); height: 70svh; overflow: hidden; background: var(--deep); }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__text { grid-column: 8 / span 5; display: grid; gap: 20px; }
.split__text h2 { font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split__img, .split__text { grid-column: 1; } .split__img { height: auto; aspect-ratio: 4 / 5; margin-right: calc(-1 * max(var(--m), 16px)); } }
.verbs-line { display: flex; flex-wrap: wrap; gap: 4px 0.35em; margin-top: 28px; font: 400 var(--step-display)/0.9 var(--display); font-variation-settings: "opsz" 100; text-transform: uppercase; }
.verbs-line a { text-decoration: none; }
.verbs-line a:hover { text-decoration: underline; text-decoration-thickness: 0.03em; text-underline-offset: 0.06em; }
@media (max-width: 900px) { .verbs-line { font-size: 15vw; } }

/* contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-bottom: clamp(96px, 14vh, 160px); }
.contact__side { grid-column: 1 / span 5; display: grid; align-content: start; gap: 28px; }
.contact__side .big { font: 500 var(--step-head)/1.25 var(--text); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contact__side .big a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
.steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 2.2em 1fr; counter-increment: st; max-width: 40ch; }
.steps li::before { content: counter(st); font: 400 var(--step-lead)/1 var(--display); color: var(--muted); }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; align-content: start; padding: clamp(24px, 3vw, 40px); background: var(--surface); }
.form h2 { grid-column: 1 / -1; font: 600 var(--step-lead)/1.2 var(--text); }
.field { display: grid; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--step-small); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.4 var(--text); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f4d96c' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.8; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form .note { grid-column: 1 / -1; font-size: var(--step-small); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 56px; } .contact__side, .form { grid-column: 1; } .form { grid-template-columns: 1fr; margin-inline: calc(-1 * max(var(--m), 16px)); } .form .btn { width: 100%; } }

/* policies: a contents column and a reading column */
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-bottom: clamp(96px, 14vh, 160px); }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: 24px; display: grid; gap: 10px; font-size: var(--step-small); }
.toc p { font-weight: 600; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.prose { grid-column: 5 / span 7; max-width: 68ch; min-width: 0; }
.toc { min-width: 0; }
.prose > .updated { color: var(--muted); font-size: var(--step-small); }
.prose .intro-p { margin-top: 28px; font-size: var(--step-lead); line-height: 1.4; }
.prose section { padding-top: 56px; scroll-margin-top: 24px; }
.prose h2 { font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
.prose h3 { margin-top: 28px; font: 600 var(--step-body)/1.4 var(--text); }
.prose p, .prose ul, .prose ol, .prose .table { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.prose strong { font-weight: 600; }
.prose .table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; }
.prose thead th { color: var(--muted); font-weight: 500; }
.prose tbody tr:nth-child(odd) { background: var(--surface); }
.prose tbody td:first-child, .prose tbody th:first-child { padding-left: 12px; }
.blank { padding: 0 0.3em; background: var(--ink); color: var(--bg); font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 40px; } .toc { position: static; grid-column: 1; padding: 20px; background: var(--surface); } .prose { grid-column: 1; } }

/* home: industries as one sentence */
.inds { padding-block: clamp(120px, 20vh, 220px) 0; }
.inds p { margin-left: 16.66%; max-width: 30ch; font: 500 var(--step-head)/1.3 var(--text); letter-spacing: -0.01em; }
.inds a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
.inds a:hover { text-decoration-color: currentColor; }
@media (max-width: 900px) { .inds { padding-block: 96px 0; } .inds p { margin-left: 0; font-size: 1.5rem; } }

/* not found */
.nf { min-height: 80svh; display: grid; align-content: center; gap: 32px; padding-block: 140px 80px; }
.nf h1 { font-size: var(--step-display); }
.nf p { max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.nf .row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
@media (max-width: 900px) { .nf h1 { font-size: 15vw; } }
.ui__input--static { gap: 10px; padding: 11px 14px; }
.say-h { padding-top: clamp(96px, 16vh, 180px); font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
.small-h { margin-top: 8px; font: 600 var(--step-body)/1.3 var(--text); }
.phero--legal { min-height: 0; padding-bottom: 56px; }
.phero--legal h1 .display { font-size: clamp(3.25rem, 1rem + 6.5vw, 7.5rem); }
.prose { counter-reset: sec; }
.prose section h2::before { counter-increment: sec; content: counter(sec) ". "; color: var(--muted); }
.toc ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.toc li { counter-increment: t; display: grid; grid-template-columns: 2em 1fr; }
.toc li::before { content: counter(t) "."; color: var(--muted); }
@media (max-width: 900px) { .phero--legal h1 .display { font-size: 12vw; line-height: 0.95; } }
.ui__input--static svg { width: 18px; height: 18px; flex: none; }
.verbs-line { padding-bottom: clamp(96px, 16vh, 180px); }
.hero__foot p, .phero__foot p { grid-column: 5 / span 5; }
.hero__foot .btn, .phero__foot .btn { grid-column: 10 / span 3; }
@media (max-width: 900px) { .hero__foot p, .hero__foot .btn, .phero__foot p, .phero__foot .btn { grid-column: 1; } }

/* what the team receives: the hand-off and the monthly report, as interface fragments */
.handoff { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; padding-top: clamp(96px, 16vh, 180px); }
.handoff__text { grid-column: 1 / span 4; display: grid; gap: 20px; }
.handoff__text h2 { font: 600 var(--step-head)/1.15 var(--text); letter-spacing: -0.02em; }
.lead { grid-column: 5 / span 4; overflow: hidden; border-radius: 12px; background: #e5ded4; color: #111b21; font-size: 14px; line-height: 1.4; }
.lead .wa__top { margin: 0; border-radius: 0; }
.lead dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 12px; padding: 14px; border-radius: 10px; background: #d9fdd3; }
.lead dt { color: #4a5a50; }
.lead dd { margin: 0; font-weight: 600; }
.lead__foot { margin: 0 12px 12px; font-size: 13px; color: #4a5a50; }
.report { grid-column: 9 / span 4; display: grid; gap: 10px; padding: 18px; border-radius: 12px; background: #eef0ea; color: #17241b; font-size: 14px; line-height: 1.4; }
.report__t { font-weight: 600; }
.report__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.report__nums div { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: #fff; } /* taste-skill-ignore: interface fragment */
.report__nums b { font: 400 26px/1 var(--display); color: #133621; }
.report__nums span { font-size: 13px; color: #5c6a5f; }
.report__h { margin-top: 6px; font-size: 13px; font-weight: 600; color: #5c6a5f; }
.report ol { margin: 0; padding-left: 1.2em; }
@media (max-width: 900px) { .handoff { grid-template-columns: 1fr; } .handoff__text, .lead, .report { grid-column: 1; } }

/* industries hub: a picture on each row */
.inds-list .t { grid-column: 1 / span 2; align-self: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep); }
.inds-list .t img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.inds-list .n { grid-column: 3 / span 6; }
.inds-list a:hover .t img { transform: scale(1.06); }
@media (max-width: 900px) { .inds-list .t { grid-column: 1; width: 45%; } }

/* about: the four verbs as pictures */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding: 0 0 clamp(96px, 16vh, 180px); list-style: none; }
.tiles a { display: grid; gap: 14px; text-decoration: none; }
.tiles img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--deep); }
.tiles .display { font-size: clamp(2.75rem, 1rem + 3.5vw, 5rem); }
.tiles a:hover .display { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.08em; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }

.intro .more { margin: 32px 0 0 16.66%; max-width: 52ch; font-size: var(--step-lead); line-height: 1.4; }
@media (max-width: 900px) { .intro .more { margin-left: 0; font-size: var(--step-body); } }
.field label { font-size: var(--step-body); }
.meta details p { font-size: var(--step-body); }

/* the logo sews in order: the thread through the A and the eye first, then the loose tail */
@media (prefers-reduced-motion: no-preference) {
  .js .aimark .sew1 { animation: sew 1250ms var(--ease-in-out) 800ms forwards; }
  .js .aimark .sew2 { animation: sew 420ms var(--ease-out) 2010ms forwards; }
  .js .aimark.re-a .sew1 { animation: resew-a 1000ms var(--ease-in-out) both; }
  .js .aimark.re-a .sew2 { animation: resew-a 360ms var(--ease-out) 960ms both; }
  .js .aimark.re-b .sew1 { animation: resew-b 1000ms var(--ease-in-out) both; }
  .js .aimark.re-b .sew2 { animation: resew-b 360ms var(--ease-out) 960ms both; }
  .js .seam { transition: opacity 300ms var(--ease-out); }
}

/* suggested questions beside the industry demos */
.trys { display: grid; gap: 12px; }
.trys p { font-weight: 600; }
.trys div { display: flex; flex-wrap: wrap; gap: 8px; }
.try { padding: 10px 14px; border: 0; background: var(--deep); color: var(--ink); font-size: var(--step-small); text-align: left; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.try:hover { background: #0b2215; }
.try:active { transform: scale(0.97); }

/* pricing: the short version on the home page, the full page at /pricing/ */
.price--simple { min-height: 0; gap: 48px; }
.fit__more { justify-self: start; margin-top: 18px; display: inline-block; }
.fit__more[hidden] { display: none; }
.price-sw { grid-column: 10 / span 3; justify-self: end; display: flex; align-items: center; gap: 12px; font-size: var(--step-small); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; padding-top: 24px; }
.plan { position: relative; display: grid; gap: 16px; padding: clamp(24px, 2.6vw, 36px); background: var(--surface); }
.plan--rec { background: var(--deep); }
.plan--rec::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--ink); }
.plan__rec { position: absolute; top: 18px; right: clamp(24px, 2.6vw, 36px); padding: 4px 12px; background: var(--ink); color: var(--accent-ink); font-size: var(--step-small); font-weight: 600; }
.plan__name { font: 400 var(--step-head)/1 var(--display); font-variation-settings: "opsz" 100; text-transform: uppercase; }
.plan__who { max-width: 34ch; }
.plan__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 400 clamp(3rem, 1.6rem + 2.6vw, 4.5rem)/1 var(--display); font-variation-settings: "opsz" 100; }
.plan__m > span:last-child { font: 500 var(--step-body)/1 var(--text); }
.plan__s { font-size: var(--step-small); }
.plan__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding-block: 12px; font-size: var(--step-small); }
.plan__facts dt { color: var(--muted); }
.plan__facts dd { margin: 0; font-weight: 600; }
.plan__inc { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan__inc li { position: relative; padding-left: 26px; }
.plan__inc li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.plan .btn { justify-self: stretch; margin-top: 8px; }
.cmp { margin-top: 40px; overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; vertical-align: top; }
.cmp thead th { font: 600 var(--step-body)/1.2 var(--text); }
.cmp thead th:not(:first-child), .cmp td { text-align: center; }
.cmp tbody tr:nth-child(odd) { background: var(--surface); }
.cmp tbody th { font-weight: 500; }
.yes { font-weight: 700; }
.no { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .price-sw { grid-column: 1; justify-self: start; } .plan--rec { order: -1; } }
@media (max-width: 700px) { .cmp th, .cmp td { padding: 10px 6px; font-size: var(--step-small); } .cmp tbody th { min-width: 120px; } }

/* the Ask button and panel: the site's own AI assistant and search */
.askbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid rgb(244 217 108 / 0.4); background: none; color: var(--ink); font: 500 var(--step-small)/1 var(--text); transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.askbtn:hover { border-color: var(--ink); background: rgb(244 217 108 / 0.06); }
.askbtn:active { transform: scale(0.97); }
.askbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.askbtn__i { width: 18px; height: 18px; flex: none; }
.askbtn__k { padding: 3px 6px; border: 1px solid rgb(244 217 108 / 0.35); font: 500 11px/1 var(--text); color: var(--muted); }
@media (hover: none), (max-width: 1180px) { .askbtn__k { display: none; } }
@media (max-width: 900px) { .askbtn { margin-left: auto; } .top .lang { margin-left: 0; } }
@media (max-width: 560px) { .askbtn { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; } .askbtn__t { display: none; } .askbtn__i { width: 22px; height: 22px; } .menu-btn { margin-left: 0; } }
body.ask-open { overflow: hidden; }

.askp { position: fixed; inset: 0; z-index: 80; }
.askp[hidden] { display: none; }
.askp__scrim { position: absolute; inset: 0; background: rgb(6 20 12 / 0.6); opacity: 0; transition: opacity 260ms ease; }
.askp__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); background: var(--deep); color: var(--ink); box-shadow: -30px 0 80px rgb(0 0 0 / 0.35); opacity: 0; transform: translateX(28px); transition: transform 360ms var(--ease-out), opacity 220ms ease; }
.askp.is-in .askp__scrim { opacity: 1; }
.askp.is-in .askp__sheet { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .askp__scrim, .askp__sheet { transition: none; } }
.askp__head { display: flex; align-items: center; gap: 14px; padding: 18px 12px 14px 20px; }
.askp__mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.askp__mark svg { width: 22px; height: 22px; }
.askp__title { flex: 1; min-width: 0; }
.askp__title h2 { margin: 0; font: 600 1.0625rem/1.25 var(--text); }
.askp__title p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.askp__x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); }
.askp__x svg { width: 22px; height: 22px; }
.askp__x:hover { background: rgb(244 217 108 / 0.08); }
.askp__seam { display: block; width: 100%; height: 4px; flex: none; }
.askp__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; padding: 22px 20px; }
.askp__intro p { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 34ch; }
.askp__intro[hidden] { display: none; }
.askp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.askp__chip { min-height: 36px; padding: 7px 13px; border: 1px solid rgb(244 217 108 / 0.35); border-radius: 999px; background: none; color: var(--ink); font-size: 14px; line-height: 1.2; text-align: left; transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease; }
.askp__chip:hover { border-color: var(--ink); background: rgb(244 217 108 / 0.06); }
.askp__m { margin: 0; }
.askp__m--me { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--accent-ink); font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.askp__m--ai p { margin: 0; font-size: 1rem; line-height: 1.55; }
.askp__links { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(244 217 108 / 0.18); }
.askp__links a, .askp__res a { display: grid; gap: 2px; padding: 11px 26px 11px 0; border-bottom: 1px solid rgb(244 217 108 / 0.18); color: var(--ink); text-decoration: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f4d96c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 4px center; }
.askp__links b, .askp__res b { font-size: 15px; font-weight: 600; }
.askp__links span, .askp__res span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.askp__links a:hover b, .askp__res a:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
.askp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.askp__cta .btn { min-height: 44px; padding: 0 18px; font-size: var(--step-small); }
.askp__cta .link { border: 0; background: none; padding: 0; font-size: var(--step-small); }
.askp__typing { display: flex; gap: 5px; padding: 6px 0; }
.askp__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.35; animation: askdot 1s infinite ease-in-out; }
.askp__typing i:nth-child(2) { animation-delay: 0.15s; }
.askp__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes askdot { 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) { .askp__m { animation: rise 0.4s var(--ease-out) both; } }
.askp__res { flex: none; max-height: 42vh; overflow-y: auto; padding: 6px 20px 10px; border-top: 1px solid rgb(244 217 108 / 0.18); background: var(--bg); }
.askp__res[hidden] { display: none; }
.askp__res-h { margin: 8px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.askp__res ul { margin: 0; padding: 0; list-style: none; }
.askp__res li[aria-selected="true"] a { background-color: var(--surface); box-shadow: -8px 0 0 var(--surface), 8px 0 0 var(--surface); }
.askp__bar { flex: none; display: flex; align-items: center; gap: 6px; margin: 12px 20px 0; padding: 5px; background: var(--bg); border: 1px solid rgb(244 217 108 / 0.4); }
.askp__bar:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.askp__bar input { flex: 1; min-width: 0; padding: 10px 8px; border: 0; background: none; color: var(--ink); font: 400 16px/1.3 var(--text); }
.askp__bar input::placeholder { color: var(--muted); }
.askp__bar input:focus-visible { outline: none; }
.askp__send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--accent); color: var(--accent-ink); transition: transform var(--t-press) var(--ease-out); }
.askp__send:active { transform: scale(0.94); }
.askp__send svg { width: 18px; height: 18px; }
.askp__fine { flex: none; margin: 0; padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.askp__fine a { color: var(--ink); }
.askp__clear { padding: 0; border: 0; background: none; color: var(--muted); font-size: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.askp__clear:hover { color: var(--ink); }
.askp__lead { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; background: var(--surface); }
.askp__lead[hidden] { display: none; }
.askp__lead-h { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.askp__lead .field input, .askp__lead .field textarea { min-height: 44px; padding: 10px 12px; font-size: 16px; }
.askp__lead .field textarea { min-height: 84px; }
.askp__lead .btn { grid-column: 1 / -1; min-height: 46px; }
.askp__lead .note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .askp__lead { grid-template-columns: minmax(0, 1fr); } .askp__head { padding-left: 16px; } .askp__log { padding-inline: 16px; } .askp__bar { margin-inline: 16px; } .askp__res, .askp__fine { padding-inline: 16px; } }
[aria-invalid="true"] { outline: 2px solid #e8a7b5 !important; outline-offset: 2px; }
.askp__lead .field label { font-size: 14px; }
.askp__links span, .askp__res span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* home hero: the demo request and a way straight into the live demo */
.hero__acts { grid-column: 10 / span 3; justify-self: end; display: grid; gap: 12px; }
.hero__acts .btn { width: 100%; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn.btn--line:hover { background: rgb(244 217 108 / 0.12); color: var(--ink); } }
.btn--line:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 900px) { .hero__acts { grid-column: 1; justify-self: stretch; } }
@media (min-width: 901px) and (max-width: 1200px) { .hero__foot p { grid-column: 3 / span 6; } .hero__acts { grid-column: 9 / span 4; } }

/* Try it: the sample store reads as something you can use */
.fit__plate { align-content: center; gap: 14px; }
.fit__live { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--step-small); font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.fit__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #6fd69a; }
.ui__try { flex: none; display: flex; gap: 6px; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.ui__try::-webkit-scrollbar { display: none; }
.ui__try .chip { flex: none; white-space: nowrap; background: #fff; }
.ui__try .chip:hover { background: #f4f5f0; }
.ui__input.is-hint { box-shadow: 0 0 0 2px #133621; }
@media (prefers-reduced-motion: no-preference) {
  .fit__dot { animation: livedot 1.8s ease-out infinite; }
  .ui__input.is-hint { box-shadow: none; animation: inputhint 2.4s var(--ease-out) infinite; }
}
@keyframes livedot { 0% { box-shadow: 0 0 0 0 rgb(111 214 154 / 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgb(111 214 154 / 0); } }
@keyframes inputhint { 0% { box-shadow: 0 0 0 0 rgb(19 54 33 / 0.5); } 60%, 100% { box-shadow: 0 0 0 10px rgb(19 54 33 / 0); } }

/* Dress To: screenshots of the live stylist on dressto.com */
.proj__big--shot { background: var(--accent); }
.proj__big--shot.proj__big--night { background: radial-gradient(120% 90% at 50% 18%, #2b1a1e, #120d0e 70%); }
.proj__big--night .shot { box-shadow: 0 34px 70px -24px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(241 198 192 / 0.18); }
.proj__big .shot { position: absolute; left: 50%; top: 7%; width: auto; height: 86%; max-width: none; object-fit: contain; border-radius: 14px; transform: translateX(-50%); box-shadow: 0 34px 70px -24px rgb(14 42 25 / 0.55), 0 0 0 1px rgb(19 54 33 / 0.08); }
@media (prefers-reduced-motion: no-preference) { .proj .proj__big .shot { transition: transform 1400ms var(--ease-soft); } .proj.is-in .proj__big .shot { transform: translate(-50%, -2%); } }
.proj__small--shot { aspect-ratio: auto; border-radius: 10px; background: #fff; box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5); }
.proj__small--shot img { height: auto; object-fit: initial; }
.proj__text .proj__note + a { margin-top: 12px; }

/* home: the tapes run straight into the live demo. The demo's green rises out of the page green under the tapes,
   and this section stays unpositioned so the running stitch shows down its left edge, beside the chat window. */
.tapes { height: clamp(200px, 15vw, 300px); }
main > .fit--lead { position: static; min-height: 0; background: linear-gradient(to bottom, var(--bg), var(--surface) clamp(140px, 18vh, 200px)); }
.fit--lead .fit__plate { align-content: start; padding-top: clamp(32px, 5vh, 56px); }
.fit--lead .fit__side { padding-top: clamp(32px, 5vh, 56px); }
@media (max-width: 900px) {
  .tapes { height: 200px; }
  .fit--lead .fit__plate { padding-top: 24px; }
}

/* ---------- the live demos ---------- */
/* the typing state says what the concierge is doing */
.typing { align-items: center; gap: 10px; }
.typing__d { display: inline-flex; gap: 4px; }
.typing__t { font-size: 13px; line-height: 1; color: #5c6a5f; }
/* replies arrive word by word; the cards and suggestions settle in after the words */
.b__x { transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.b__x.is-later { opacity: 0; transform: translateY(6px); }
.ui__btn.is-tap { background: #e1e5da; transform: scale(0.92); }
/* the lead card: what the store's team receives, filling in as the visitor chats */
.lc { overflow: hidden; border-radius: 12px; background: #e5ded4; color: #111b21; font-size: 14px; line-height: 1.4; }
.lc .wa__top { margin: 0; border-radius: 0; }
.lc dl { display: grid; gap: 4px; margin: 10px 10px 0; padding: 10px 12px; border-radius: 10px; background: #d9fdd3; min-height: 2.6em; }
.lc dl:empty::before { content: attr(data-empty); color: #4a5a50; }
.lc dl > div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 12px; margin: 0 -6px; padding: 3px 6px; border-radius: 6px; }
.lc dt { color: #4a5a50; }
.lc dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lc__foot { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px 11px; font-size: 13px; color: #4a5a50; }
.lc__foot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6fd69a; }
.lc[data-state="ready"] .lc__foot::before, .lc[data-state="sent"] .lc__foot::before { content: "✓"; width: auto; height: auto; border-radius: 0; background: none; color: #1f8f5a; font-weight: 700; line-height: 1; }
.lc[data-state="sent"] .lc__foot::before { content: "✓✓"; color: #34b7f1; letter-spacing: -0.2em; padding-right: 0.2em; }
html:not(.js) .lc { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lc dl > div.is-new { animation: lcnew 1.8s var(--ease-out); }
  .lc[data-state="wait"] .lc__foot::before { animation: livedot 1.8s ease-out infinite; }
  .lc.is-sent { animation: lcsent 700ms var(--ease-out); }
}
@keyframes lcnew { from { background: rgb(244 217 108 / 0.95); } to { background: rgb(244 217 108 / 0); } }
@keyframes lcsent { 40% { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgb(14 42 25 / 0.6); } }
/* one compact unit: the side column stacks from the top, the buttons line up with the bottom of the chat */
.fit__side { justify-content: flex-start; gap: 24px; }
.fit__side .desc { margin-top: 14px; max-width: 46ch; }
.fit__side .cells { margin-top: auto; }
.fit .ui__input .ui__btn:first-child { margin-left: 2px; }
@media (max-width: 900px) {
  .fit__side { gap: 20px; }
  .fit__side .cells { margin-top: 4px; }
}