/*
  Medbrus v2 — a preview redesign in the style of elevenlabs.io.
  Plain CSS (no Tailwind build) so it stays separate from the live site.

  Type scale (taken from elevenlabs.io, one scale used everywhere):
    h1 48/52 light · h2 36/42 light · card title 20/28 · body 16/24 · lead 18/28 · small 14 · caption 13
  Colours are sampled from their site: warm off-white page, warm grey text.
*/

:root {
  --bg: #fdfcfc;
  --surface: #f5f4f2;
  --surface-strong: #ebe9e5;
  --text: #000000;
  --text-muted: #777169;
  --text-faint: #a59f97;
  --border: #e8e5e0;
  --radius: 20px;
  --radius-lg: 28px;
  --container: 1280px;
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Film grain, tiled over every gradient */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.2 0 0 0 -0.1 1.2 0 0 0 -0.1 1.2 0 0 0 -0.1 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 300; }
/* No single words stranded on the last line: balance headings, tidy the end of paragraphs */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* ---------- Type scale ---------- */
.h1 { font-size: clamp(34px, 4.7vw, 56px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 300; }
.h2 { font-size: clamp(28px, 3.5vw, 36px); line-height: 1.17; letter-spacing: -0.01em; font-weight: 300; }
.h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.005em; font-weight: 400; }
.lead { font-size: 18px; line-height: 28px; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; line-height: 21px; }
.caption { font-size: 13px; line-height: 18px; color: var(--text-faint); }
.h1 .soft, .h2 .soft { color: var(--text-muted); }

/* ---------- Header: logo, links beside it, actions on the right ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 252, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header .container { display: flex; align-items: center; height: 68px; gap: 8px; }
.logo { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: -0.03em; margin-right: 12px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 8px 12px; border-radius: 999px; font-size: 15px; line-height: 20px; color: var(--text); transition: background .15s; }
.nav a:hover { background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Two buttons from 720px up; below that, a single "Let's talk" that opens the sheet */
.btn.mob-only { display: none; }
@media (max-width: 719px) { .btn.desk-only { display: none; } .btn.mob-only { display: inline-flex; } }
@media (max-width: 480px) { .logo { margin-right: 4px; } .nav a { padding: 8px 9px; } }
/* On the narrowest phones the logo, both links and the button no longer fit, so the button is just the photo */
/* A red dot on the phone button, like a notification, until the sheet has been opened */
.btn.mob-only { position: relative; }
.btn.mob-only::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #ef3b36; box-shadow: 0 0 0 2px var(--bg); }
.btn.mob-only.is-seen::after { display: none; }
@media (max-width: 359px) { .logo { font-size: 18px; } .nav a { padding: 8px 6px; font-size: 14px; } }
@media (max-width: 439px) { .btn.mob-only { padding: 0; width: 34px; height: 34px; } .btn.mob-only > span { display: none; } .btn.mob-only .avatar { width: 28px; height: 28px; } }

/* A plain line under the header saying what the page is (case studies and demos) */
.page-strip { position: sticky; top: 68px; z-index: 40; background: rgba(253, 252, 252, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.page-strip .container { display: flex; align-items: center; height: 44px; }
.page-strip p { font-size: 13px; line-height: 18px; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-outline { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.btn-outline:hover { background: var(--surface); }
.btn-white { background: #fff; color: var(--text); }
.btn-white:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .18); }
.btn-ghost-white { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost-white:hover { background: rgba(255, 255, 255, .28); }
.btn button, button.btn { font-family: var(--font-body); border: 0; cursor: pointer; }
.btn .avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 500; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s; }
a:hover .text-link svg, .text-link:hover svg { transform: translateX(3px); }

/* ---------- Sections ---------- */
.section { padding-block: 56px; }
@media (min-width: 768px) { .section { padding-block: 88px; } }
.section.tight-top { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.section-head p { max-width: 440px; }

/* ---------- Hero: headline left, intro right (as on elevenlabs.io) ---------- */
.hero { padding-block: 56px 48px; }
@media (min-width: 900px) { .hero { padding-block: 96px 64px; } }
.hero-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 48px; } }
.hero .btn-row { margin-top: 28px; }
.hero-intro { padding-top: 6px; }
@media (min-width: 900px) { .hero-intro { padding-top: 10px; } }

/* ---------- Grain gradients ---------- */
.grain {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background-color: #8a7a9a;
}
/* Colour layer sits on ::before so it can scale on hover without moving content */
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--g);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
/* Grain on top of the colour: a 128px luminance-noise tile blended with "overlay", as on elevenlabs.io */
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--noise);
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: .5;
}
a.grain:hover::before, a:hover > .grain::before { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .grain::before { transition: none; } }

/*
  Colour recipes, tuned to the muted, earthy look of the ElevenLabs customer-story covers:
  dusty hues, warm brown-plum shadows instead of near-black, and a soft dark fade (--fade) at the
  bottom so white captions read. Each mixes several hues as soft blobs; top layer first.
*/
.grain { --fade: linear-gradient(0deg, rgba(34, 16, 22, .34) 0%, rgba(34, 16, 22, 0) 52%); }

/* Lavender → mauve → apricot → rose */
.grain-sunset {
  background-color: #b58aa6;
  --g:
    var(--fade),
    radial-gradient(55% 50% at 8% 18%, #8f98c8 0%, transparent 70%),
    radial-gradient(55% 45% at 95% 8%, #c794b6 0%, transparent 70%),
    radial-gradient(60% 40% at 48% 100%, #eaa655 0%, transparent 72%),
    radial-gradient(45% 40% at 100% 92%, #df8a55 0%, transparent 70%),
    radial-gradient(50% 45% at 0% 90%, #d0665c 0%, transparent 70%),
    linear-gradient(180deg, #a995b4 0%, #bb8ba6 48%, #cd7b66 100%);
}
/* Slate blue → gold → ember → warm umber */
.grain-dusk {
  background-color: #7d7e84;
  --g:
    var(--fade),
    radial-gradient(45% 40% at 0% 46%, #f0c885 0%, transparent 70%),
    radial-gradient(60% 38% at 50% 78%, #d0663a 0%, transparent 70%),
    radial-gradient(48% 35% at 50% 100%, #2a1612 0%, transparent 80%),
    radial-gradient(40% 40% at 0% 100%, #3a2220 0%, transparent 75%),
    radial-gradient(45% 45% at 100% 76%, #b9593a 0%, transparent 70%),
    radial-gradient(70% 50% at 58% 14%, #7e9cb4 0%, transparent 75%),
    linear-gradient(180deg, #869fb0 0%, #8f8d8e 40%, #a5543a 70%, #2c1a1a 100%);
}
/* Pale sky → sage → moss → deep forest */
.grain-meadow {
  background-color: #5f7d4c;
  --g:
    var(--fade),
    radial-gradient(70% 28% at 50% 0%, #c1d3e0 0%, transparent 80%),
    radial-gradient(55% 16% at 20% 47%, #b3c08a 0%, transparent 80%),
    radial-gradient(50% 22% at 90% 58%, #77a05a 0%, transparent 80%),
    linear-gradient(180deg, #b3cadb 0%, #a6bcc4 26%, #86a272 45%, #577f3c 60%, #36592a 78%, #1c3416 100%);
}
/* Dusky indigo night, for the closing banner */
.grain-night {
  background-color: #26263c;
  --g:
    radial-gradient(55% 60% at 88% 12%, #7d70b4 0%, transparent 70%),
    radial-gradient(50% 55% at 8% 98%, #c26e5e 0%, transparent 70%),
    radial-gradient(45% 45% at 60% 72%, #46448a 0%, transparent 70%),
    linear-gradient(160deg, #28283f 0%, #1a1a2e 100%);
}

/* Case-study colours — none reuse the orange/red above */
/* Ice → sea-glass → dusty azure → deep teal-navy, with a soft peach spark */
.grain-ocean {
  background-color: #3f7ea6;
  --g:
    var(--fade),
    radial-gradient(40% 25% at 96% 6%, #ecc9a8 0%, transparent 72%),
    radial-gradient(55% 32% at 0% 40%, #78c6b4 0%, transparent 72%),
    radial-gradient(60% 38% at 100% 66%, #5b97c8 0%, transparent 72%),
    radial-gradient(55% 35% at 0% 84%, #3a4f98 0%, transparent 72%),
    linear-gradient(180deg, #bcd8e4 0%, #6aa4c6 30%, #35699c 62%, #12304f 100%);
}
/* Lavender → orchid-pink → dusty violet → plum, with an apricot spark */
.grain-violet {
  background-color: #7a5cb0;
  --g:
    var(--fade),
    radial-gradient(40% 25% at 4% 8%, #efcca0 0%, transparent 72%),
    radial-gradient(55% 32% at 100% 40%, #dc92c4 0%, transparent 72%),
    radial-gradient(55% 38% at 0% 68%, #8c6ccc 0%, transparent 72%),
    radial-gradient(55% 35% at 100% 88%, #4a4396 0%, transparent 72%),
    linear-gradient(180deg, #d0c2ea 0%, #a285d4 30%, #6f4ca8 62%, #2a1a48 100%);
}
/* Cream → pistachio → sage-emerald → deep green, with a pale-gold spark */
.grain-jade {
  background-color: #4c9470;
  --g:
    var(--fade),
    radial-gradient(40% 25% at 96% 6%, #f2e6a8 0%, transparent 72%),
    radial-gradient(55% 32% at 0% 42%, #cddb86 0%, transparent 72%),
    radial-gradient(60% 38% at 100% 68%, #5eb596 0%, transparent 72%),
    radial-gradient(55% 35% at 0% 86%, #2f7a60 0%, transparent 72%),
    linear-gradient(180deg, #d6e8c8 0%, #7fbb92 30%, #3f8a62 62%, #12342a 100%);
}
/* Blush → dusty rose → orchid → aubergine, with a lilac glow */
.grain-orchid {
  background-color: #a65a90;
  --g:
    var(--fade),
    radial-gradient(40% 25% at 4% 8%, #cdbff0 0%, transparent 72%),
    radial-gradient(55% 32% at 100% 42%, #f2cbe0 0%, transparent 72%),
    radial-gradient(55% 38% at 0% 70%, #dc82b0 0%, transparent 72%),
    radial-gradient(55% 35% at 100% 88%, #7e3c98 0%, transparent 72%),
    linear-gradient(180deg, #f0cfe0 0%, #d98cb8 30%, #a64d8c 62%, #3c1838 100%);
}
/* Periwinkle → soft blue → violet → midnight, with a pale-cyan glow */
.grain-indigo {
  background-color: #5766c0;
  --g:
    var(--fade),
    radial-gradient(40% 25% at 4% 6%, #f1d6ba 0%, transparent 72%),
    radial-gradient(55% 32% at 100% 40%, #94d6e6 0%, transparent 72%),
    radial-gradient(55% 38% at 0% 70%, #6e7edc 0%, transparent 72%),
    radial-gradient(55% 35% at 100% 88%, #6c46b0 0%, transparent 72%),
    linear-gradient(180deg, #c4cbee 0%, #7886d8 30%, #4655b8 62%, #141a42 100%);
}

/* More looks, taken from the ElevenLabs blog covers. Not used on a page yet. */
/* Ice-white burst of light rays over cobalt */
.grain-glacier {
  background-color: #3a62b0;
  --g:
    linear-gradient(0deg, #12306e 0%, rgba(18, 48, 110, .5) 28%, transparent 58%),
    radial-gradient(38% 34% at 52% 40%, rgba(255, 255, 255, .92) 0%, transparent 72%),
    conic-gradient(from 205deg at 52% 42%, #2b52a0, #e3edfa, #4b78c8, #f4f8fd, #2f58a8, #c9d9f0, #3d68b8, #e8f0fa, #2b52a0);
}
/* Black, brushed-metal grey */
.grain-graphite {
  background-color: #2f2e30;
  --g:
    radial-gradient(60% 40% at 78% 10%, #9a9899 0%, transparent 72%),
    radial-gradient(50% 35% at 10% 40%, #5f5d5f 0%, transparent 72%),
    radial-gradient(60% 30% at 60% 62%, #767476 0%, transparent 72%),
    linear-gradient(180deg, #484649 0%, #2e2c2f 45%, #0e0d0e 100%);
}
/* Lime and pale-sky blur, soft and airy */
.grain-fern {
  background-color: #7b9c50;
  --g:
    var(--fade),
    radial-gradient(55% 35% at 12% 12%, #e0ea9a 0%, transparent 72%),
    radial-gradient(55% 35% at 92% 30%, #c0d6d0 0%, transparent 72%),
    radial-gradient(60% 38% at 40% 62%, #92bc5c 0%, transparent 72%),
    linear-gradient(180deg, #cadfa8 0%, #94b568 34%, #5b8a3c 66%, #1e3a1c 100%);
}
/* Teal and sea-blue with a sandy glow */
.grain-lagoon {
  background-color: #3d8fa6;
  --g:
    var(--fade),
    radial-gradient(45% 30% at 0% 8%, #cae48a 0%, transparent 72%),
    radial-gradient(55% 32% at 100% 36%, #5ab8a4 0%, transparent 72%),
    radial-gradient(60% 34% at 12% 96%, #eebc90 0%, transparent 72%),
    linear-gradient(180deg, #8dd0bc 0%, #4f9fb2 34%, #2c6688 66%, #0f2e44 100%);
}
/* Dusty electric blue deepening to navy, with a soft coral flare */
.grain-cobalt {
  background-color: #4a6fd0;
  --g:
    var(--fade),
    radial-gradient(40% 26% at 90% 18%, #ee8a72 0%, transparent 72%),
    radial-gradient(55% 34% at 14% 14%, #b0d0f4 0%, transparent 72%),
    radial-gradient(60% 36% at 8% 66%, #6a96ee 0%, transparent 72%),
    linear-gradient(180deg, #6f9aea 0%, #4469d4 36%, #2a3c9c 66%, #0a0f2c 100%);
}
/* Black with soft clay-orange and sage-green light streaks */
.grain-aurora {
  background-color: #0e0d0d;
  --g:
    linear-gradient(0deg, #070606 0%, transparent 45%),
    linear-gradient(118deg, #0c0b0b 0%, #0c0b0b 14%, #c8664a 27%, #ecb494 33%, #0c0b0b 44%, #2f6f58 56%, #86c8a8 62%, #0c0b0b 74%, #d9805a 86%, #0c0b0b 100%);
}

/* More looks, taken from the ElevenLabs customer-story covers. Not used on a page yet. */
/* Terracotta and rust streaks with a dusty slate-blue patch */
.grain-terracotta {
  background-color: #b95a3c;
  --g:
    var(--fade),
    radial-gradient(34% 40% at 0% 52%, #86a4ca 0%, transparent 72%),
    radial-gradient(40% 30% at 100% 0%, #e9a07a 0%, transparent 72%),
    linear-gradient(118deg, #c25a3a 0%, #e0855e 22%, #a2503f 40%, #dc7a50 58%, #84505a 74%, #d98d66 100%);
}
/* Pastel sky, peach and rose haze */
.grain-haze {
  background-color: #d9a9b0;
  --g:
    linear-gradient(0deg, rgba(104, 62, 84, .62) 0%, rgba(104, 62, 84, 0) 58%),
    radial-gradient(50% 40% at 20% 18%, #8db3e0 0%, transparent 72%),
    radial-gradient(50% 40% at 92% 8%, #cbbae6 0%, transparent 72%),
    radial-gradient(55% 40% at 82% 70%, #f4bda2 0%, transparent 72%),
    radial-gradient(50% 36% at 30% 92%, #e9a0b2 0%, transparent 72%),
    linear-gradient(180deg, #b9cde8 0%, #e6c6c8 55%, #e6a9a8 100%);
}
/* Dusty mauve and magenta with soft cobalt */
.grain-mauve {
  background-color: #9a63ac;
  --g:
    var(--fade),
    radial-gradient(50% 38% at 20% 10%, #d6bcec 0%, transparent 72%),
    radial-gradient(50% 40% at 100% 34%, #5f74d4 0%, transparent 72%),
    radial-gradient(55% 40% at 14% 62%, #d474a8 0%, transparent 72%),
    linear-gradient(180deg, #b48ac8 0%, #9a5eae 40%, #6c3c88 70%, #321640 100%);
}
.grain-shade { text-shadow: 0 1px 24px rgba(0, 0, 0, .18); }

/* ---------- Style guide swatches ---------- */
.swatch-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .swatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .swatch-grid { grid-template-columns: repeat(3, 1fr); } }
.swatch { display: flex; flex-direction: column; gap: 12px; }
.swatch .grain { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 3; padding: 20px; border-radius: var(--radius-lg); }
.swatch .grain strong { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 400; }
.swatch .grain span { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .8); }
.swatch .meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.swatch code { font-size: 13px; line-height: 18px; color: var(--text-muted); background: var(--surface); padding: 2px 8px; border-radius: 6px; }

/* ---------- Choice cards (homepage) ---------- */
.card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.choice { display: flex; flex-direction: column; gap: 16px; }
.choice .grain { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 32px; text-align: center; }
.choice .grain span { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.17; letter-spacing: -0.01em; font-weight: 300; max-width: 12ch; text-wrap: balance; }
.card-grid.cols-2 .choice .grain span { max-width: 20ch; }
.choice .meta { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.choice .meta .text-link { margin-top: 6px; }
@media (min-width: 720px) { .card-grid.cols-2 .choice .grain { aspect-ratio: 16 / 10; } }
@media (max-width: 719px) { .choice .grain { aspect-ratio: 2 / 1; padding: 20px; } }

/* ---------- Timeline: the four steps under each service hero (after elevenlabs.io/startup-grants) ---------- */
/* The line is a soft grainy gradient and each dot takes the line's colour at its position */
.tl-sunset { --tl-1: #8f9ad6; --tl-2: #c48fbc; --tl-3: #df7f6a; --tl-4: #eaa655; }
.tl-dusk   { --tl-1: #7f9db4; --tl-2: #e6bd80; --tl-3: #d0663a; --tl-4: #7a3f33; }
.tl-section { padding-block: 8px 24px; }
@media (min-width: 900px) { .tl-section { padding-block: 16px 40px; } }
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 44px; display: flex; flex-direction: column; gap: 32px; }
/* Phones: a vertical line on the left, dots at each title */
.timeline::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 0; width: 10px; border-radius: 5px;
  background: var(--noise) 0 0 / 128px 128px, linear-gradient(180deg, var(--tl-1), var(--tl-2) 33%, var(--tl-3) 67%, var(--tl-4));
  background-blend-mode: overlay, normal;
}
.step { position: relative; }
.step .dot { position: absolute; left: -46px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--tl-1); box-shadow: 0 0 0 3px var(--bg); }
.step:nth-child(2) .dot { background: var(--tl-2); }
.step:nth-child(3) .dot { background: var(--tl-3); }
.step:nth-child(4) .dot { background: var(--tl-4); }
.step .line { display: none; }
.step h3 { font-size: 18px; line-height: 26px; font-weight: 400; letter-spacing: -0.005em; color: var(--text); }
.step p { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--text-muted); }

/* Desktop: a horizontal line, dots at the start, a third, two thirds and the end; a dotted line drops to each title */
@media (min-width: 900px) {
  .timeline { display: grid; grid-template-columns: repeat(24, 1fr); gap: 0; padding: 0; }
  .timeline::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 10px;
    background: var(--noise) 0 0 / 128px 128px, linear-gradient(90deg, var(--tl-1), var(--tl-2) 33%, var(--tl-3) 67%, var(--tl-4));
    background-blend-mode: overlay, normal;
  }
  .step { padding-top: 56px; padding-inline: 14px; }
  .step:nth-child(1) { grid-column: 1 / 6; text-align: left; padding-left: 0; }
  .step:nth-child(2) { grid-column: 6 / 12; text-align: center; }
  .step:nth-child(3) { grid-column: 14 / 20; text-align: center; }
  .step:nth-child(4) { grid-column: 20 / 25; text-align: right; padding-right: 0; }
  .step .dot { top: -2px; left: 50%; transform: translateX(-50%); }
  .step:nth-child(1) .dot { left: 0; transform: none; }
  .step:nth-child(4) .dot { left: auto; right: 0; transform: none; }
  .step .line { display: block; position: absolute; top: 14px; height: 30px; left: 50%; border-left: 2px dotted #d4d1cb; transform: translateX(-1px); }
  .step:nth-child(1) .line { left: 6px; transform: none; }
  .step:nth-child(4) .line { left: auto; right: 6px; transform: none; }
}

/* ---------- Case-study cards: like elevenlabs.io customer stories, but coloured all the time ---------- */
.case-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .case-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.case {
  display: flex; flex-direction: column; gap: 16px;
  aspect-ratio: 1 / 1; padding: 20px; border-radius: var(--radius);
}
@media (min-width: 720px) { .case-grid:not(.cols-3) .case { aspect-ratio: 4 / 3; } }
/* Company name on top, with a small ring like theirs */
.case-company { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; align-self: flex-start; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; color: #17131f; }
.case--you .case-company { color: #fff; }
.case-company i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }
/* Industry sits beside the name, quieter, after a small dot */
.case-industry { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; opacity: .62; }
.case-industry::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
/* White arrow button appears on hover */
.case-arrow {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--text);
  opacity: 0; transform: translate(-3px, 3px); transition: opacity .25s, transform .25s;
}
.case-arrow svg { width: 16px; height: 16px; }
.case:hover .case-arrow, .case:focus-visible .case-arrow { opacity: 1; transform: none; }
@media (hover: none) { .case-arrow { display: none; } }
/* Preview in the middle; height:100% beats the width/height attributes on the tags, so images are cropped, never stretched */
.case-shot {
  margin: auto 0; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 12px; background: var(--surface);
  box-shadow: 0 12px 32px rgba(20, 8, 16, .28), 0 0 0 1px rgba(255, 255, 255, .25);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.case:hover .case-shot { transform: translateY(-4px) scale(1.02); }
.case-shot img, .case-shot video { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Short title below */
.case h3 {
  font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.005em; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Title-only card: no preview, the name is the card */
.case--title { aspect-ratio: 4 / 3; justify-content: space-between; }
.case--title h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; font-weight: 300; max-width: 11em; -webkit-line-clamp: 3; line-clamp: 3; }
@media (min-width: 720px) { .case--title h3 { font-size: 32px; line-height: 38px; } }
/* The card that is about the visitor's own business: warm and dark among the cool ones, arrow always showing */
.case--you { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.case--you .case-arrow { opacity: 1; transform: none; }
#cta { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { .case-shot, .case-arrow { transition: none; } }

/* ---------- About ---------- */
.about {
  display: grid; gap: 32px; grid-template-columns: 1fr;
  padding: 24px; border-radius: var(--radius-lg); background: var(--surface);
}
@media (min-width: 820px) { .about { grid-template-columns: 300px 1fr; padding: 32px; gap: 48px; align-items: center; } }
.about-photo { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; max-width: 300px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about p { font-size: 18px; line-height: 28px; }
.about p + p { margin-top: 16px; }
.about .text-link { margin-top: 24px; }

/* ---------- CTA band: left-aligned like the rest ---------- */
.cta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: 380px; padding: 28px; border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .cta { padding: 40px; } }
.cta .h2 { max-width: 640px; }
.cta p { max-width: 520px; margin-top: 12px; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, .88); }
.cta .btn-row { margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 32px; padding: 56px 0 32px; border-top: 1px solid var(--border); }
.footer-top { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-top { grid-template-columns: 2fr 1fr 1fr; } }
.footer-top h4 { margin: 0 0 14px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--text-faint); }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-top ul a { font-size: 16px; line-height: 24px; color: var(--text-muted); transition: color .15s; }
.footer-top ul a:hover { color: var(--text); }
.footer-brand p { max-width: 320px; margin-top: 12px; color: var(--text-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; font-size: 14px; line-height: 21px; color: var(--text-faint); }

/* ---------- "Let's talk" sheet (phones) ---------- */
.talk { width: 100%; max-width: 480px; margin: auto auto 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.talk::backdrop { background: rgba(0, 0, 0, .4); }
.talk[open] { animation: talk-up .25s cubic-bezier(.2, .7, .2, 1); }
@keyframes talk-up { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .talk[open] { animation: none; } }
.talk-sheet { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg); }
.talk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.talk-head h2 { font-size: 20px; line-height: 28px; font-weight: 400; }
.talk-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.talk-close:hover { background: var(--surface-strong); }
.talk-close svg { width: 18px; height: 18px; }
.talk-opt { height: 48px; font-size: 16px; }

/* ---------- Gradient text (headline highlights), in the Dusk colours but deeper so it reads on white ---------- */
.grad {
  background: linear-gradient(90deg, #5f86b0 0%, #d99a4e 52%, #c4502d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Same idea in the Sunset colours: periwinkle → mauve → apricot */
.grad.sunset { background-image: linear-gradient(90deg, #6f7cc8 0%, #c26fa6 50%, #e08a45 100%); }

/* ---------- Phone type scale: one smaller set of sizes for every section ----------
   body copy 15/22 (hero intro, about, banner, card text), titles 18/26, section titles 26/32,
   page headline 32/36, small print 14/20 or less. Section spacing tightened to match. */
@media (max-width: 719px) {
  body { font-size: 15px; line-height: 22px; }
  .h1 { font-size: 32px; line-height: 1.12; }
  .h2 { font-size: 26px; line-height: 32px; }
  .h3 { font-size: 18px; line-height: 26px; }
  .lead, .about p, .cta p { font-size: 15px; line-height: 22px; }
  .section { padding-block: 48px; }
  .section-head { margin-bottom: 24px; }
  .choice .grain span { font-size: 24px; }
  .case h3 { font-size: 18px; line-height: 26px; }
  .case--title h3 { font-size: 30px; line-height: 36px; }
  .case-company { font-size: 13px; line-height: 18px; }
  .step h3 { font-size: 17px; line-height: 24px; }
  .step p { font-size: 14px; line-height: 20px; }
  .about { padding: 20px; gap: 20px; }
  .about-photo { max-width: 120px; }
  .about .text-link { margin-top: 20px; }
  .cta { min-height: 320px; padding: 24px; }
  .site-footer { padding: 40px 0 28px; }
  .footer-top ul a { font-size: 15px; line-height: 22px; }
  .footer-bottom { margin-top: 40px; font-size: 13px; line-height: 18px; }
  .talk-head h2 { font-size: 18px; line-height: 26px; }
}

/* ---------- Style guide page furniture ---------- */
.sg-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.sg-section { scroll-margin-top: 84px; }
.sg-sub { margin: 36px 0 16px; }
.sg-sub:first-of-type { margin-top: 0; }
.sg-sub .h3 { margin-bottom: 2px; }
.sg-after { margin-top: 16px; }
.sg-stage { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: #fff; }
.sg-stage + .sg-stage, .sg-stage + .sg-code, .sg-code + .sg-code { margin-top: 12px; }
.sg-stage .container { max-width: none; padding-inline: 0; }
.sg-stage :is(.hero, .section, .tl-section) { padding-block: 8px; }
.sg-stage .section-head { margin-bottom: 16px; }
.sg-stage .tl-section + .tl-section { padding-top: 40px; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sg-onbg { padding: 28px; border-radius: var(--radius); }
.sg-chips { display: grid; gap: 14px 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sg-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sg-chips { grid-template-columns: repeat(4, 1fr); } }
.sg-chip { display: flex; align-items: center; gap: 14px; }
.sg-chip-box { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sg-chip div { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 18px; }
.sg-chip code { font-size: 13px; color: var(--text); }
.sg-chip b { font-weight: 500; }
.sg-chip span { color: var(--text-muted); }
.sg-table { overflow-x: auto; }
.sg-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.sg-table th { text-align: left; font-weight: 500; color: var(--text-faint); padding: 0 16px 10px 0; }
.sg-table td { vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--border); }
.sg-table td:last-child { padding-right: 0; }
.sg-table code, .sg-rules code, .sg-section p code, .sg-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface); padding: 1px 6px; border-radius: 6px; }
.sg-rules { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 22px; }
.sg-rules b { font-weight: 500; }
.sg-code { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.sg-code summary { cursor: pointer; padding: 12px 16px; font-size: 14px; line-height: 20px; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
.sg-code summary::before { content: "›"; display: inline-block; transition: transform .15s; color: var(--text-faint); }
.sg-code[open] summary::before { transform: rotate(90deg); }
.sg-code summary::-webkit-details-marker { display: none; }
.sg-code pre { margin: 0; padding: 16px; overflow: auto; background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); border-top: 1px solid var(--border); max-height: 420px; }
.sg-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 20px; color: var(--text); background: none; padding: 0; white-space: pre; }
@media (max-width: 719px) { .sg-stage { padding: 16px; } .sg-index { margin-top: 24px; } }
.sg-chip code { align-self: flex-start; }

/* ---------- Case study page ---------- */
.h1.long { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -0.015em; }
.grad.ocean { background-image: linear-gradient(90deg, #3c7db5 0%, #3aa298 50%, #5466c4 100%); }
.cs-back { margin-bottom: 28px; color: var(--text-muted); }
.cs-back svg { width: 16px; height: 16px; }
.case-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.case-tag i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; }
.cs-stage { display: flex; justify-content: center; padding: 20px 20px 0; border-radius: var(--radius-lg); }
.cs-stage img { width: min(100%, 1040px); height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 40px rgba(10, 24, 48, .25), 0 0 0 1px rgba(255, 255, 255, .25); }
@media (min-width: 900px) { .cs-stage { padding: 40px 40px 0; } }
.cs-stats { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
@media (min-width: 900px) { .cs-stats { grid-template-columns: repeat(4, 1fr); margin-top: 40px; } }
.cs-stat { padding-top: 16px; border-top: 1px solid var(--border); }
.cs-num { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 300; letter-spacing: -0.01em; margin-bottom: 4px; }

/* Before and now, one card per topic */
.topic-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
.topic { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.before summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.before summary::-webkit-details-marker { display: none; }
.before summary::before { content: "›"; display: inline-block; font-size: 16px; line-height: 1; transition: transform .15s; }
.before[open] summary::before { transform: rotate(90deg); }
.steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.steps li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; border-left: 2px dashed var(--border); }
.step-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, .05); }
.step-ico img { width: 20px; height: 20px; object-fit: contain; }
.step-ico .ico-svg { width: 20px; height: 20px; color: var(--text-muted); }
.st-title { font-size: 15px; line-height: 22px; color: var(--text); }
.st-desc { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.now { margin-top: auto; padding: 20px; border-radius: 16px; /* text-heavy block: a deeper shade over the colour than the cards get */ --fade: linear-gradient(180deg, rgba(10, 28, 58, .52) 0%, rgba(10, 28, 58, .66) 100%); }
.now h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 400; color: #fff; }
.now p { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .9); }
.now strong { font-weight: 500; color: #fff; }

/* Feature screenshots */
.feat-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
.feat { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.feat-shot { display: block; width: 100%; padding: 20px 20px 0; border: 0; border-radius: 0; cursor: zoom-in; font: inherit; }
.feat-shot img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: top center; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 24px rgba(10, 24, 48, .22), 0 0 0 1px rgba(255, 255, 255, .25); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.feat-shot:hover img { transform: translateY(-4px); }
.feat-text { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.feat-text .h3 { font-size: 18px; line-height: 26px; }
.feat-text p { font-size: 15px; line-height: 22px; }
.cs-note { max-width: 720px; font-size: 18px; line-height: 28px; color: var(--text-muted); }
.cs-note .text-link { color: var(--text); margin-left: 4px; }

/* Lightbox */
.lightbox { width: min(1100px, 94vw); max-height: 94vh; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 8, 14, .78); }
.lightbox img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox p { margin-top: 14px; text-align: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .8); }
.lb-close { position: absolute; top: -44px; right: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; }
.lb-close:hover { background: rgba(255, 255, 255, .3); }
.lb-close svg { width: 18px; height: 18px; }

@media (max-width: 719px) {
  .h1.long { font-size: 28px; line-height: 1.14; }
  .cs-num { font-size: 30px; line-height: 34px; }
  .topic { padding: 20px; }
  .cs-note { font-size: 15px; line-height: 22px; }
  .feat-text { padding: 16px 20px 20px; }
}

/* ---------- Case study pages: text-led sections (Taro Akademia) ---------- */
.grad.violet { background-image: linear-gradient(90deg, #6a52c0 0%, #b05ab0 55%, #d9729a 100%); }
.cs-stage video { width: min(100%, 1040px); aspect-ratio: 1280 / 662; height: auto; object-fit: cover; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 40px rgba(20, 10, 48, .28), 0 0 0 1px rgba(255, 255, 255, .25); background: var(--surface); }
.split { display: grid; gap: 20px; grid-template-columns: 1fr; padding-top: 24px; border-top: 1px solid var(--border); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.6fr; gap: 48px; padding-top: 32px; } .split-title { position: sticky; top: 92px; align-self: start; } }
.split-title .h2 { margin-top: 4px; }
.split-title .muted { margin-top: 12px; }
.split-title .case-tag { margin-bottom: 8px; }
.split-body { display: flex; flex-direction: column; gap: 20px; }
.body-lg { font-size: 18px; line-height: 28px; }
.points { list-style: none; margin: 0; padding: 0; }
.points li { padding: 14px 0; border-top: 1px solid var(--border); font-size: 16px; line-height: 24px; color: var(--text-muted); }
.points li:first-child { border-top: 0; padding-top: 0; }
.points li b { font-weight: 500; color: var(--text); }
.result { padding: 28px; border-radius: var(--radius-lg); --fade: linear-gradient(180deg, rgba(14, 12, 28, .42) 0%, rgba(14, 12, 28, .62) 100%); }
@media (min-width: 768px) { .result { padding: 40px; } }
.result .h2 { color: #fff; margin-bottom: 14px; }
.result > p { max-width: 720px; font-size: 20px; line-height: 30px; color: rgba(255, 255, 255, .92); }
.points.on-grad li { color: rgba(255, 255, 255, .92); border-top-color: rgba(255, 255, 255, .28); font-size: 18px; line-height: 28px; max-width: 760px; }
.rule-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rule-grid { grid-template-columns: repeat(2, 1fr); } }
.rule { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.rule-label { margin-bottom: 8px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.rule p:last-child { font-size: 16px; line-height: 24px; color: var(--text); }

/* Unfinished bits of the operations draft stay visible as dashed notes */
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; border: 1.5px dashed #cfc9c0; border-radius: var(--radius); background: rgba(245, 244, 242, .7); aspect-ratio: 4 / 3; max-height: 28rem; }
.slot-label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.slot-text { max-width: 36rem; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.slot.on-grad { width: min(100%, 1040px); aspect-ratio: 16 / 9; max-height: none; margin-bottom: 20px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.slot.on-grad .slot-label { color: rgba(255, 255, 255, .85); }
.slot.on-grad .slot-text { color: #fff; }
/* Payment-to-inbox flow diagram, in Taro Akademia's purple and coral */
.flow { --f-purple: #5b2a8c; --f-coral: #f27d86; --f-cream: #f6f3ee; margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--f-cream); }
.flow-title { margin-bottom: 20px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.flow-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
.flow-step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.flow-num { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--f-purple); color: #fff; font-size: 13px; line-height: 1; font-weight: 500; }
.flow-name { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 500; color: var(--f-purple); }
.flow-note { font-size: 13px; line-height: 18px; color: var(--text-muted); }
.flow-step--arrow::after { content: ""; position: absolute; left: 26px; top: 100%; height: 28px; border-left: 2px dotted #cbb8de; }
.flow-branch { position: relative; display: flex; flex-direction: column; gap: 6px; margin-left: 40px; padding: 12px 14px; border: 1.5px dashed var(--f-coral); border-radius: 14px; background: #fff6f6; }
.flow-branch::before { content: ""; position: absolute; left: -14px; top: -28px; height: 28px; width: 14px; border-left: 2px dotted var(--f-coral); border-bottom: 2px dotted var(--f-coral); border-bottom-left-radius: 8px; height: 50px; top: -28px; }
.flow-branch::after { content: ""; position: absolute; left: -14px; top: 22px; bottom: -28px; border-left: 2px dotted #cbb8de; }
.flow-branch-tag { font-size: 13px; line-height: 18px; font-weight: 500; color: #a8323d; }
.flow-branch-act { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--text); }
.flow-branch-act svg { width: 18px; height: 18px; color: var(--f-coral); flex: none; }
@media (min-width: 900px) {
  .flow { padding: 28px; }
  .flow-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 22px; row-gap: 24px; }
  .fs1 { grid-column: 1; grid-row: 1; } .fs2 { grid-column: 2; grid-row: 1; } .fs3 { grid-column: 3; grid-row: 1; } .fs4 { grid-column: 4; grid-row: 1; } .fs5 { grid-column: 5; grid-row: 1; }
  .fb { grid-column: 2 / span 2; grid-row: 2; margin-left: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .flow-step { grid-template-columns: 1fr; row-gap: 8px; padding: 16px 14px; }
  .flow-num { grid-row: auto; }
  .flow-step--arrow::after { left: 100%; top: 28px; width: 22px; height: 0; border-left: 0; border-top: 2px dotted #cbb8de; }
  .fs2.flow-step--arrow::after { }
  .flow-branch::after { display: none; }
  .flow-branch::before { left: 24%; top: -24px; width: 0; height: 24px; border-left: 2px dotted var(--f-coral); border-bottom: 0; border-radius: 0; }
}
/* Each rule beside its screen, on a coloured stage, alternating sides */
.rule-rows { display: grid; gap: 40px; }
.rule-row { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; }
.rule-text .rule-label { margin-bottom: 10px; }
.rule-text p:last-child { font-size: 18px; line-height: 28px; color: var(--text); }
.rule-visual { display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: var(--radius-lg); }
.rule-visual img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 36px rgba(20, 8, 40, .3), 0 0 0 1px rgba(255, 255, 255, .25); }
.rule-visual .slot.on-grad { margin-bottom: 0; }
@media (min-width: 900px) {
  .rule-rows { gap: 64px; }
  .rule-row { grid-template-columns: 1fr 1.4fr; gap: 48px; }
  .rule-row--flip { grid-template-columns: 1.4fr 1fr; }
  .rule-row--flip .rule-text { order: 2; }
  .rule-visual { padding: 28px; }
}
@media (max-width: 719px) { .rule-text p:last-child { font-size: 16px; line-height: 24px; } .rule-visual { padding: 12px; } }
.slot-shot { grid-column: 1 / -1; margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; }
.slot-shot img { display: block; width: 100%; height: auto; }
.slot-shot--email { max-width: 560px; }
@media (min-width: 720px) { .slot-shot--cell { grid-column: auto; align-self: start; } }
.slot-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 720px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
.todo { padding: 14px 16px; border: 1.5px dashed #d99a6a; border-radius: 14px; background: #fff8f2; font-size: 14px; line-height: 21px; color: var(--text); }
.todo b { font-weight: 500; color: #b4663a; }
.todo-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.quote-slot { display: flex; flex-direction: column; gap: 4px; }
.quote-slot .qmark { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 300; color: var(--text); }
.quote-slot .ask { color: var(--text-muted); }
@media (max-width: 719px) {
  .body-lg { font-size: 16px; line-height: 24px; }
  .points li { font-size: 15px; line-height: 22px; }
  .result { padding: 22px; }
  .result > p { font-size: 17px; line-height: 26px; }
  .points.on-grad li { font-size: 16px; line-height: 24px; }
  .rule { padding: 20px; }
  .rule p:last-child { font-size: 15px; line-height: 22px; }
}
.section.head-only { padding-bottom: 0; } .section.head-only .section-head { margin-bottom: 24px; }
@media (max-width: 719px) { .slot.on-grad { aspect-ratio: auto; min-height: 200px; } .slot { aspect-ratio: auto; min-height: 180px; } }

/* ---------- More case study pieces (Kapro Me, Spokoina Mama, Gotvene) ---------- */
.grad.jade { background-image: linear-gradient(90deg, #6fa02a 0%, #2f9a62 50%, #2a8a9a 100%); }
.grad.orchid { background-image: linear-gradient(90deg, #b8489a 0%, #d9669a 50%, #8a4ac0 100%); }
.result-p { max-width: 720px; font-size: 20px; line-height: 30px; color: rgba(255, 255, 255, .92); }
.shot { padding: 20px 20px 0; border-radius: var(--radius); }
.shot img { width: 100%; height: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 28px rgba(10, 30, 20, .25), 0 0 0 1px rgba(255, 255, 255, .25); }
.cs-stats.two { grid-template-columns: 1fr; margin-top: 0; }
@media (min-width: 720px) { .cs-stats.two { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.cs-num.big { font-size: 56px; line-height: 60px; margin-bottom: 8px; }
.cs-stats.two .cs-stat { padding-top: 20px; }
.cs-stats.two .cs-stat p { font-size: 16px; line-height: 24px; }

/* A vertical purchase journey: gradient line, one dot per step */
.journey { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; display: flex; flex-direction: column; gap: 28px; }
.journey::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 10px; border-radius: 5px; background: var(--noise) 0 0 / 128px 128px, linear-gradient(180deg, #b7cb5f, #7fc27d 30%, #4fae92 60%, #2a7058); background-blend-mode: overlay, normal; }
.journey li { position: relative; }
.jdot { position: absolute; left: -42px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #b7cb5f; box-shadow: 0 0 0 3px var(--bg); }
.journey li:nth-child(2) .jdot { background: #7fc27d; }
.journey li:nth-child(3) .jdot { background: #5ab08c; }
.journey li:nth-child(4) .jdot { background: #3f9a84; }
.journey li:nth-child(5) .jdot { background: #2a7058; }
.j-title { font-size: 18px; line-height: 26px; color: var(--text); }
.j-desc { margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.j-desc b { font-weight: 500; color: var(--text); }
@media (max-width: 719px) {
  .result-p { font-size: 17px; line-height: 26px; }
  .cs-num.big { font-size: 44px; line-height: 48px; }
  .j-title { font-size: 17px; line-height: 24px; }
  .j-desc { font-size: 14px; line-height: 20px; }
}
.case-tag i { flex: none; }

/* Capabilities on phones: the two examples side by side, "Your business" full width below */
@media (max-width: 719px) {
  .case-grid.caps { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .case-grid.caps .case--title { aspect-ratio: auto; min-height: 160px; padding: 14px; }
  .case-grid.caps .case--you { grid-column: 1 / -1; min-height: 150px; padding: 18px; }
  .case-grid.caps .case--title h3 { font-size: 21px; line-height: 25px; }
  .case-grid.caps .case--you h3 { font-size: 28px; line-height: 33px; }
  .case-grid.caps .case-company { font-size: 12px; line-height: 16px; }
  .case-grid.caps .case-arrow { display: none; }
}
@media (max-width: 359px) {
  .case-grid.caps .case--title { padding: 12px; }
  .case-grid.caps .case-company i { display: none; }
  .case-grid.caps .case--title h3 { font-size: 17px; line-height: 21px; }
  .case-grid.caps .case--you h3 { font-size: 24px; line-height: 29px; }
}