/* Inner pages (services, industries, work). Every value comes from design-system/project/tokens.json
   and README.md (v3.1, 17 Oct 2026). No shadows. Cards 4px, every other box 2px, 50% only for round things.
   Breakpoints follow the home page: phones ≤760, tablets 761–1100, desktop ≥1101. */

:root {
  --p-ink: #050505; --p-ink-2: #111111; --p-white: #FFFFFF; --p-sheet: #F6F6F6; --p-sheet-hover: #F0F0F0;
  --p-line: #E6E6E6; --p-line-dark: #2A2A2A; --p-text-2: #646464;  /* 15 Nov (Erfan): calmer body text, from the Zeal trial (was #444444) */ --p-mute: #555555; --p-link-d: #BDBDBD;
  --p-accent: #FF3C00; --p-accent-deep: #D23100; --p-subtle: #F4F4F5; --p-subtle-hover: #EAEAEC;
  --p-r-card: 4px; --p-r-box: 2px;
  --p-wrap: 1200px; --p-gut: 16px; --p-sec: 64px; --p-head: 40px;
  --p-ease: .4s cubic-bezier(.25, 1, .5, 1);
  --p-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
@media (min-width: 761px) { :root { --p-gut: 32px; --p-sec: 96px; --p-head: 48px; } }
@media (min-width: 1101px) { :root { --p-gut: 64px; --p-sec: 128px; --p-head: 64px; } }

/* ---------- Layout ---------- */
.p-sec { padding-top: var(--p-sec); }
.p-in { width: min(var(--p-wrap), 100% - 2 * var(--p-gut)); margin-inline: auto; }
.p-narrow { width: min(960px, 100% - 2 * var(--p-gut)); margin-inline: auto; }
main.p-main > :last-child.close2 { margin-top: 0; }

/* ---------- Type ---------- */
html body .p-h2 { margin: 0; font: 600 32px/36px var(--p-font); letter-spacing: -0.035em; color: var(--p-ink); font-variation-settings: 'opsz' 32; text-wrap: balance; }
@media (min-width: 761px) { html body .p-h2 { font-size: 40px; line-height: 44px; } }
@media (min-width: 1101px) { html body .p-h2 { font-size: 48px; line-height: 52px; } }
.p-head { margin-bottom: var(--p-head); max-width: 760px; }
.p-head-c { margin-inline: auto; text-align: center; }
html body .p-intro { margin: 16px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
@media (min-width: 761px) { html body .p-intro { font-size: 18px; line-height: 28px; } }
html body .p-meta { margin: 0; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
html body .p-t20 { margin: 0; font: 600 18px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); text-wrap: balance; }
@media (min-width: 761px) { html body .p-t20 { font-size: 20px; line-height: 28px; } }
html body .p-t24 { margin: 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); text-wrap: balance; }
@media (min-width: 761px) { html body .p-t24 { font-size: 24px; line-height: 32px; } }
html body .p-t32 { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); font-variation-settings: 'opsz' 32; text-wrap: balance; }
@media (min-width: 761px) { html body .p-t32 { font-size: 32px; line-height: 40px; } }
html body .p-body { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
html body .p-body + .p-body { margin-top: 16px; }
html body .p-lead { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
@media (min-width: 761px) { html body .p-lead { font-size: 18px; line-height: 28px; } }
html body .p-cap { margin: 0; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }

/* ---------- Links (ArrowLink) ---------- */
.p-link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/24px var(--p-font); color: var(--p-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.p-link .arr-swap, .p-link .arr { width: 16px; height: 16px; }
.p-link:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }

/* ---------- Breadcrumbs ---------- */
.p-crumbs { margin: 0 0 24px; }
.p-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
.p-crumbs li { display: inline-flex; gap: 8px; }
.p-crumbs li + li::before { content: "/"; color: var(--p-mute); }
.p-crumbs a { color: var(--p-text-2); }
.p-crumbs a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
/* Hover = muted-to-full, like header and footer links (README "Buttons, arrows and hover"); no underline, 0.4s ease-hover (Erfan 17 Oct: "there's no hover") */
.p-crumbs a { transition: color 0.4s cubic-bezier(.25, 1, .5, 1); }
.p-crumbs a:hover { color: var(--p-ink); }
.p-crumbs [aria-current] { color: var(--p-ink); font-weight: 500; }

/* ---------- Inner hero (reuses the home hero; text-only variant) ---------- */
.p-hero-plain { padding-top: 48px; }
@media (min-width: 761px) { .p-hero-plain { padding-top: 64px; } }
html body .p-hero-plain .p-h1 { margin: 0; max-width: 16ch; font: 600 48px/52px var(--p-font); letter-spacing: -0.045em; color: var(--p-ink); font-variation-settings: 'opsz' 32; text-wrap: balance; }
@media (min-width: 761px) { html body .p-hero-plain .p-h1 { font-size: 64px; line-height: 64px; } }
@media (min-width: 1101px) { html body .p-hero-plain .p-h1 { font-size: 72px; line-height: 72px; } }
html body .p-hero-plain .p-sub { margin: 16px 0 0; max-width: 720px; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
@media (min-width: 761px) { html body .p-hero-plain .p-sub { margin-top: 32px; font-size: 20px; } }
.p-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
@media (min-width: 761px) { .p-cta { margin-top: 40px; } }
.hero .p-crumbs { position: relative; z-index: 1; }

/* ---------- Bordered grid panel (ProofStrip rule: 2px outer, square cells, 1px line gaps) ---------- */
.p-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--p-line); border: 1px solid var(--p-line); border-radius: var(--p-r-box); overflow: hidden; }
.p-grid > * { background: var(--p-white); padding: 32px 24px; }
@media (min-width: 761px) { .p-grid { grid-template-columns: repeat(2, 1fr); } .p-grid > * { padding: 40px 32px; } }
@media (min-width: 1101px) { .p-grid-3 { grid-template-columns: repeat(3, 1fr); } .p-grid-5 { grid-template-columns: repeat(5, 1fr); } .p-grid-5 > * { padding: 32px 24px; } }
html body .p-grid .p-meta + .p-body, html body .p-grid .p-meta + .p-t20 { margin-top: 16px; }
html body .p-grid .p-t20 + .p-body { margin-top: 8px; }
.p-grid-odd > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1101px) { .p-grid-3.p-grid-odd > :last-child:nth-child(odd), .p-grid-5.p-grid-odd > :last-child:nth-child(odd) { grid-column: auto; } }

/* Icon tile (32px, 2px, white, 1px line ring) */
.p-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); color: var(--p-ink-2); margin-bottom: 24px; }
.p-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pains ("Sound familiar?") ---------- */
.p-pains { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .p-pains { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.p-pains li { padding: 32px 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
@media (min-width: 761px) { .p-pains li { padding: 40px 32px; } }
html body .p-pains .p-t20 { font-weight: 500; }
.p-pains li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* What we deliver, picker layout (DeliverPicker.astro; Erfan 17 Oct, option C). Desktop/tablet: list 1fr | picture 1.15fr, 64px gap,
   the picture as tall as the list (top and bottom lines meet). Selected row = sheet + 2px accent edge + ink, and shows its line under the
   title; hover = sheet. Picture = the home Service art panel (.svc-art: warm gradient, white line drawing), 4px. Phones: no list, every
   deliverable as its own card (drawing 3:2, title, line). */
.dpk { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dpk-list { display: none; }
.dpk-panel { border: 1px solid var(--p-line); border-radius: var(--p-r-card); overflow: hidden; background: var(--p-white); }
html body .dpk .dpk-art.svc-art { border-radius: 0 !important; aspect-ratio: 3 / 2; }
html body .dpk .dpk-t { margin: 0; padding: 24px 24px 8px; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
html body .dpk .dpk-p { margin: 0; padding: 0 24px 24px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
@media (min-width: 761px) {
  .dpk { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: stretch; }
  .dpk-list { display: block; border-top: 1px solid var(--p-line); }
  .dpk-tab { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: flex-start; gap: 16px; padding: 20px 16px; border-bottom: 1px solid var(--p-line); cursor: pointer;
    color: var(--p-mute); transition: color 0.4s cubic-bezier(.25, 1, .5, 1), background-color 0.4s cubic-bezier(.25, 1, .5, 1); }
  .dpk-tt { display: grid; gap: 4px; padding: 2px 0; } /* 2 + 28 + 2 = the 32px icon, so open and closed rows differ only by the line */
  .dpk-tt > span:first-child { font: 500 20px/28px var(--p-font); letter-spacing: -0.02em; }
  .dpk-line { display: none; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
  .dpk-tab:hover { background: var(--p-sheet); color: var(--p-ink); }
  .dpk-tab[aria-selected="true"] { background: var(--p-sheet); color: var(--p-ink); box-shadow: inset 2px 0 0 var(--p-accent); }
  .dpk-tab[aria-selected="true"] .dpk-line { display: block; min-height: var(--dpk-line-h, 48px); }
  .dpk.dpk-measure .dpk-line { display: block; min-height: 0; } /* script measures every line, then puts the list back */
  .dpk-tab:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: -2px; }
  .dpk-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--p-line); border-radius: var(--p-r-box); background: var(--p-white); }
  .dpk-ico svg { width: 16px; height: 16px; fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .dpk-panels { position: relative; }
  .dpk-panel { position: absolute; inset: 0; display: none; border: 0; border-radius: var(--p-r-card); }
  .dpk-panel[data-on] { display: block; animation: dpk-in 0.4s cubic-bezier(.25, 1, .5, 1); }
  html body .dpk .dpk-art.svc-art { height: 100%; aspect-ratio: auto; }
  html:not(#r4):not(#r5) body .dpk .dpk-art.svc-art { border-radius: var(--p-r-card) !important; } /* beats the radius-v5 sweep that lists .svc-art as a 2px box */
  html body .dpk .dpk-t, html body .dpk .dpk-p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@keyframes dpk-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dpk-panel[data-on] { animation: none; } }
/* Pains as problem → answer rows (Erfan 17 Oct, Launch website first: "pair each situation with a short answer of what we do").
   Used when the items carry an answer; plain-string items keep the grey cards above. Hairline rows, buyer line 20/28 500 ink,
   answer 18/28 #444 after an 8px accent dot; 12/16 uppercase column labels; one column on phones. */
/* Problem → fix pairs (design 1, Erfan 17 Oct): sticky title + Book a call on the left from 1101px, numbered rows on the
   right. Row: 40px number box (2px, 1px line), the founder's line 20/28 500 ink in quotes, then an accent arrow + our fix 16/24 #444. */
.p-pairs-wrap { display: grid; gap: 40px; }
@media (min-width: 1101px) { .p-pairs-wrap { grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: start; } .p-pairs-side { position: sticky; top: 120px; } }
html body .p-pairs-side .p-head { margin: 0; }
/* Chat with Erfan, told on scroll (Launch page problem section, Erfan 17 Oct). Window: 1px line, 4px card corners, header
   40px photo + name 16/24 500 + role 14/20 mute, white canvas, "Before your launch" divider (meta label between hairlines).
   You: 28px avatar (sheet circle, line ring, person icon), meta label, QuestionChips tint bubble 16/24 500. Erfan: 28px photo,
   sheet bubble, ink text. Bubbles use r-bubble (16px, the corner toward the speaker 4px): a design-system exception.
   Proof card: white, 1px line, 12px corners (r-bubble-card), screenshot 8px. Message bar = the one Book a call (a link). In the page flow at full height (option A, 17 Oct): no pinning, no counter. */
.p-chat { display: flex; flex-direction: column; border: 1px solid var(--p-line); border-radius: var(--p-r-card); overflow: hidden; background: var(--p-white); }
.p-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--p-line); }
.p-chat-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
html body .p-chat-head b { display: block; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .p-chat-head span { display: block; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.p-chat-log { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 32px; list-style: none; background: var(--p-white); }
.p-chat-log > li { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.p-chat-log > .you { align-self: flex-start; }
.p-chat-log > .you:not(:nth-child(2)) { margin-top: 20px; }
.p-chat-log > .erfan, .p-chat-log > .att { align-self: flex-end; flex-direction: row-reverse; }
.p-chat-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.p-chat-yav { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--p-sheet); box-shadow: inset 0 0 0 1px var(--p-line); }
.p-chat-yav svg { width: 16px; height: 16px; fill: none; stroke: var(--p-mute); stroke-width: 1.75; stroke-linecap: round; }
html body .p-chat-who { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
html body .p-chat-msg { margin: 0; padding: 12px 16px; border-radius: 16px; font: 400 16px/24px var(--p-font); }
html body .p-chat-log .you .p-chat-msg { border-bottom-left-radius: 4px; font-weight: 500; }
html body .p-chat-log .t0 .p-chat-msg, html body .p-chat-log .t3 .p-chat-msg { background: #FCE6DC; color: #7A2A0E; }
html body .p-chat-log .t1 .p-chat-msg { background: #E4EEDF; color: #2E5631; }
html body .p-chat-log .t2 .p-chat-msg { background: #E0E8F4; color: #23426B; }
html body .p-chat-log .erfan .p-chat-msg { border-bottom-right-radius: 4px; background: var(--p-sheet); color: var(--p-ink); }
.p-chat-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.p-chat-sp { width: 28px; flex: none; }
.p-chat-day { align-self: stretch !important; max-width: none !important; align-items: center !important; gap: 12px !important; margin: 0 0 8px; }
.p-chat-day::before, .p-chat-day::after { content: ''; flex: 1; height: 1px; background: var(--p-line); }
html body .p-chat-day span { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.p-chat-card { display: block; width: 300px; max-width: 100%; padding: 8px; border-radius: 12px; background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); color: inherit; text-decoration: none; }
.p-chat-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; }
.p-chat-two { position: relative; display: block; }
.p-chat-phone { position: absolute; right: 10px; bottom: -6px; width: 64px; padding: 3px; border-radius: 9.6px; background: var(--p-ink); }
.p-chat-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 6.6px; }
.p-chat-cap { display: flex; align-items: center; gap: 8px; padding: 10px 4px 2px; }
html body .p-chat-cap b { display: block; font: 500 14px/20px var(--p-font); color: var(--p-ink); }
html body .p-chat-cap span span { display: block; font: 400 12px/16px var(--p-font); color: var(--p-mute); }
.p-chat-cap svg { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--p-ease); }
a.p-chat-card:hover .p-chat-cap svg { transform: translateX(3px); }
a.p-chat-card:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.p-chat-list { margin: 0; padding: 12px 16px; list-style: none; display: grid; gap: 8px; }
html body .p-chat-list li { display: flex; gap: 8px; align-items: flex-start; font: 500 14px/20px var(--p-font); color: var(--p-ink); }
.p-chat-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-chat-bar { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 24px; border-top: 1px solid var(--p-line); text-decoration: none; background: var(--p-white); }
html body .p-chat-bar > span:first-child { flex: 1; min-width: 0; font: 400 16px/24px var(--p-font); color: var(--p-mute); transition: color var(--p-ease); }
.p-chat-send { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--p-r-box); color: var(--p-white); font: 500 14px/20px var(--p-font); white-space: nowrap;
  /* the Book a call rim (BookACallRim, site.css btn-rim): 2px conic chrome stroke turning round the button; --ck-a and ck-sweep come from site.css */
  --rim: conic-gradient(from var(--ck-a), #3A3A3A 0deg, #9A9A9A 40deg, #F7F7F7 70deg, #BDBDBD 100deg, #5A5A5A 140deg, #DADADA 175deg, #FFB59A 205deg, #FFFFFF 225deg, #9AA4B8 255deg, #C9D3EA 280deg, #4A4A4A 320deg, #3A3A3A 360deg);
  box-sizing: border-box; border: 2px solid transparent;
  background: linear-gradient(var(--p-ink), var(--p-ink)) padding-box, var(--rim) border-box;
  animation: ck-sweep 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .p-chat-send { animation: none; --ck-a: 30deg; } }
.p-chat-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--p-ease); }
html body .p-chat-bar:hover > span:first-child { color: var(--p-ink); }
.p-chat-bar:hover .p-chat-send svg { transform: translateX(3px); }
.p-chat-bar:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: -2px; }
/* reveal (script adds .is-reveal; motion allowed): every line keeps its space, so nothing jumps; each fades in and rises 8px
   as it reaches the screen, lines entering together arrive 0.15s apart */
.p-chat-log.is-reveal > li:not(.p-chat-day) { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.25, 1, .5, 1), transform .5s cubic-bezier(.25, 1, .5, 1); }
.p-chat-log.is-reveal > li.in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .p-chat-log { padding: 20px 16px; } .p-chat-log > li { max-width: 92%; } .p-chat-head { padding: 12px 16px; } .p-chat-card { width: 260px; }
  .p-chat-bar { padding: 12px 12px 12px 16px; } html body .p-chat-bar > span:first-child { font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .p-chat-log.is-reveal > li:not(.p-chat-day) { opacity: 1; transform: none; transition: none; } }

/* ---------- Fit / not a fit ---------- */
.p-fit { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 761px) { .p-fit { grid-template-columns: 1fr 1fr; gap: 24px; } }
.p-fit > div { padding: 32px 24px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); }
@media (min-width: 761px) { .p-fit > div { padding: 40px; } }
.p-fit ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.p-fit li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.p-mark { width: 24px; height: 24px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-mark-yes { stroke: var(--p-accent); }
.p-mark-no { stroke: var(--p-mute); }
.p-fit2 li .p-mark { margin-top: 2px; }   /* centred on the first 28px text line, not on its top (Erfan 21 Oct: ticks and crosses sat high) */

/* ---------- Work cards ---------- */
.p-work { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 761px) { .p-work { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
.p-work-3 { }
@media (min-width: 1101px) { .p-work-3 { grid-template-columns: repeat(3, 1fr); } }
.p-card { display: flex; flex-direction: column; border-radius: var(--p-r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
.p-card-pic { position: relative; aspect-ratio: 16 / 10; background: var(--p-sheet); overflow: hidden; }
.p-card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.p-card-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--p-line); }
.p-card-pic-empty { display: grid; place-items: center; padding: 24px; }
.p-card-pic-empty span { font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
.p-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
@media (min-width: 761px) { .p-card-body { padding: 32px; } }
html body .p-card-body .p-t20 { margin-top: 8px; }
html body .p-card-body .p-body { margin-top: 8px; }
.p-card-body .p-link { margin-top: auto; padding-top: 24px; align-self: flex-start; }
.p-more { margin-top: 40px; }

/* ---------- Steps ---------- */
.p-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
.p-steps > li { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--p-line); }
@media (min-width: 1101px) { .p-steps > li { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 40px 0; } }
html body .p-steps .p-t24 + .p-body { margin-top: 8px; }
html body .p-steps .p-out .p-meta + .p-body { margin-top: 8px; }
.p-note { margin: 24px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-steps-cta { margin-top: 40px; }

/* ---------- Checklist ---------- */
.p-checks { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .p-checks { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
@media (min-width: 1101px) { .p-checks { grid-template-columns: repeat(3, 1fr); } }
.p-checks li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; }
html body .p-checks .p-t20 + .p-body { margin-top: 8px; }

/* ---------- Two-column text block (stack note, in short) ---------- */
.p-split { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
@media (min-width: 761px) { .p-split { padding: 48px 40px; } }
@media (min-width: 1101px) { .p-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; padding: 64px; } }
html body .p-split .p-meta + .p-cap { margin-top: 8px; }
html body .p-entity { margin: 0; font: 400 16px/24px var(--p-font); letter-spacing: -0.01em; color: var(--p-text-2); text-wrap: pretty; }
@media (min-width: 861px) { html body .p-entity { font-size: 18px; line-height: 28px; } }

/* ---------- Quote ---------- */
.p-quote { margin: 0; padding: 40px 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
@media (min-width: 761px) { .p-quote { padding: 64px; } }
.p-quote blockquote { margin: 0; font: 500 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); text-wrap: pretty; }
@media (min-width: 761px) { .p-quote blockquote { font-size: 24px; line-height: 32px; } }
.p-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--p-line); }
.p-quote figcaption b { display: block; font: 600 16px/24px var(--p-font); color: var(--p-ink); }

/* ---------- Price band ---------- */
.p-price { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 40px 24px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); }
@media (min-width: 761px) { .p-price { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 48px 40px; } }
@media (min-width: 1101px) { .p-price { padding: 64px; } }
html body .p-price .p-meta + .p-t32 { margin-top: 16px; }
html body .p-price .p-t32 + .p-body { margin-top: 8px; }

/* ---------- Facts row (case studies) ---------- */
.p-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; background: var(--p-line); border: 1px solid var(--p-line); border-radius: var(--p-r-box); overflow: hidden; }
@media (min-width: 1101px) { .p-facts { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.p-facts > div { background: var(--p-white); padding: 24px; }
.p-facts dt { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.p-facts dd { margin: 8px 0 0; font: 600 16px/24px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
.p-facts dd a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* ---------- Case study body ---------- */
.p-shot { margin: 0; border-radius: var(--p-r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-sheet); }
.p-shot img { width: 100%; height: auto; }
.p-shot-wide { margin-top: 64px; }
.p-story { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1101px) { .p-story { grid-template-columns: 320px minmax(0, 1fr); gap: 96px; } .p-story > .p-t32 { position: sticky; top: 128px; align-self: start; } }
.p-chapter + .p-chapter { margin-top: var(--p-sec); }
.p-chapter .p-shot { margin-top: 40px; }

/* ---------- Questions list (industry quick check, no form) ---------- */
.p-qs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); counter-reset: none; }
.p-qs li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--p-line); font: 500 18px/28px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
@media (max-width: 760px) { .p-qs li { font-size: 16px; } }
.p-qs svg { margin-top: 2px; width: 24px; height: 24px; fill: none; stroke: var(--p-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Numbers (ProofStrip) ---------- */
html body .p-num { margin: 0; font: 600 32px/40px var(--p-font); letter-spacing: -0.035em; color: var(--p-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) { html body .p-num { font-size: 40px; line-height: 44px; } }
html body .p-num + .p-body { margin-top: 16px; }
.p-src { margin-top: 16px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .p-meta.p-checked { margin-top: 16px; }  /* 14 Nov: html body .p-meta's margin: 0 was cancelling this gap */

/* ---------- Related links ---------- */
.p-rel { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 761px) { .p-rel { grid-template-columns: 1fr 1fr; gap: 24px; } }
.p-rel ul { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
.p-rel li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0; border-bottom: 1px solid var(--p-line); font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.p-rel li a .arr-swap, .p-rel li a .arr { width: 16px; height: 16px; }
.p-rel li a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }

/* ---------- Hubs (services / industries index) ---------- */
.p-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
.p-rows li a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; gap: 16px 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--p-line); }
@media (min-width: 1101px) { .p-rows li a { grid-template-columns: 32px minmax(0, 4fr) minmax(0, 5fr) 16px; padding: 32px 0; } }
.p-rows .p-ico { margin: 0; }
html body .p-rows .p-body { grid-column: 2 / 3; }
@media (min-width: 1101px) { html body .p-rows .p-body { grid-column: auto; } }
.p-rows .arr-swap, .p-rows .arr { width: 16px; height: 16px; grid-row: 1; grid-column: 3; }
@media (min-width: 1101px) { .p-rows .arr-swap { grid-column: 4; } }
.p-rows li a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }

/* ---------- Prose (legal, blog) ---------- */
.p-prose { font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-narrow.p-prose { width: min(800px, 100% - 2 * var(--p-gut)); }  /* long reading text stays within 800px (Erfan 24 Oct, AI search page) */
@media (min-width: 761px) { .p-prose { font-size: 18px; line-height: 28px; } }
html body .p-prose h2 { margin: 64px 0 16px; font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
html body .p-prose h3 { margin: 40px 0 8px; font: 600 20px/28px var(--p-font); color: var(--p-ink); }
html body .p-prose p, html body .p-prose ul, html body .p-prose ol { margin: 16px 0 0; }
.p-prose li + li { margin-top: 8px; }
.p-prose a { color: var(--p-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.p-prose strong { color: var(--p-ink); font-weight: 600; }

/* Hero picture in the showreel frame (industry scenes): same frame, a still instead of the film */
.p-hi-pic { aspect-ratio: 16 / 9; overflow: hidden; }
.p-hi-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 85%; }

/* Case study hero extras */
.p-facts-hero { margin-top: 64px; }
@media (max-width: 760px) { .p-facts-hero { margin-top: 40px; } .p-shot-wide { margin-top: 40px; } }
.p-gap16 { margin-top: 16px; }
html body .p-gap16 { margin-top: 16px; }  /* 14 Nov: html body .p-lead's margin: 0 was cancelling this (case About / Challenge heading sat on the text) */
.p-para + .p-para { margin-top: 16px; }
.p-story-2 > div { box-shadow: none; padding: 0; }
@media (min-width: 761px) { .p-story-2 { gap: 96px; } }
.p-shot-phone { max-width: 360px; }

/* Price cards (/pricing): 4px cards, 1px line ring; price 24/32 600 (32/40 desktop), never above the H2 */
.p-prices { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 761px) { .p-prices { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1101px) { .p-prices { grid-template-columns: repeat(3, 1fr); } }
.p-pcard { display: flex; flex-direction: column; padding: 32px 24px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
@media (min-width: 761px) { .p-pcard { padding: 40px 32px; } }
html body .p-pval { margin: 16px 0 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
html body .p-pcard .p-pval + .p-body { margin-top: 8px; }
.p-pcard ul { margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--p-line); list-style: none; display: grid; gap: 8px; }
.p-pcard li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-pcard .p-link { margin-top: auto; padding-top: 32px; align-self: flex-start; }

/* Prose sections in the 960 column; first heading sits flush */
html body .p-prose > .p-h2:first-child { margin-bottom: 8px; }
.p-prose > h2:first-child { margin-top: 0; }

/* Data table: hairline rows, 14/20 head labels, 16/24 cells; scrolls inside its box on phones */
.p-table-wrap { overflow-x: auto; border: 1px solid var(--p-line); border-radius: var(--p-r-box); }
.p-table { width: 100%; min-width: 640px; border-collapse: collapse; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-table th, .p-table td { padding: 16px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--p-line); }
.p-table thead th { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); background: var(--p-sheet); }
.p-table tbody th { font-weight: 600; color: var(--p-ink); }
.p-table tbody tr:last-child th, .p-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Blog post ---------- */
html body .p-post-h1 { margin: 0; max-width: 20ch; font: 600 32px/36px var(--p-font); letter-spacing: -0.035em; color: var(--p-ink); font-variation-settings: 'opsz' 32; text-wrap: balance; }
@media (min-width: 761px) { html body .p-post-h1 { font-size: 40px; line-height: 44px; } }
@media (min-width: 1101px) { html body .p-post-h1 { font-size: 48px; line-height: 52px; } }
.p-post-meta { margin-top: 24px; }
.p-post-cover { margin: 40px 0 0; border-radius: var(--p-r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-sheet); }
.p-post-cover img { width: 100%; height: auto; }
.p-post { display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: var(--p-head); }
@media (min-width: 1101px) { .p-post { grid-template-columns: 280px minmax(0, 720px); gap: 96px; } }
.p-post-side { display: none; }
@media (min-width: 1101px) { .p-post-side { display: block; position: sticky; top: 128px; align-self: start; } }
.p-toc ol { margin: 16px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--p-line); }
.p-toc a { display: block; padding: 4px 0 4px 16px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.p-toc a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
.p-post-cta { margin-top: 40px; padding: 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
html body .p-post-cta .p-body { margin: 8px 0 24px; }
.p-post-body > :first-child { margin-top: 0; }
html body .p-prose h4 { margin: 32px 0 8px; font: 600 18px/28px var(--p-font); color: var(--p-ink); }
html body .p-prose h2[id], html body .p-prose h3[id], html body .p-prose h4[id] { scroll-margin-top: 96px; }
.p-prose img { margin: 32px 0; width: 100%; height: auto; border-radius: var(--p-r-box); box-shadow: inset 0 0 0 1px var(--p-line); }
.p-prose blockquote { margin: 24px 0; padding: 0 0 0 24px; border-left: 2px solid var(--p-accent); color: var(--p-ink); }
html body .p-prose table { display: block; overflow-x: auto; margin: 24px 0; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.p-prose th, .p-prose td { padding: 12px 16px; border: 1px solid var(--p-line); text-align: left; vertical-align: top; }
.p-prose th { background: var(--p-sheet); color: var(--p-ink); font-weight: 600; }
html body .p-prose ul, html body .p-prose ol { padding-left: 24px; }
.p-prose code { font-family: inherit; color: var(--p-ink); background: var(--p-sheet); padding: 0 4px; border-radius: var(--p-r-box); }
.p-post > * { min-width: 0; }
.p-prose { overflow-wrap: break-word; }
html body .p-prose table { width: 100%; max-width: 100%; }
.p-prose figure { margin: 24px 0; max-width: 100%; min-width: 0; overflow-x: auto; }
.p-price-link { margin: 16px 0 0; }

/* ---------- Template store ---------- */
html body .p-store-kicker { margin-bottom: 16px; }
.p-store-intro p { margin: 0; }
.p-store-block + .p-store-block { margin-top: 24px; }

/* ---------- Dark inner hero (service pages): one ink band, left-aligned, work strip inside ---------- */
/* Ink band = a coloured band: one unit inside at top and bottom (128 / 96 / 64). Colours on ink per README "Colour". */
html body .p-dk { background: var(--p-ink); color: var(--p-white); padding: 64px 0; }
@media (min-width: 761px) { html body .p-dk { padding: 96px 0; } }
@media (min-width: 1101px) { html body .p-dk { padding: 128px 0; } }
html body .p-dk .p-crumbs ol, html body .p-dk .p-crumbs a { color: var(--p-link-d); }
html body .p-dk .p-crumbs li + li::before { color: var(--p-link-d); }
html body .p-dk .p-crumbs [aria-current] { color: var(--p-white); }
html body .p-dk .p-crumbs a:focus-visible { outline-color: var(--p-white); }
html body .p-dk .p-crumbs a:hover { color: var(--p-white); }
html body .p-dk-h1 { margin: 0; max-width: 1200px; font: 600 48px/52px var(--p-font); letter-spacing: -0.045em; color: var(--p-white); font-variation-settings: 'opsz' 32; text-wrap: balance; }
@media (min-width: 761px) { html body .p-dk-h1 { font-size: 64px; line-height: 64px; } }
@media (min-width: 1101px) { html body .p-dk-h1 { font-size: 72px; line-height: 72px; } }
/* H1 -> subline = space-hero-sub (32 / 16 under 760). Row top-aligned so the subline sits under the H1 and the facts' top hairline lines up with it (17 Oct) */
.p-dk-row { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 16px; }
@media (min-width: 761px) { .p-dk-row { margin-top: 32px; } }
@media (min-width: 1101px) { .p-dk-row { grid-template-columns: minmax(0, 1fr) 320px; gap: 96px; align-items: start; } }
html body .p-dk-sub { margin: 0; max-width: 640px; font: 400 18px/28px var(--p-font); color: var(--p-link-d); text-wrap: pretty; }
@media (min-width: 761px) { html body .p-dk-sub { font-size: 20px; } }
html body .p-dk .hero-cta.p-dk-cta { justify-content: flex-start; margin-top: 32px; gap: 16px 32px; }
@media (min-width: 761px) { html body .p-dk .hero-cta.p-dk-cta { margin-top: 40px; } }
@media (max-width: 760px) { html body .p-dk .p-dk-cta .btn { width: 100%; justify-content: center; } }
/* Contra badge on ink: same parts, on-ink colours (logo tile keeps its white circle; text white / link-d) */
html body .p-dk .review-badge, html body .p-dk .rb-top b { color: var(--p-white); }
html body .p-dk .review-badge small { color: var(--p-link-d); }
html body .p-dk .review-badge:focus-visible { outline-color: var(--p-white); }
/* Chrome mark component (components/ui/ChromeMark.astro). Not on any page since 17 Oct (Launch hero = plan card); kept for reuse */
.chrome-mark { position: relative; margin: 0; width: 168px; aspect-ratio: 720 / 944; animation: mark-float 3.2s ease-in-out infinite alternate; }
.chrome-mark .cm-still, .chrome-mark .cm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chrome-mark .cm-canvas { opacity: 0; transition: opacity 0.4s cubic-bezier(.25, 1, .5, 1); }
.chrome-mark.is-live .cm-canvas { opacity: 1; }
.chrome-mark.is-live .cm-still { visibility: hidden; }
@keyframes mark-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .chrome-mark { animation: none; } }
/* Work strip inside the ink band: hero proof -> picture gap 64 / 40 (README Spacing, "Hero") */
html body .p-dk .wall.p-dk-strip { padding: 40px 0 0; }
/* Launch hero (Erfan 17 Oct): no "See all work" under the strip on this page, and one section gap (128 / 96 / 64) to the logo band, not two:
   the band keeps the hero's bottom padding as the gap, so its own top margin is dropped here */
html body .p-dk .wall.p-dk-strip .wall-cta { display: none; }
html body .p-dk + section.clients { margin-top: 0 !important; }
@media (min-width: 761px) { html body .p-dk .wall.p-dk-strip { padding-top: 64px; } }
html body .p-dk .wall .wall-track a.wall-link .wall-name { color: var(--p-link-d); }
html body .p-dk .wall .wall-track a.wall-link:hover .wall-name, html body .p-dk .wall .wall-track a.wall-link:focus-visible .wall-name { color: var(--p-white); }
html body .p-dk .wall .wall-track figcaption { color: var(--p-link-d); }


/* On-ink Book a call: ink label on the white fill, same as the process band's .pc .btn-light */
html body .p-dk .btn.btn-light { color: var(--p-ink); }

/* Header over the dark inner hero: the home frost (white 82% + blur) turns grey over ink, so on pages that
   open with the ink band the scrolled header is solid white (same blur, hairline and hide-on-scroll). */
html body:has(.p-dk) #nav.scrolled { background-color: var(--p-white); }
/* Service top, light version: plain white ground (Erfan 17 Oct, options A + D: no flutes/sheen, no chrome mark) */
html body .p-dk.p-lt { background: var(--p-white); color: var(--p-ink); }
/* Home hero ground on the service top (Erfan 17 Oct: "update background from the homepage"): the same HeroTexture layers as
   html[data-hero=grey] .hero (two soft white blooms, hero-flutes ribs, hero-sheen 18s drift), with the clear area moved from the
   centred home headline to this left-aligned text block; ribs fade out toward the bottom. */
html body .p-dk.p-lt { position: relative; isolation: isolate; overflow-x: clip;
  background: radial-gradient(42% 40% at 18% 14%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%), radial-gradient(36% 30% at 86% 34%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), var(--p-white); }
html body .p-dk.p-lt::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(5,5,5,.045) 0 1px, rgba(255,255,255,0) 1px 9px, rgba(255,255,255,.55) 9px 11px, rgba(255,255,255,0) 11px 22px);
  -webkit-mask: radial-gradient(48% 60% at 28% 46%, transparent 30%, #000 85%), linear-gradient(#000 55%, transparent 92%); -webkit-mask-composite: source-in;
  mask: radial-gradient(48% 60% at 28% 46%, transparent 30%, #000 85%), linear-gradient(#000 55%, transparent 92%); mask-composite: intersect; }
html body .p-dk.p-lt::after { content: ''; position: absolute; inset: 0 -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 54%), linear-gradient(112deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.3) 62%, rgba(255,255,255,0) 66%);
  -webkit-mask: linear-gradient(#000 60%, transparent 95%); mask: linear-gradient(#000 60%, transparent 95%);
  animation: hero-sheen 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { html body .p-dk.p-lt::after { animation: none; } }
@media (max-width: 900px) { html body .p-dk.p-lt::before { opacity: .45; } }
html body .p-dk.p-lt .p-crumbs ol, html body .p-dk.p-lt .p-crumbs a, html body .p-dk.p-lt .p-crumbs li + li::before { color: var(--p-mute); }
html body .p-dk.p-lt .p-crumbs [aria-current] { color: var(--p-ink); }
html body .p-dk.p-lt .p-crumbs a:hover { color: var(--p-ink); }
html body .p-dk.p-lt .p-crumbs a:focus-visible, html body .p-dk.p-lt .review-badge:focus-visible { outline-color: var(--p-accent-deep); }
html body .p-dk.p-lt .p-dk-h1 { color: var(--p-ink); }
html body .p-dk.p-lt .p-dk-sub { color: var(--p-text-2); }
html body .p-dk.p-lt .review-badge, html body .p-dk.p-lt .rb-top b { color: var(--p-ink); }
html body .p-dk.p-lt .review-badge small { color: var(--p-mute); }
html body .p-dk.p-lt .wall .wall-track a.wall-link .wall-name, html body .p-dk.p-lt .wall .wall-track figcaption { color: var(--p-mute); }
html body .p-dk.p-lt .wall .wall-track a.wall-link:hover .wall-name, html body .p-dk.p-lt .wall .wall-track a.wall-link:focus-visible .wall-name { color: var(--p-ink); }
/* Scene card (Erfan 17 Oct: "closer" after the flat window+phone and the 3D stack were rejected). One composed picture in a 4px card:
   the approved sector scene (pastel window light, a real client site in a flat window bleeding off the bottom-right; see SectorSceneCard).
   Side by side from 1366px (text 680 | card 480, same height as the text column, picture anchored bottom-left); under that the card
   stacks under the buttons at 4:5, 480px max. The page's work strip is dropped when a scene is set (the hero is the proof). */
.p-scene { position: relative; margin: 48px 0 0; max-width: 480px; aspect-ratio: 4 / 5; border-radius: var(--p-r-card); overflow: hidden; background: var(--p-sheet); }
.p-scene img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }
@media (min-width: 1366px) {
  .p-top.p-top-scene { grid-template-columns: minmax(0, 680px) 480px; justify-content: space-between; align-items: stretch; gap: 40px; }
  html body .p-top-scene .p-dk-h1 { max-width: 680px; }
  .p-scene { margin: 0; max-width: none; aspect-ratio: auto; min-height: 432px; }  /* 14 Nov: a 2-line H1 (industry pages) made the card 330px and cut the window's top bar */
}
/* Launch plan card (option A): the page's own steps, ending on the launch date. Desktop: text 720 left, card 400 right,
   bottoms aligned with the Book a call row. Under 1101px the card sits under the buttons, 400px max. Card 4px, hairline,
   24px padding; label 12/16 uppercase #555 .08em; titles 16/24 500; lines 14/20 #555; 8px dots on a 1px rail; date row on sheet, value accent-deep */
.p-top { display: grid; gap: 48px; }
@media (min-width: 1101px) { .p-top.p-top-plan { grid-template-columns: minmax(0, 720px) 400px; justify-content: space-between; align-items: end; gap: 64px; } }
html body .p-top-plan .p-dk-h1 { max-width: 720px; }
@media (min-width: 1101px) { html body .p-top .p-dk-row { grid-template-columns: minmax(0, 1fr); } }
.p-plan { max-width: 400px; background: var(--p-white); border: 1px solid var(--p-line); border-radius: var(--p-r-card); padding: 24px; }
html body .p-plan .p-plan-label { margin: 0 0 16px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.p-plan ol { list-style: none; margin: 0; padding: 0; }
.p-plan li { position: relative; padding: 0 0 20px 28px; }
.p-plan li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-ink); }
.p-plan li::after { content: ''; position: absolute; left: 6.5px; top: 20px; bottom: 0; width: 1px; background: var(--p-line); }
.p-plan li:last-child { padding-bottom: 0; }
.p-plan li:last-child::after { display: none; }
html body .p-plan li b { display: block; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .p-plan li span { display: block; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
html body .p-plan .p-plan-date { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin: 20px -24px -24px; padding: 16px 24px; border-top: 1px solid var(--p-line); background: var(--p-sheet); }
html body .p-plan .p-plan-date b { font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .p-plan .p-plan-date span { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/20px var(--p-font); color: var(--p-accent-deep); }
.p-plan .p-plan-date span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }

/* ---------- From the founder, red-pen version (preview /preview/founder-red-pen) ---------- */
.fr-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1101px) { .fr-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.fr-note { margin-top: 32px; }
html body .fr-note p { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
@media (min-width: 761px) { html body .fr-note p { font-size: 18px; line-height: 28px; } }
html body .fr-note p + p { margin-top: 16px; }
.fr-who { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--p-line); }
.fr-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
html body .fr-name { margin: 0; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.fr-who .p-cap a { color: var(--p-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.fr-cta { display: grid; justify-items: start; gap: 16px; margin-top: 32px; }

/* The page under the red pen: BrowserWindow frame (2px, 1px line ring), real screenshot */
.fr-figure { margin: 0; }
.fr-win { border-radius: var(--p-r-box); overflow: hidden; box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
.fr-bar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; background: #FAFAFA; border-bottom: 1px solid var(--p-line); }
.fr-bar i { width: 8px; height: 8px; border-radius: 50%; background: #DADADA; }
.fr-bar span { margin-left: 8px; padding: 0 8px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); font: 400 12px/20px var(--p-font); color: var(--p-mute); }
.fr-shot { position: relative; }
.fr-shot img { display: block; width: 100%; height: auto; }
/* Pins: accent dots (round things) with a 2px white ring; notes use the popover spec (white, ink 14/20 500, 2px, 5px caret) */
.fr-pin { position: absolute; box-sizing: border-box; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--p-accent); border: 2px solid var(--p-white); }
.fr-pop { position: absolute; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: var(--p-r-box); background: var(--p-white); color: var(--p-ink); font: 500 14px/20px var(--p-font); text-wrap: pretty; }
.fr-pop::after { content: ""; position: absolute; border: 5px solid transparent; }
.fr-pin-below .fr-pop { top: 24px; left: 50%; transform: translateX(-50%); }
.fr-pin-below .fr-pop::after { bottom: 100%; left: 50%; margin-left: -5px; border-bottom-color: var(--p-white); }
.fr-pin-above .fr-pop { bottom: 24px; left: -8px; }
.fr-pin-above .fr-pop::after { top: 100%; left: 11px; border-top-color: var(--p-white); }
.fr-pin-left .fr-pop { right: 24px; top: 50%; transform: translateY(-50%); }
.fr-pin-left .fr-pop::after { left: 100%; top: 50%; margin-top: -5px; border-left-color: var(--p-white); }
/* Under the picture: the same notes as a list (shown on tablets and phones; read by screen readers on desktop) */
.fr-list { display: none; margin: 24px 0 0; padding: 0; list-style: none; }
.fr-list li { display: grid; grid-template-columns: 16px 1fr; gap: 16px; font: 500 16px/24px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
.fr-list li + li { margin-top: 16px; }
.fr-list li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--p-accent); }
.fr-src { margin-top: 24px; }
.fr-src a { color: var(--p-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
@media (max-width: 1100px) { .fr-pop { display: none; } .fr-list { display: block; } }
@media (min-width: 1101px) { .fr-list { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Founder photo options (preview /preview/founder-photo) ---------- */
.fv-label { padding-top: 64px; }
/* A + B: a full-height photo panel flush with the card's right and bottom edges, under the facts column */
html body .fv-a .fl-photo, html body .fv-b .fl-photo { right: 0; bottom: 0; width: 324px; height: 360px; object-fit: cover; object-position: 50% 15%; }
html body .fv-b .fl-photo { filter: grayscale(1); }
/* C: a colour square on its own red ground, flush with the bottom-right corner (where the sketch sat) */
html body .fv-c .fl-photo { right: 0; bottom: 0; width: 324px; height: 324px; object-fit: cover; }
@media (max-width: 860px) {
  html body .fv-a .fl-photo, html body .fv-b .fl-photo, html body .fv-c .fl-photo { position: relative; right: auto; bottom: auto; width: calc(100% + 48px); max-width: none; height: auto; aspect-ratio: 1; margin: 32px -24px -32px; }
}
/* D: round portrait (round things only) beside the name, above the signature line */
.fv-d .fv-round { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
/* E: colour square (2px, a box) at the top of the facts column; the letter spans both rows beside it */
html body .fv-e .fv-e-photo { grid-column: 2; grid-row: 2; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; margin: 4px 0 32px; }
html body .fv-e .fl-stats { grid-row: 3; }
html body .fv-e .fl-copy { grid-row: 2 / span 2; }
@media (max-width: 860px) { html body .fv-e .fv-e-photo, html body .fv-e .fl-stats, html body .fv-e .fl-copy { grid-column: auto; grid-row: auto; } html body .fv-e .fv-e-photo { max-width: 320px; } }

/* Ink section (Erfan 17 Oct: "What we deliver" on a dark background). Data: "tone": "ink" on a features block.
   White gap above (margin), ink band with the section padding top and bottom. Colours on ink only: titles white,
   small text link-d, hairlines line-dark; the selected tab is marked by white text + the accent bar, no grey fill
   (grey fills on ink are reserved for the footer badge tiles). Not .p-dk, which also restyles the header. */
html body .p-ink { margin-top: var(--p-sec); padding-bottom: var(--p-sec); background: var(--p-ink); }
/* Ink band with the home "Process silk" texture (Erfan 17 Oct: "in the dark background we need some kind of pattern… we already used
   something in the homepage"): img/process-silk.webp under the silk-overlay token, as in the home How a project runs band. One textured
   dark band per page (ProcessSilk rule); set with "texture": "silk" on the block. */
html body .p-ink.p-silk { background-color: var(--p-ink); background-image: linear-gradient(rgba(5,5,5,.72), rgba(5,5,5,.58) 45%, rgba(5,5,5,.86)), url("/assets/img/process-silk.webp"); background-size: cover; background-position: center; }
/* Ink band with very faint window light (Erfan 17 Oct, option B, after the silk read as too busy): the Compare band's WindowLight streaks
   (-58deg, blur 22px, radial mask brightest top-right) at about a quarter strength, white only. Set with "texture": "light". */
html body .p-ink.p-light { position: relative; isolation: isolate; overflow: hidden; }
html body .p-ink.p-light::before { content: ''; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(-58deg, rgba(255,255,255,0) 0 90px, rgba(255,255,255,.06) 90px 200px, rgba(255,255,255,0) 200px 270px, rgba(255,255,255,.025) 270px 330px, rgba(255,255,255,0) 330px 440px);
  filter: blur(22px);
  -webkit-mask: radial-gradient(120% 90% at 85% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); mask: radial-gradient(120% 90% at 85% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
html body .p-ink .p-h2 { color: var(--p-white); }
html body .p-ink .p-intro { color: var(--p-link-d); }
html body .p-ink .dpk-panel { border-color: var(--p-line-dark); background: var(--p-ink); }
html body .p-ink .dpk-t { color: var(--p-white); }
html body .p-ink .dpk-p { color: var(--p-link-d); }
@media (min-width: 761px) {
  html body .p-ink .dpk-list { border-top-color: var(--p-line-dark); }
  html body .p-ink .dpk-tab { border-bottom-color: var(--p-line-dark); color: var(--p-link-d); }
  html body .p-ink .dpk-tab:hover { background: transparent; color: var(--p-white); }
  html body .p-ink .dpk-tab[aria-selected="true"] { background: transparent; color: var(--p-white); } /* selected = the 2px accent edge + open description, no fill (Erfan 17 Oct, option B); hover only brightens the text */
  html body .p-ink .dpk-line { color: var(--p-link-d); }
  html body .p-ink .dpk-tab:focus-visible { outline-color: var(--p-white); }
  html body .p-ink .dpk-ico { border-color: var(--p-line-dark); background: transparent; }
  html body .p-ink .dpk-ico svg { stroke: var(--p-white); }
}

/* Optional intro under the case-cards heading (Cases.astro `intro`, service pages only; Erfan 17 Oct). Section-intro type 18/28 #444, centred under the h2 */
html body .cases .cs-head .cs-intro { margin: 16px auto 0; max-width: 800px; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-align: center; text-wrap: pretty; }


html body .p-prices-note { margin: 24px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-mute); }   /* line under the price cards (pricing page) */

/* Fit block, split layout (Erfan 18 Oct: "let's do how Lazarev did"; research/fit-section-study-2026-10-18). Sheet band, centred title,
   two white 4px cards; each card = a 2px top edge (accent on yes, line on no) + a big label column + the list. Tokens only, no shadows. */
html body .p-fit2-band { margin-top: var(--p-sec); padding: var(--p-sec) 0; background: var(--p-sheet); }
.p-fit2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1101px) { .p-fit2 { grid-template-columns: 1fr 1fr; gap: 24px; } }
.p-fit2-card { display: grid; grid-template-columns: 1fr; align-content: start; gap: 24px; padding: 32px 24px; background: var(--p-white); border-radius: var(--p-r-card); }
.p-fit2-yes { box-shadow: none; border: 2px solid transparent; animation: ck-sweep 10s linear infinite;   /* the Book a call chrome rim, turning once per 10s like the audit box ring (Erfan 18 Oct); --ck-a + ck-sweep live in site.css */
  background: linear-gradient(var(--p-white), var(--p-white)) padding-box, conic-gradient(from var(--ck-a), #3A3A3A 0deg, #9A9A9A 40deg, #F7F7F7 70deg, #BDBDBD 100deg, #5A5A5A 140deg, #DADADA 175deg, #FFB59A 205deg, #FFFFFF 225deg, #9AA4B8 255deg, #C9D3EA 280deg, #4A4A4A 320deg, #3A3A3A 360deg) border-box; }
@media (prefers-reduced-motion: reduce) { .p-fit2-yes { animation: none; --ck-a: 30deg; } }
.p-fit2-no { box-shadow: inset 0 0 0 1px var(--p-line); }
@media (min-width: 761px) { .p-fit2-card { gap: 24px; padding: 40px; } } /* label on top, list below (Erfan 18 Oct) */
html body .p-fit2-k { margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--p-line); font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); text-wrap: balance; }
html body .p-fit2-no .p-fit2-k { color: var(--p-mute); }
.p-fit2 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; align-content: start; }
.p-fit2 li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.p-fit2-yes li { color: var(--p-ink); }
html body .p-pcard-tag { margin: 0 0 4px; }   /* 'One-time project' / 'Monthly, after launch' above each price card (pricing page) */
html body .p-fit2 li a { color: var(--p-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
html body .p-fit2 li a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
/* Home process section reused on service pages: centred head there (Erfan 18 Oct); home keeps its left head (pages.css is inner pages only) */
html body section.process2 .pr-head { justify-items: center; text-align: center; }
html body section.process2 .pr-head h2 { margin-left: auto; margin-right: auto; }
/* the one starting-price line on a service page (Erfan 18 Oct: one short 'from' line, full list on /pricing) */
html body .p-start-from { margin: 0 0 8px; } html body .p-price-from { margin: 8px 0 8px; }
html body .p-start-from, html body .p-price-from { font: 600 20px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }

/* Deliver picker groups (18 Oct): the open row lists the group's named deliverables (research/proof/deliverables-2026-10-18.md) as ticks */
.dpk-items { display: grid; gap: 8px; margin-top: 16px; }
.dpk-item, .dpk-ul li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font: 400 16px/24px var(--p-font); }
.dpk-tick { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .p-ink .dpk-item { color: var(--p-white); }
.dpk-ul { list-style: none; margin: 0; padding: 0 24px 24px; display: grid; gap: 8px; }
html body .dpk .dpk-ul li { color: var(--p-ink); }
html body .p-ink .dpk-ul li { color: var(--p-white); }
@media (min-width: 761px) { .dpk-ul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* Platform section as cards (Erfan 18 Oct, idea from DesignMe's tools grid; our point stays "picked by who edits the site").
   Centred head, three 4px cards (1px line) with a 48px logo tile (2px, line), name 24/32 600, "best if" line 18/28 #444; Figma line below.
   Logos: simple-icons 13.21.0 (CC0), drawn in ink. */
.p-tools { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .p-tools { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.p-tool { display: grid; align-content: start; gap: 8px; padding: 32px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
.p-tool-logo { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: var(--p-r-box); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-sheet); }
.p-tool-logo img { width: 24px; height: 24px; display: block; }
html body .p-tool-name { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
html body .p-tool-best { margin: 0; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
html body .p-tools-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 32px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-align: center; }
.p-tool-logo-s { width: 32px; height: 32px; margin: 0; flex: none; } .p-tool-logo-s img { width: 16px; height: 16px; }

/* ===== 18 Oct, DesignMe-informed additions on the Launch page (research/designme-website-design-2026-10-18/adapt-to-launch-page.md) ===== */
/* Real timelines as bars on one week scale (18 Oct). Name column 220px; track with weekly hairlines; ink bar, orange end dot = live;
   dashed accent-deep line at the usual length. Phones: name above the bar. */
.p-gantt { position: relative; --name: 260px; }
@media (min-width: 761px) { .p-gantt { padding-bottom: 32px; } .p-gantt-mark { bottom: 32px !important; } }
.p-gantt-axis { display: none; }
@media (min-width: 761px) {
  .p-gantt-axis { display: grid; grid-template-columns: var(--name) repeat(var(--weeks), 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--p-line); font: 400 14px/20px var(--p-font); color: var(--p-mute); }
  .p-gantt-axis span { text-align: right; padding-right: 4px; }
}
.p-gantt-rows { margin: 0; padding: 0; list-style: none; }
.p-gantt-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--p-line); }
@media (min-width: 761px) { .p-gantt-row { grid-template-columns: var(--name) 1fr; gap: 0; align-items: center; } }
.p-gantt-name { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.p-gantt-name b { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 600 18px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }
/* Name link (Erfan 21 Oct): no underline, no resting arrow; an accent arrow slides in on hover / focus, always shown on touch screens.
   A straight arrow, not a diagonal one: the names open our own case study pages. */
.p-gantt-name .p-gantt-go { display: inline-grid; width: 18px; height: 18px; color: var(--p-accent); opacity: 0; transform: translateX(-8px); transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.p-gantt-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-gantt-name:hover .p-gantt-go, .p-gantt-name:focus-visible .p-gantt-go { opacity: 1; transform: none; }
@media (hover: none) { .p-gantt-name .p-gantt-go { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .p-gantt-name .p-gantt-go { transform: none; transition: opacity .2s ease; } }
.p-gantt-name:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
.p-gantt-name span { font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.p-gantt-track { position: relative; height: 40px; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--weeks) - 1px), var(--p-line) calc(100% / var(--weeks) - 1px) calc(100% / var(--weeks))); }
.p-gantt-bar { position: absolute; left: 0; top: 8px; height: 24px; width: var(--w); min-width: 24px; border-radius: var(--p-r-box); background: var(--p-ink); transform-origin: left; transition: transform 0.9s cubic-bezier(.25, 1, .5, 1); }
.p-gantt-bar::after { content: ''; position: absolute; right: -4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 0 2px var(--p-white); }
.p-gantt-len { position: absolute; left: calc(100% + 16px); top: 0; white-space: nowrap; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.p-gantt-bar.is-in .p-gantt-len { left: auto; right: 16px; color: var(--p-white); }   /* long bars: label inside */
.p-gantt.is-pre .p-gantt-bar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .p-gantt-bar { transition: none; } .p-gantt.is-pre .p-gantt-bar { transform: none; } }
.p-gantt-mark { display: none; }
@media (min-width: 761px) {
  .p-gantt-mark { display: block; position: absolute; top: 28px; bottom: 0; left: calc(var(--name) + (100% - var(--name)) * var(--at)); border-left: 1px dashed var(--p-accent-deep); pointer-events: none; }
  .p-gantt-mark span { position: absolute; top: calc(100% + 8px); left: 0; transform: translateX(-50%); white-space: nowrap; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-accent-deep); }
}


/* Other services row + link columns (18 Oct v2). Panel 4px with inner hairlines; card: 40px icon tile, name 18/28 600 + arrow, line 16/24;
   hover = sheet + arrow nudge-free swap colour. Link columns: 12/16 uppercase labels, links 16/24 ink, underline on hover only. */
.p-rs { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); overflow: hidden; }
@media (min-width: 761px) { .p-rs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1101px) { .p-rs { grid-template-columns: repeat(4, 1fr); } }
.p-rs li { box-shadow: inset 0 -1px 0 var(--p-line), inset -1px 0 0 var(--p-line); }
.p-rs-card { display: grid; align-content: start; gap: 8px; height: 100%; padding: 32px 24px; color: inherit; text-decoration: none; transition: background-color 0.4s cubic-bezier(.25, 1, .5, 1); }
.p-rs-card:hover { background: var(--p-sheet); }
.p-rs-card:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: -2px; }
.p-rs-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border-radius: var(--p-r-box); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
.p-rs-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html body .p-rs-name { display: block; font: 600 18px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }
/* arrow in the card's top-right corner, level with the icon tile (Erfan 18 Oct: "arrow position" beside the title looked off).
   Hover follows interaction.md: the cell fills sheet (0.4s) and the arrow swaps (out right, a fresh one in from the left, 0.6s);
   no colour change, no nudge. */
.p-rs-card { position: relative; }
html body .p-rs-card .arr-swap { position: absolute; top: 42px; right: 24px; width: 20px; height: 20px; }
html body .p-rs-card .arr-swap .arr { width: 100%; height: 100%; fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-rs-card:hover .arr-swap .arr:first-child, .p-rs-card:focus-visible .arr-swap .arr:first-child { transform: translateX(120%); opacity: 0; }
.p-rs-card:hover .arr-swap .arr + .arr, .p-rs-card:focus-visible .arr-swap .arr + .arr { transform: none; opacity: 1; transition-delay: .06s; }
html body .p-rs-why { font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-lc { margin-top: 64px; padding: 40px; border-radius: var(--p-r-card); background: var(--p-sheet); }
@media (max-width: 760px) { .p-lc { padding: 32px 24px; } }
html body .p-lc-k { margin: 0 0 32px; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
.p-lc-cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 761px) { .p-lc-cols { grid-template-columns: repeat(3, 1fr); } .p-lc-cta { grid-column: 1 / -1; } }
@media (min-width: 1101px) { .p-lc-cols { grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 40px; } .p-lc-cta { grid-column: auto; } }
html body .p-lc-label { margin: 0 0 16px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.p-lc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
/* link panel: no arrows (Erfan 18 Oct); muted-to-full hover like breadcrumbs and footer links (README exception) */
.p-lc ul a { font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-decoration: none; transition: color 0.4s cubic-bezier(.25, 1, .5, 1); }
.p-lc ul a:hover { color: var(--p-ink); }
.p-lc ul a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
.p-lc-cta { display: grid; align-content: start; padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .p-lc-line { margin: 0 0 24px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.p-lc-btns { display: grid; justify-items: start; gap: 12px; }   /* arrow links, not buttons: "Book a call" is the only button label (content rules) */
/* each scope card's own starting price (Landing page $5K / Full website $10K, Erfan 18 Oct) */
@media (min-width: 1101px) { .p-prices.p-prices-4 { grid-template-columns: repeat(2, 1fr); } }   /* four price cards: one-time projects on the first row, monthly plans on the second */
/* Platform section v2 (Erfan 18 Oct "improve the design"): the three platform cards become one hairline-divided band (no separate boxes),
   then one even grid of the other 12 tools (logo, name, small kind label): 6 per row at desktop, 4 tablet, 2 phone. No repeats, no orphans. */
@media (min-width: 761px) {
  html body .p-tools { gap: 0; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); }
  html body .p-tools .p-tool { box-shadow: none; border-radius: 0; background: none; }
  html body .p-tools .p-tool + .p-tool { box-shadow: inset 1px 0 0 var(--p-line); }
}
.p-tw { margin-top: 48px; }
html body .p-tw-k { margin: 0 0 16px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); text-align: center; }
.p-tw-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 761px) { .p-tw-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1101px) { .p-tw-grid { grid-template-columns: repeat(6, 1fr); } }
.p-tw-grid li { display: grid; justify-items: center; gap: 4px; padding: 20px 12px; border-radius: var(--p-r-box); background: var(--p-sheet); text-align: center; }
.p-tw-grid img, .p-tw-grid .p-tg-mono { width: 24px; height: 24px; margin-bottom: 8px; }
.p-tg-mono { display: grid; place-items: center; flex: none; border-radius: var(--p-r-box); background: var(--p-ink); color: var(--p-white); font: 600 12px/1 var(--p-font); }
html body .p-tw-n { font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .p-tw-c { font: 400 14px/20px var(--p-font); color: var(--p-mute); }
/* work-type badges reuse the nav dropdown tags (.tag-pop / .tag-new / .tag-exp from site.css) */
html body .p-gantt-name .p-gantt-kind { justify-self: start; margin: 4px 0 2px; }
html body .p-gantt-name .p-gantt-kind { font: 500 12px/1 var(--p-font); letter-spacing: .06em; text-transform: uppercase; padding: 4px; border-radius: var(--p-r-box); }
html body .p-gantt-name .p-gantt-kind.tag-pop { color: #A42600; } html body .p-gantt-name .p-gantt-kind.tag-new { color: #3236B0; } html body .p-gantt-name .p-gantt-kind.tag-exp { color: #0B6B3A; }
html body .p-gantt-name .p-gantt-kind { white-space: nowrap; }
/* Two coloured bands touching (Compare → fit): no white gap between them (Erfan 18 Oct) */
html body section#compare + .p-fit2-band { margin-top: 0; padding-bottom: 0; background: none; }   /* right after the Compare band: no second grey band (Erfan 18 Oct: no stacked bands, one spacing rhythm) */

/* Prices as a plan picker (/pricing, PricePicker.astro, Erfan 18 Oct). Rows on the left, one ink panel on the right (sticky on
   desktop), the fixed-price promise under the rows. Under 1101px: rows, then the panel, then the promise. */
.ppk { display: grid; gap: 24px; }
@media (min-width: 1101px) {
  .ppk { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 32px; align-items: start; }
  .ppk-right { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .ppk-promise { grid-column: 1; grid-row: 2; }
  .ppk-panel { position: sticky; top: 96px; }
}
.ppk-group + .ppk-group { margin-top: 32px; }
html body .ppk-group .p-meta { margin-bottom: 12px; }
.ppk-list { border: 1px solid var(--p-line); border-radius: var(--p-r-card); overflow: hidden; }
html body .ppk-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; cursor: pointer; background: var(--p-white); transition: background var(--p-ease); }
html body .ppk-row + .ppk-row { border-top: 1px solid var(--p-line); }
html body .ppk-row:hover { background: var(--p-sheet); }
html body .ppk-row:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: -2px; }
html body .ppk-row[aria-selected="true"] { background: var(--p-sheet); box-shadow: inset 3px 0 0 var(--p-ink); }
.ppk-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--p-r-box); background: var(--p-sheet); color: var(--p-ink); transition: background var(--p-ease), color var(--p-ease); }
html body .ppk-row:hover .ppk-ico { background: var(--p-white); }
html body .ppk-row[aria-selected="true"] .ppk-ico { background: var(--p-ink); color: var(--p-white); }
.ppk-ico svg, .ppk-pico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ppk-name, .ppk-price { font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.ppk-price { font-variant-numeric: tabular-nums; }
html body .ppk-row[aria-selected="true"] .ppk-name { font-weight: 600; }
/* the promise */
.ppk-promise { padding: 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
html body .ppk-promise h3 { margin: 0 0 12px; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.ppk-promise ul, .ppk-inc { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .ppk-promise li { display: flex; gap: 8px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.ppk-promise svg, .ppk-inc svg { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the panel */
.ppk-panel { padding: 40px; border-radius: var(--p-r-card); background: var(--p-ink); color: var(--p-white); scroll-margin-top: 80px; }
.ppk-panel[hidden] { display: none; }
.ppk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ppk-tag { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-link-d); }
.ppk-pico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--p-r-box); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); color: var(--p-white); }
html body .ppk-panel h3 { margin: 24px 0 0; font: 600 32px/40px var(--p-font); letter-spacing: -0.03em; color: var(--p-white); }
html body .ppk-panel .ppk-text { margin: 8px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-link-d); text-wrap: pretty; }
.ppk-switch { display: inline-flex; gap: 4px; margin-top: 32px; padding: 4px; border-radius: var(--p-r-box); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
html body .ppk-switch button { all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--p-r-box); cursor: pointer; font: 500 14px/20px var(--p-font); color: var(--p-link-d); }
html body .ppk-switch button[aria-pressed="true"] { background: var(--p-white); color: var(--p-ink); }
html body .ppk-switch button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.ppk-save { padding: 2px 6px; border-radius: var(--p-r-box); background: #FFEDE6; color: #A42600; font: 500 12px/16px var(--p-font); }   /* tokens tag-pop-bg / tag-pop-text */
html body .ppk-cost { display: flex; align-items: baseline; gap: 8px; margin: 32px 0 0; }
html body .ppk-switch + .ppk-cost { margin-top: 24px; }
.ppk-pre, .ppk-unit { font: 500 16px/24px var(--p-font); color: var(--p-link-d); }
.ppk-amt { font: 600 72px/72px var(--p-font); letter-spacing: -0.05em; color: var(--p-white); font-variant-numeric: tabular-nums; }
html body .ppk-bill { margin: 8px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-link-d); }
html body .ppk-panel .ppk-cta { width: 100%; justify-content: center; margin-top: 32px; color: var(--p-ink); }
html body .ppk-panel .p-meta { margin: 40px 0 16px; padding-top: 32px; border-top: 1px solid var(--p-line-dark); color: var(--p-link-d); }
.ppk-inc { gap: 12px; }
html body .ppk-inc li { display: flex; gap: 12px; font: 400 16px/24px var(--p-font); color: var(--p-white); }
.ppk-more { margin-top: 32px; }
html body .ppk-more .p-link { color: var(--p-white); }
@media (max-width: 760px) {
  .ppk-panel { padding: 24px; } html body .ppk-row { padding: 16px; gap: 12px; }
  .ppk-amt { font-size: 56px; line-height: 56px; } html body .ppk-panel h3 { font-size: 24px; line-height: 32px; }
}
/* Our link hover (interaction.md): no colour change, no new underline; the arrow swaps out right and a fresh one slides in (0.6s).
   .p-inl = text links outside .btn / .p-link (fit card inline link, More from us, timeline names). */
.p-inl .arr-swap { width: 1em; height: 1em; margin-left: 2px; }
.p-inl .arr-swap .arr { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-inl:hover .arr-swap .arr:first-child, .p-inl:focus-visible .arr-swap .arr:first-child { transform: translateX(120%); opacity: 0; }
.p-inl:hover .arr-swap .arr + .arr, .p-inl:focus-visible .arr-swap .arr + .arr { transform: none; opacity: 1; transition-delay: .06s; }
html body .p-fit2 li a.p-inl { white-space: nowrap; }

/* Scope picker (Launch page "Two ways to start", StartPicker.astro, 18 Oct): the .ppk picker with the timeline as the big
   number and the price as one small line under it. Rows show the timeline in mute; the chosen row's turns ink. */
html body .ppk-scope .ppk-price { font-weight: 400; color: var(--p-mute); }
html body .ppk-scope .ppk-row[aria-selected="true"] .ppk-price { font-weight: 500; color: var(--p-ink); }
.ppk-pop { padding: 4px 8px; border-radius: var(--p-r-box); background: #FFEDE6; color: #A42600; font: 500 12px/16px var(--p-font); letter-spacing: .06em; text-transform: uppercase; }   /* tokens tag-pop-bg / tag-pop-text */
html body .ppk-scope .ppk-unit { font: 500 20px/28px var(--p-font); color: var(--p-white); }
html body .ppk-from { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--p-line-dark); font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
html body .ppk-from b { font-weight: 600; color: var(--p-white); }
@media (max-width: 760px) { html body .ppk-scope .ppk-unit { font-size: 16px; line-height: 24px; } }
.p-lc-cta-a { font: 500 16px/24px var(--p-font); color: var(--p-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.p-lc-cta-a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }

/* Scope picker v2 (18 Oct): richer rows, two equal stats, balanced columns. Scoped to .ppk-scope so /pricing's PricePicker is untouched. */
@media (min-width: 1101px) {
  .ppk.ppk-scope { align-items: stretch; }
  .ppk-scope .ppk-promise { align-self: end; }
}
html body .ppk-scope .ppk-row { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; padding: 24px; }
html body .ppk-scope .ppk-ico { width: 40px; height: 40px; }
html body .ppk-scope .ppk-name { display: grid; gap: 4px; font: 600 18px/28px var(--p-font); letter-spacing: -0.01em; }
html body .ppk-scope .ppk-rline { font: 400 16px/24px var(--p-font); color: var(--p-text-2); letter-spacing: 0; }
html body .ppk-scope .ppk-price { display: grid; justify-items: end; gap: 4px; padding-top: 2px; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .ppk-scope .ppk-rfrom { font: 400 14px/20px var(--p-font); color: var(--p-mute); }
html body .ppk-scope .ppk-row[aria-selected="true"] .ppk-name { font-weight: 600; }
.ppk-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 32px 0 0; border-top: 1px solid var(--p-line-dark); border-bottom: 1px solid var(--p-line-dark); }
.ppk-stats > div { padding: 24px 0; }
.ppk-stats > div + div { padding-left: 24px; border-left: 1px solid var(--p-line-dark); }
html body .ppk-stats dt { margin: 0 0 8px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-link-d); }
html body .ppk-stats dd { margin: 0; display: flex; align-items: baseline; gap: 8px; }
html body .ppk-scope .ppk-stats .ppk-amt { font: 600 48px/52px var(--p-font); letter-spacing: -0.04em; color: var(--p-white); }
html body .ppk-scope .ppk-stats .ppk-unit { font: 500 18px/28px var(--p-font); color: var(--p-white); }
html body .ppk-scope .ppk-from { margin: 16px 0 0; padding: 0; border: 0; font: 400 14px/20px var(--p-font); color: var(--p-link-d); }
@media (max-width: 760px) { html body .ppk-scope .ppk-stats .ppk-amt { font-size: 40px; line-height: 44px; } html body .ppk-scope .ppk-row { padding: 16px; grid-template-columns: 32px minmax(0, 1fr) auto; } html body .ppk-scope .ppk-ico { width: 32px; height: 32px; } }
.ppk-scope .ppk-drivers { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--p-line); }
html body .ppk-scope .ppk-drivers .p-meta { margin: 0 0 12px; }
.ppk-scope .ppk-drivers ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .ppk-scope .ppk-drivers li { padding: 6px 12px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); font: 500 14px/20px var(--p-font); color: var(--p-ink); }

/* Scope picker v3 (18 Oct, Erfan "so many repeated text"): rows = name + pitch only, the panel opens on the two stats. */
html body .ppk-scope .ppk-row { grid-template-columns: 40px minmax(0, 1fr); }
html body .ppk-scope .ppk-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
html body .ppk-scope .ppk-nm .ppk-pop { font-weight: 500; letter-spacing: .06em; }
html body .ppk-scope .ppk-stats { margin-top: 0; border-top: 0; }
html body .ppk-scope .ppk-stats > div { padding-top: 0; }
@media (max-width: 760px) { html body .ppk-scope .ppk-row { grid-template-columns: 32px minmax(0, 1fr); } }

/* Launch page packages v4 (StartPicker.astro, Erfan 18 Oct): two light cards, the most-booked one with the Book a call chrome rim. Tokens only. */
.spk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 761px) { .spk-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.spk-card { display: flex; flex-direction: column; padding: 32px 24px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
@media (min-width: 761px) { .spk-card { padding: 40px; } }
.spk-pop { box-shadow: none; border: 2px solid transparent; animation: ck-sweep 10s linear infinite;   /* same rim as .p-fit2-yes; --ck-a + ck-sweep live in site.css */
  background: linear-gradient(var(--p-white), var(--p-white)) padding-box, conic-gradient(from var(--ck-a), #3A3A3A 0deg, #9A9A9A 40deg, #F7F7F7 70deg, #BDBDBD 100deg, #5A5A5A 140deg, #DADADA 175deg, #FFB59A 205deg, #FFFFFF 225deg, #9AA4B8 255deg, #C9D3EA 280deg, #4A4A4A 320deg, #3A3A3A 360deg) border-box; }
@media (prefers-reduced-motion: reduce) { .spk-pop { animation: none; --ck-a: 30deg; } }
.spk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spk-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--p-r-box); background: var(--p-sheet); color: var(--p-ink); }
.spk-pop .spk-ico { background: var(--p-ink); color: var(--p-white); }
.spk-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body .spk-card h3 { margin: 24px 0 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
html body .spk-line { margin: 8px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
html body .spk-card .spk-cta { width: 100%; justify-content: center; margin-top: 32px; }
/* v4 fixes: two columns only from 1101px (the 48px figures wrap at tablet); a 1px line border on the plain card and 1px less padding on the
   2px-rim card, so both cards' content lines up */
@media (min-width: 761px) and (max-width: 1100px) { .spk-grid { grid-template-columns: 1fr; } }
.spk-card { box-shadow: none; border: 1px solid var(--p-line); }
.spk-card.spk-pop { border: 2px solid transparent; padding: 31px 23px; }
@media (min-width: 761px) { .spk-card.spk-pop { padding: 39px; } }

/* Launch page packages v5 (Erfan 18 Oct: no price here; DesignMe "Typical engagements" as benchmark): card = head (icon, name,
   who it's for, time) + what's-included list (ticks, nothing opens: see below). One Book a call under both. */
.spk-grid { align-items: start; }
.spk-card, .spk-card.spk-pop { padding: 0; }
.spk-head { padding: 32px 24px; border-bottom: 1px solid var(--p-line); }
.spk-pop .spk-head { padding: 31px 23px; }
@media (min-width: 761px) {
  .spk-head { padding: 24px 32px; } .spk-pop .spk-head { padding: 23px 31px; }  /* 40 -> 24/32 (Erfan 21 Oct: whole section in one screen) */
}
@media (min-width: 761px) and (max-width: 1100px) { .spk-grid { grid-template-columns: 1fr 1fr; } }
.spk-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 24px; }  /* gap + centre for the optional text link (23 Oct) */
/* v5 fixes: both card heads the same height so the lists line up */
@media (min-width: 1101px) and (max-width: 1279px) { html body .spk-line { min-height: 48px; } }  /* 1280+: every card line fits one row (21 Oct) */
@media (min-width: 761px) and (max-width: 1100px) { html body .spk-line { min-height: 72px; } }

/* What's included: a ruled list with our accent tick (Erfan 18 Oct: no + rows, nothing opens; replaces the details rows) */
.spk-items { margin: 0; padding: 0; list-style: none; }
html body .spk-items li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 24px; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .spk-items li + li { border-top: 1px solid var(--p-line); }
.spk-items svg, .spk-when svg { width: 16px; height: 16px; flex: none; margin-top: 4px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spk-pop .spk-items li { padding-left: 23px; padding-right: 23px; }
@media (min-width: 761px) { html body .spk-items li { padding: 8px 32px; } .spk-pop .spk-items li { padding-left: 31px; padding-right: 31px; } }
/* Compact (Erfan 21 Oct: "in one viewport I can't see it"): icon, name and tag on one row; 8px rows inside an 8px list pad; hairlines kept */
.spk-items { padding: 8px 0; }
html body .spk-items li { padding-top: 8px; padding-bottom: 8px; }
.spk-top { justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
html body .spk-card .spk-top h3 { margin: 0; }
html body .spk-top .spk-when { margin: 0 0 0 auto; }  /* time sits right on the name row (wraps under it on narrow cards) */
@media (max-width: 1100px) { html body .spk-top .spk-when { flex-basis: 100%; margin: 0; } }  /* both cards wrap the same way, so the lists stay level */
/* time to launch: 16/24 500 ink with the clock icon (no uppercase label) */
html body .spk-when { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
html body .spk-shared { max-width: 800px; margin: 24px auto 0; text-align: center; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }  /* shared plan items, said once (22 Oct) */
.spk-when svg { width: 20px; height: 20px; margin-top: 0; stroke: var(--p-ink); stroke-width: 1.6; }


/* Underlined links, our hover (Erfan 18 Oct: "if we don't have any style for underline text, let's make our style").
   The underline is drawn as a 1.5px background under the label (.ul), 5px below the text. On hover it wipes out to the right
   and draws back in from the left, in step with the arrow swap (0.6s, same curve). No colour change. ArrowLink (.p-link) and
   inline links in a sentence (.p-inl.p-ul, e.g. the fit list's "website templates"). The .ul underline + wipe now live in site.css
   (one rule for every underlined link); only the ArrowLink pieces stay here. */
html body .p-link { text-decoration: none; }
html body .p-fit2 li a.p-ul { text-decoration: none; }
.p-link .arr-swap .arr { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-link:hover .arr-swap .arr:first-child, .p-link:focus-visible .arr-swap .arr:first-child { transform: translateX(120%); opacity: 0; }
.p-link:hover .arr-swap .arr + .arr, .p-link:focus-visible .arr-swap .arr + .arr { transform: none; opacity: 1; transition-delay: .06s; }
/* Start smaller links (More from us): underlined, no arrow (Erfan 18 Oct); the underline wipe is their hover */
html body .p-lc-cta-a.p-ul { text-decoration: none; justify-self: start; }

/* 18 Oct audit, design fixes (research/audit-website-design-2026-10-18/design.md) */
/* #1 hero scene under 1366px: full column width at a landscape 4:3 instead of a 480px portrait box pinned left */
@media (max-width: 1365px) { .p-scene { max-width: none; aspect-ratio: 4 / 3; } }
/* Drawings in the hero box (22 Oct, Erfan: "top and bottom padding are not equal"): the box carries the tint + dots, the transparent
   drawing is shown whole and centred, so its margins stay equal whatever shape the box takes (4:5 phone, 4:3 tablet, ~1:1 desktop). */
.p-scene-draw img { object-fit: contain; object-position: 50% 50%; padding: 16px; box-sizing: border-box; }
/* Scene with a film (23 Oct, Framer page): the case video plays in the picture's window. The picture is always width-fit and
   bottom-anchored (every box shape is wider than 800x1075), so the window's screen area is fixed in width units: left 90/800,
   top 529/1075, i.e. 546/800 of the width above the bottom. The video (site area only, 1072x852) fills it and bleeds off the bottom. */
.p-scene-win { position: absolute; left: 11.25%; right: 0; bottom: 0; aspect-ratio: 710 / 546; overflow: hidden; background: #050505; }
.p-scene-win video { display: block; width: 100%; height: auto; }
/* Hero audit form (Free Website Audit page, 24 Oct 2026): the home audit fields (.ck-fields, site.css: 48px white inputs,
   hairline, ink button) under the subtitle, with no panel, stroke or title (Erfan: "remove this… the stroke… the box").
   One row as wide as the subtitle column on desktop, stacked under 760px; the note sits under it, left-aligned. */
html body .p-top-form { margin: 40px 0 0; max-width: 720px; }
html body .p-top-form .ck-fields { margin-top: 0; }
/* the button is the audit box button exactly (site.css .ck-form .btn-dark rules): no browser border, ink fill that stays ink on hover,
   arrow swap, 48px, 24px sides, 2px corners (Erfan 24 Oct: "why button has bigger height… hover is also different") */
html body .p-top-form .btn-dark, html body .p-top-form .btn-dark:hover, html body .p-top-form .btn-dark:focus-visible { border: 0; background: var(--p-ink) !important; color: #fff !important; }
html body .p-top-form .btn-dark { min-height: 48px; height: 48px; padding: 0 24px; font: 500 16px var(--p-font); gap: 8px; white-space: nowrap; cursor: pointer; border-radius: 2px !important; }
html body .p-top-form .btn-dark:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,60,0,.35); }
@media (max-width: 760px) { html body .p-top-form .btn-dark { width: 100%; justify-content: center; } }
html body .p-top-form .ck-note { grid-column: 1 / -1; margin-top: 4px; text-align: left; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .p-top-form .ck-note.ok { color: #2E5631; } html body .p-top-form .ck-note.err { color: #A42600; }
@media (max-width: 760px) { html body .p-top-form { margin-top: 32px; } }
/* Centred audit hero (Erfan 24 Oct: "make hero and everything center aligned"): breadcrumb, H1, subtitle, form and note */
html body .p-dk-center .p-in > nav, html body .p-dk-center .p-top-center { text-align: center; }
html body .p-dk-center .p-in > nav ol, html body .p-dk-center .p-in > nav ul { justify-content: center; }
html body .p-top-center .p-top-copy { display: grid; justify-items: center; }
html body .p-top-center .p-dk-h1 { margin-left: auto; margin-right: auto; max-width: 20ch; text-wrap: balance; }
html body .p-top-center .p-dk-sub { margin-left: auto; margin-right: auto; max-width: 640px; text-wrap: balance; }
html body .p-top-center .p-top-form { margin-left: auto; margin-right: auto; width: 100%; }
html body .p-top-center .p-top-form .ck-note { text-align: center; }
/* error: the field outline turns accent-deep and the note under the row says what to fix */
html body .p-top-form .ck-note.err { color: #A42600; font-weight: 500; }
html body .p-top-form input[aria-invalid=true], html body .p-top-form input[aria-invalid=true]:focus { border-color: var(--p-accent-deep) !important; box-shadow: 0 0 0 3px rgba(210,49,0,.15) !important; }
/* thank-you state: replaces the fields after a valid send (audit.js) */
html body .p-hdone { display: grid; justify-items: center; gap: 8px; padding: 8px 0 0; text-align: center; outline: none; }
html body .p-hdone[hidden] { display: none; }
html body .p-top-form .ck-fields[hidden] { display: none; }
html body .p-hdone-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 2px; margin-bottom: 8px; }
html body .p-hdone-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--t-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .p-hdone-t { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
html body .p-hdone-l { margin: 0; max-width: 520px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: balance; }
html body .p-hdone-l b { font-weight: 500; color: var(--p-ink); white-space: nowrap; }
/* Click to play (Erfan 23 Oct: autoplay costs load time): the film stays hidden, unloaded, until the visitor plays it; the picture
   is the control, with the case films' 48px round play button in its middle (site.css .cs-play). */
.p-scene-win { opacity: 0; transition: opacity .3s ease; }
.p-scene.is-playing .p-scene-win { opacity: 1; }
.p-scene:has(.p-scene-play) { cursor: pointer; }
html body .p-scene-play { position: absolute; z-index: 3; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0;
  display: grid; place-items: center; border: 1px solid #E6E6E6; border-radius: 50%; background: #FFFFFF; color: #050505; box-shadow: none;
  cursor: pointer; transform: scale(1); transition: transform .2s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
html body .p-scene-play svg { display: block; width: 20px; height: 20px; fill: currentColor; }
html body .p-scene:hover .p-scene-play { transform: scale(1.04); }
html body .p-scene-play:focus-visible { outline: 2px solid #FF3C00; outline-offset: 2px; }
html body .p-scene.is-on .p-scene-play { opacity: 0; }
html body .p-scene.is-on:hover .p-scene-play, html body .p-scene.is-on .p-scene-play:focus-visible { opacity: 1; }
@media (hover: none) { html body .p-scene.is-on .p-scene-play { opacity: .9; width: 40px; height: 40px; left: auto; top: auto; right: 16px; bottom: 16px; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .p-scene-win, html body .p-scene-play { transition: none; } }
/* #3 reverted (Erfan 21 Oct): no empty space under the shorter list; the Landing page card is shorter on purpose */
.spk-grid { align-items: start; }
/* #4 every title is ink; the "Not for you if" card stays quieter through its grey X marks only */
html body .p-fit2-no .p-fit2-k { color: var(--p-ink); }
/* #7 hero review caption: 14/20 #444 like the home hero */
html body .p-dk .rb-copy small { font-size: 14px; line-height: 20px; color: var(--p-text-2); }

/* ==== Style v6: flat on inner pages (Erfan 18 Oct 2026; rules in site.css "Style v6" and the design-system README) ====
   - dark bands are flat ink (no silk photo, no light texture)
   - the service-page hero keeps its thin column lines but loses the moving sheen and the white blooms
   - the turning rim lives only on Book a call and the free-audit form: the fit card and the most-booked package card get a
     plain 2px ink border instead (same 2px, so paddings stay aligned) */
html body .p-ink.p-silk, html body .p-ink.p-light { background-image: none !important; background-color: var(--p-ink) !important; }
html body .p-ink.p-light::before, html body .p-ink.p-light::after { display: none !important; }
html body .p-dk.p-lt { background: var(--p-white) !important; }
html body .p-dk.p-lt::after { display: none !important; }
html body .p-fit2-yes, html body .spk-pop { animation: none !important; border: 2px solid var(--p-ink) !important; background: var(--p-white) !important; }
/* Style v6: related-service icon tiles on each service's tint (icon in the tint text colour); "More from us" panel flat sand,
   its "Start smaller" card stays white (a tint tile never sits on a tint) */
html body .p-rs-ico.tint { box-shadow: none; }
html body .p-rs-ico.tint svg { stroke: var(--t-fg) !important; }
html body .p-lc.tint .p-lc-cta { background: var(--p-white); }

.p-tools-more { display: flex; justify-content: center; margin: 32px 0 0; }  /* arrow link under the platform cards (24 Oct) */

/* /framer marketplace top (24 Oct 2026, Erfan: "exactly like the Framer marketplace page… implement our design system").
   StoreMarket.astro. Framer's layout, our tokens: 32/40 title, 14/20 UI text, sheet fills, 2px controls, 4px card pictures, no shadows. */
html body .mk-back { display: inline-block; margin-bottom: 24px; font: 500 14px/20px var(--p-font); color: var(--p-text-2); text-decoration: none; transition: color var(--p-ease); }
html body .mk-back:hover { color: var(--p-ink); }
html body .mk-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; margin-top: 48px; }
@media (min-width: 761px) { html body .mk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) { html body .mk-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
html body .mk-cat { display: block; margin: 0; font: 500 14px/20px var(--p-font); color: var(--p-ink); text-decoration: none; }
html body .mk-col ul { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
html body .mk-col li a { font: 400 14px/20px var(--p-font); color: #6B6B6B; /* menu-desc token: lighter than the labels */ text-decoration: none; transition: color var(--p-ease); }
html body .mk-col a:hover, html body .mk-col a:focus-visible { color: var(--p-ink); }
/* the open category, marked like Framer's (ink + a dot before it) */
html body .mk-col a[aria-current="page"] { color: var(--p-ink); font-weight: 500; }
html body .mk-col li a[aria-current="page"]::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 8px 2px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
html body .mk-cats a:focus-visible, html body .mk-card a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
html body .mk-list { padding-top: 64px; }
html body .mk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
html body .mk-tabs { display: flex; gap: 4px; }
html body .mk-tabs button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--p-r-box); background: transparent; font: 500 14px/20px var(--p-font); color: var(--p-text-2); white-space: nowrap; cursor: pointer; transition: color var(--p-ease), background-color var(--p-ease); }
html body .mk-tabs button:hover { color: var(--p-ink); }
html body .mk-tabs button[aria-pressed="true"] { background: var(--p-sheet); color: var(--p-ink); }
html body .mk-tabs button:focus-visible, html body .mk-select:focus-visible, html body .mk-search input:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
html body .mk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
html body .mk-search { position: relative; display: block; }
html body .mk-search svg { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; fill: none; stroke: var(--p-text-2); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
html body .mk-search input { width: 220px; height: 32px; padding: 0 12px 0 32px; border: 0; border-radius: var(--p-r-box); background: var(--p-sheet); font: 400 14px/20px var(--p-font); color: var(--p-ink); -webkit-appearance: none; appearance: none; }
html body .mk-search input::placeholder { color: var(--p-text-2); }
html body .mk-select { height: 32px; padding: 0 32px 0 12px; border: 0; border-radius: var(--p-r-box); background: var(--p-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; font: 500 14px/20px var(--p-font); color: var(--p-ink); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--p-ease); }
html body .mk-select:hover { background-color: var(--p-sheet-hover); }
html body .mk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
@media (min-width: 561px) { html body .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { html body .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) { html body .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .mk-card[hidden] { display: none; }
html body .mk-card a { display: block; color: var(--p-ink); text-decoration: none; }
html body .mk-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--p-r-card); background: var(--p-sheet); }
html body .mk-pic::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--p-line); border-radius: inherit; pointer-events: none; }
html body .mk-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
html body .mk-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
html body .mk-text { display: grid; min-width: 0; }
html body .mk-name { font: 500 14px/20px var(--p-font); color: var(--p-ink); }
html body .mk-type { overflow: hidden; font: 400 14px/20px var(--p-font); color: var(--p-text-2); white-space: nowrap; text-overflow: ellipsis; }
html body .mk-price { flex: none; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 500 12px/1 var(--p-font); letter-spacing: .06em; text-transform: uppercase; color: var(--p-ink); transition: background-color var(--p-ease); }  /* tag-text token, 12/1 500 uppercase (24 Oct: "the labels look too big") */
html body .mk-card a:hover .mk-price { background: var(--p-sheet-hover); }
/* Card hover (24 Oct, "the cards feel empty"): second screenshot fades in, hairline darkens, chip fills; no lift or tilt */
html body .mk-pic::after { transition: border-color var(--p-ease); z-index: 1; }
html body .mk-pic-2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity var(--p-ease); }
html body .mk-card a:hover .mk-pic-2, html body .mk-card a:focus-visible .mk-pic-2 { opacity: 1; }
html body .mk-card a:hover .mk-pic::after, html body .mk-card a:focus-visible .mk-pic::after { border-color: rgba(5, 5, 5, .18); }
@media (prefers-reduced-motion: reduce) { html body .mk-pic-2, html body .mk-pic::after { transition: none; } }
html body .mk-empty { margin: 24px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
@media (max-width: 760px) { html body .mk-bar { align-items: stretch; } html body .mk-tabs { width: 100%; } html body .mk-tabs button { flex: 1 1 auto; padding: 0 8px; } html body .mk-filters, html body .mk-search, html body .mk-search input { width: 100%; } html body .mk-filters label:not(.mk-search) { flex: 1; } html body .mk-select { width: 100%; } }
/* Marketplace H1 at 48/52 on every width (Erfan 24 Oct: "this H1 title looks very big"): still the page's one H1, sized like
   the hero H1's phone step, 2 lines on desktop like Framer's compact title area */
html body .mk-top .p-h1 { max-width: none; font-size: 32px; line-height: 40px; letter-spacing: -0.03em; }  /* short H1 at the card-title-32 size (24 Oct, "congested") */  /* one line at 1440 so the first card row fits the first screen, like Framer (24 Oct) */
html body .mk-top .p-sub { margin-top: 16px; font-size: 18px; }
@media (min-width: 761px) { html body .mk-top { padding-top: 48px; } }
@media (max-width: 760px) { html body .mk-top .p-h1 { font-size: 24px; line-height: 32px; } }
/* Marketplace header on the home hero ground (Erfan 24 Oct: "use the background like in the homepage"): the same layers as the
   service top .p-dk.p-lt (two white blooms, hero-flutes ribs, hero-sheen 18s drift), clear area behind the H1, ribs fade out
   before the category grid. */
html body .mk-top { position: relative; isolation: isolate; overflow-x: clip; padding-bottom: 40px;
  background: radial-gradient(42% 40% at 18% 14%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%), radial-gradient(36% 30% at 86% 34%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%), var(--p-white); }
html body .mk-top::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(5,5,5,.045) 0 1px, rgba(255,255,255,0) 1px 9px, rgba(255,255,255,.55) 9px 11px, rgba(255,255,255,0) 11px 22px);
  -webkit-mask: radial-gradient(48% 60% at 28% 40%, transparent 30%, #000 85%), linear-gradient(#000 80px, transparent 170px); -webkit-mask-composite: source-in;
  mask: radial-gradient(48% 60% at 28% 40%, transparent 30%, #000 85%), linear-gradient(#000 80px, transparent 170px); mask-composite: intersect; }  /* ribs only behind the title, gone before the links (24 Oct) */
html body .mk-top::after { content: ''; position: absolute; inset: 0 -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 54%), linear-gradient(112deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.3) 62%, rgba(255,255,255,0) 66%);
  -webkit-mask: linear-gradient(#000 60%, transparent 95%); mask: linear-gradient(#000 60%, transparent 95%);
  animation: hero-sheen 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { html body .mk-top::after { animation: none; } }
@media (max-width: 900px) { html body .mk-top::before { opacity: .45; } }
html body .mk-list { padding-top: 16px; }

/* Framer template page (TemplateMarket.astro, 24 Oct 2026), laid out like framer.com/marketplace/templates/<name>:
   name + type line with Preview / Buy, a 4:3 slider of the five listing images with thumbnails, the description beside a
   sticky details card, then similar templates. Tokens only: 4px pictures, 2px controls and chips, 1px lines, no shadows. */
html body .tp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
html body .tp-h1 { margin: 0; font: 600 48px/52px var(--p-font); letter-spacing: -0.04em; color: var(--p-ink); }
html body .tp-kind { display: block; margin-top: 8px; font: 400 18px/28px var(--p-font); letter-spacing: 0; color: var(--p-text-2); }
html body .tp-by { margin: 4px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .tp-btns, html body .tp-side-btns { display: flex; flex-wrap: wrap; gap: 8px; }
html body .tp-gallery { margin-top: 40px; }
html body .tp-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--p-r-card); background: var(--p-sheet); }
html body .tp-track::-webkit-scrollbar { display: none; }
html body .tp-track:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
html body .tp-slide { position: relative; margin: 0; aspect-ratio: 4 / 3; scroll-snap-align: start; }
html body .tp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .tp-gallery .tp-track { position: relative; }
html body .tp-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; max-width: 720px; }
html body .tp-thumbs button { position: relative; padding: 0; border: 0; border-radius: var(--p-r-box); overflow: hidden; aspect-ratio: 4 / 3; background: var(--p-sheet); cursor: pointer; opacity: .55; transition: opacity var(--p-ease); }
html body .tp-thumbs button::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--p-line); border-radius: inherit; }
html body .tp-thumbs button:hover, html body .tp-thumbs button[aria-current="true"] { opacity: 1; }
html body .tp-thumbs button[aria-current="true"]::after { border-color: var(--p-ink); }
html body .tp-thumbs button:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
html body .tp-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body .tp-body { padding-top: 64px; }
html body .tp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
html body .tp-main, html body .tp-side { min-width: 0; }
html body .tp-prose img, html body .tp-prose iframe, html body .tp-prose video { max-width: 100%; height: auto; }
html body .tp-prose table { display: block; max-width: 100%; overflow-x: auto; }
html body .tp-prose { overflow-wrap: anywhere; }
@media (min-width: 1101px) { html body .tp-cols { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; } }
html body .tp-h2 { margin: 0; font: 600 32px/40px var(--p-font); letter-spacing: -0.03em; color: var(--p-ink); }
html body .tp-live { margin: 8px 0 0; font: 500 16px/24px var(--p-font); }
html body .tp-live a { color: var(--p-ink); }
html body .tp-prose { margin-top: 32px; }
html body .tp-prose .p-store-block:first-child p { color: var(--p-ink); font-weight: 500; }
html body .tp-side { display: grid; gap: 16px; }
@media (min-width: 1101px) { html body .tp-side { position: sticky; top: 96px; } }
html body .tp-card { padding: 24px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
html body .tp-maker { margin: 0 0 16px; }
html body .tp-maker img { display: block; width: 104px; height: auto; }
html body .tp-facts { margin: 0; border-top: 1px solid var(--p-line); }
html body .tp-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--p-line); font: 400 14px/20px var(--p-font); }
html body .tp-facts dt { color: var(--p-text-2); }
html body .tp-facts dd { margin: 0; color: var(--p-ink); text-align: right; }
html body .tp-side-btns { display: grid; margin-top: 24px; }
html body .tp-side-btns .btn { justify-content: center; }
html body .tp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
html body .tp-tags-t { margin: 0; font: 500 14px/20px var(--p-font); color: var(--p-ink); }
html body .tp-tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .tp-tags li > * { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 500 12px/1 var(--p-font); letter-spacing: .06em; text-transform: uppercase; color: var(--p-ink); text-decoration: none; transition: background-color var(--p-ease); }
html body .tp-tags li a:hover { background: var(--p-sheet-hover); }
html body .tp-more { padding-top: 96px; }
html body .tp-h3 { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
@media (max-width: 760px) { html body .tp-h1 { font-size: 40px; line-height: 44px; } html body .tp-btns { width: 100%; } html body .tp-btns .btn { flex: 1; justify-content: center; } html body .tp-thumbs { gap: 4px; } }

/* Template page buttons (24 Oct, Erfan: "the button looks too big… hover is not as our rules"): small control (control-s 40px,
   16px label, 16px sides) and our hover: the dark Buy button keeps its ink fill (site.css turns .btn-dark:hover orange-red),
   only the arrow swaps; the subtle Preview button steps subtle → subtle-hover */
html body :is(.tp-btns, .tp-side-btns) .btn { min-height: 40px; height: 40px; padding: 0 16px; font: 500 16px/1 var(--p-font); }
html body :is(.tp-btns, .tp-side-btns) .btn-dark:is(:hover, :focus-visible) { background: var(--p-ink); color: var(--p-white); }
html body :is(.tp-btns, .tp-side-btns) .btn-subtle:is(:hover, :focus-visible) { background: var(--p-subtle-hover); color: var(--p-ink); }
html body :is(.tp-btns, .tp-side-btns) .btn:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }

/* Open-category chip in the toolbar (24 Oct): replaces the "All Framer templates" line above the H1 so nothing jumps */
html body .mk-left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
html body .mk-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--p-r-box); background: var(--p-sheet); color: var(--p-ink); font: 500 14px/20px var(--p-font); text-decoration: none; transition: background-color var(--p-ease); }
html body .mk-chip:hover { background: var(--p-sheet-hover); }
html body .mk-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
html body .mk-chip:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
@media (max-width: 760px) { html body .mk-left { width: 100%; } }

/* Industry pages v3 (24 Oct 2026, after DesignMe /industries/b2b-saas, rebuilt in our system). Fact tiles under the "in short" card,
   and the tickable self-check on a sage tint band. Cards 4px, boxes 2px, hairlines only, no shadows (tokens.json v5). */
html body .p-ifacts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 761px) { html body .p-ifacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { html body .p-ifacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .p-ifacts > div { padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .p-ifacts .p-ico { margin-bottom: 24px; }
html body .p-ifacts .p-meta { margin-bottom: 8px; }
html body .p-ifacts .p-fact-q { margin: 0 0 8px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }  /* 14 Nov: question labels, sentence case */
html body .p-ifacts .p-fact-v { margin: 0; font: 500 16px/24px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
html body .p-ifacts .p-fact-v a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
html body .p-ifacts .p-fact-v a:hover { color: var(--p-accent-deep); }

html body .p-qc-band { margin-top: var(--p-sec); padding: var(--p-sec) 0; }
html body .p-qc { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1101px) { html body .p-qc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; align-items: start; } html body .p-qc-side { position: sticky; top: 128px; } }
html body .p-qc .p-head { margin-bottom: 40px; }
html body .p-qc-card { padding: 32px; border-radius: var(--p-r-card); background: var(--p-white); }
html body .p-qc-score { margin: 0 0 16px; font: 600 40px/44px var(--p-font); letter-spacing: -0.03em; color: var(--p-ink); }
html body .p-qc-score b { font-weight: 600; }
html body .p-qc-label { margin: 0 0 8px; font: 600 20px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }
html body .p-qc-text { margin: 0 0 24px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
html body .p-qc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--t-fg) 20%, transparent); }
html body .p-qc-list li { position: relative; border-bottom: 1px solid color-mix(in srgb, var(--t-fg) 20%, transparent); }
html body .p-qc-list label { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 24px 0; cursor: pointer; font: 500 18px/28px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
@media (max-width: 760px) { html body .p-qc-list label { font-size: 16px; line-height: 24px; } }
html body .p-qc-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html body .p-qc-box { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-ink); transition: background var(--p-ease); }
html body .p-qc-box svg { width: 16px; height: 16px; fill: none; stroke: var(--p-accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--p-ease); }
html body .p-qc-list input:checked + .p-qc-box svg { opacity: 1; }
html body .p-qc-list input:focus-visible + .p-qc-box { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }

/* Case study v2 (24 Oct 2026, Erfan: "very big and very in-depth", DesignMe + Musemind + Design Monks in our system). Tokens only:
   radius 4 (cards) / 2 (rest), type sizes from tokens.json, tints from the site tint classes. */
html body .cw-top { padding-bottom: 64px; }
html body .cw-kicker { margin: 40px 0 16px; }
html body .cw-h1 { max-width: 960px; }
html body .cw-sub { max-width: 800px; margin-top: 24px; }
.cw-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.cw-tags li { padding: 4px 12px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 500 14px/24px var(--p-font); color: var(--p-ink); }
html body .cw-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; }
.cw-stats { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .cw-stats { grid-template-columns: repeat(3, 1fr); } }
.cw-stats li { padding: 32px; border-radius: var(--p-r-card); }
.cw-stats b { display: block; font: 600 40px/48px var(--p-font); letter-spacing: -0.03em; color: var(--t-fg); }
.cw-stats span { display: block; margin-top: 8px; font: 400 16px/24px var(--p-font); color: var(--t-fg); text-wrap: pretty; }
.cw-stats-out { margin-top: 0; }
@media (min-width: 1101px) { .cw-stats-out { grid-template-columns: repeat(4, 1fr); } }
.cw-film-sec { padding-bottom: var(--p-sec); }
.cw-film-sec:has(+ .p-sec) { padding-bottom: 0; }  /* 14 Nov (Erfan: "why such a gap"): .p-sec already has the section gap on top; 192px → 96 */
.cw-film { position: relative; width: 100%; margin: 0; border-radius: var(--p-r-card); overflow: hidden; background: var(--tint, #0B0B0B); aspect-ratio: 1200 / 980; cursor: pointer; }
.cw-film > img, .cw-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cw-film video { opacity: 0; transition: opacity .3s; }
.cw-film.is-playing video { opacity: 1; }
.cw-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--p-white); color: var(--p-ink); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cw-play svg { width: 24px; height: 24px; fill: currentColor; }
.cw-film.is-playing .cw-play { opacity: 0; transition: opacity .3s; }
.cw-film.is-playing:hover .cw-play, .cw-play:focus-visible { opacity: 1; }
.cw-facts { margin-top: 24px; }
@media (min-width: 1101px) { .cw-facts { grid-template-columns: repeat(var(--n, 4), 1fr); } }
.cw-needs { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cw-needs li { display: grid; grid-template-columns: 1fr; border-radius: var(--p-r-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--p-line); }
@media (min-width: 761px) { .cw-needs li { grid-template-columns: 1fr 1fr; } }
.cw-need-q { padding: 32px; background: var(--p-sheet); }
.cw-need-a { padding: 32px; background: var(--p-white); }
.cw-need-q .p-t20, .cw-need-a .p-body { margin: 8px 0 0; }
.cw-gal { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 761px) { .cw-gal { grid-template-columns: repeat(2, 1fr); } }
.cw-gal figure { margin: 0; }
.cw-gal figcaption { padding: 12px 16px; background: var(--p-white); }
.cw-gal-phone { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.cw-gal-phone figure { width: calc(50% - 12px); }
@media (min-width: 761px) { .cw-gal-phone figure { width: calc(25% - 18px); } }
.cw-gal-phone .p-shot-phone { max-width: none; }
.cw-note { max-width: 800px; margin: 24px auto 0; text-align: center; }
.cw-deliv { margin-top: 64px; }
.cw-checks { margin-top: 24px; }
.cw-svc { display: flex; justify-content: center; margin-top: 0; padding-bottom: var(--p-sec); }
.cw-hq { max-width: 800px; margin: 40px 0 0; padding: 24px 32px; border-radius: var(--p-r-card); background: var(--p-sheet); }
.cw-hq blockquote { margin: 0; font: 500 20px/28px var(--p-font); color: var(--p-ink); }
.cw-hq figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.cw-hq figcaption b { font-weight: 600; color: var(--p-ink); }
.cw-hq .p-link { margin-left: auto; }
@media (max-width: 1100px) { .cw-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 761px) { .cw-gal:not(.cw-gal-phone) > figure:only-child { grid-column: 1 / -1; max-width: 800px; width: 100%; justify-self: center; } .cw-gal:not(.cw-gal-phone) > figure:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; max-width: 800px; justify-self: center; } }

/* ===== /pricing v3 (PriceCards.astro, 14 Nov 2026 night; behaviour from designme.agency/pricing): centred hero, a two-tab
   switch, plan rows left (chosen row = ink) + one offer card, one detail panel right; then the ink 3-step band. */
html body .p-hero-center .p-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
html body .p-hero-center .p-crumbs ol { justify-content: center; }
html body .p-hero-center .p-plain-h1 { max-width: 18ch; }
html body .p-hero-center .p-plain-sub { margin-inline: auto; }
/* 14 Nov (Erfan): pricing hero H1 on 2 lines and the subline on 1, so the prices sit higher (pricing is the only centred hero) */
html body .p-hero-plain.p-hero-center .p-plain-h1 { max-width: 880px; }
html body .p-hero-plain.p-hero-center .p-plain-sub { max-width: 760px; }
html body .p-hero-center .p-cta { justify-content: center; }
html body .p-hero-eye { margin: 0 0 16px; font: 500 12px/16px var(--p-font); letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); }
html body .prc-sec { position: relative; z-index: 1; padding: 0 0 var(--p-sec); }
html body .p-hero-plain + .prc-sec { margin-top: calc(48px - var(--p-sec)); }  /* 14 Nov (Erfan): 48px from the subline to the tabs, pricing higher (was 96px) */
.prc-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 48px; padding: 4px; border-radius: var(--p-r-card); background: var(--p-sheet); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .prc-switch button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: var(--p-r-box); cursor: pointer; font: 500 15px/20px var(--p-font); color: var(--p-mute); transition: background var(--p-ease), color var(--p-ease); }
html body .prc-switch button[aria-selected="true"] { background: var(--p-white); color: var(--p-ink); box-shadow: 0 1px 2px rgba(5,5,5,.06), inset 0 0 0 1px var(--p-line); }
html body .prc-switch button:focus-visible, html body .prc-row:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.prc-tag { padding: 2px 8px; border-radius: var(--p-r-card); background: #FFEDE6; color: #A42600; font: 500 12px/16px var(--p-font); }   /* tokens tag-pop-bg / tag-pop-text */
.prc-pick { display: grid; gap: 24px; }
.prc-pick[hidden], .prc-panel[hidden] { display: none; }
html body .prc-label { margin: 0 0 12px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.prc-rows { display: grid; gap: 8px; }  /* 14 Nov (Erfan): each plan is its own bordered card, so the unselected ones read as clickable */
html body .prc-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); transition: background var(--p-ease), box-shadow var(--p-ease); }
html body .prc-row:hover { background: var(--p-sheet); box-shadow: inset 0 0 0 1px var(--p-link-d); }
html body .prc-row[aria-selected="true"] { background: var(--p-subtle); box-shadow: inset 0 0 0 1px var(--p-ink); }  /* selected: light grey, not ink (Erfan 14 Nov) */
.prc-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--p-r-box); box-shadow: inset 0 0 0 1px var(--p-line); color: var(--p-ink); }
.prc-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prc-rname { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.prc-rprice { font: 500 15px/20px var(--p-font); color: var(--p-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .prc-row[aria-selected="true"] .prc-rname { color: var(--p-ink); }
html body .prc-row[aria-selected="true"] .prc-rprice { color: var(--p-ink); }
html body .prc-row[aria-selected="true"] .prc-ico { background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); color: var(--p-ink); }
.prc-offer { position: relative; display: grid; gap: 6px; margin-top: 24px; padding: 28px; border-radius: var(--p-r-card); background: radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--p-accent) 55%, transparent), transparent 70%), var(--p-ink); color: var(--p-white); text-decoration: none; overflow: hidden; }
.prc-offer-k { justify-self: start; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--p-r-card); background: var(--p-white); color: var(--p-ink); font: 500 12px/16px var(--p-font); }
.prc-offer-t { font: 600 22px/30px var(--p-font); letter-spacing: -0.02em; }
.prc-offer-l { font: 400 15px/22px var(--p-font); color: var(--p-link-d); }
.prc-offer-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 12px; font: 500 15px/22px var(--p-font); }
.prc-offer-go .arr-swap, .prc-offer-go .arr { width: 16px; height: 16px; } .prc-offer-go .arr { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* 14 Nov: the whole card is the link, so its label takes the site underline wipe + arrow swap when the card is hovered */
html:not(#ul) body .prc-offer:is(:hover, :focus-visible) .prc-offer-go > .ul { animation: ul-swap .6s cubic-bezier(.16, 1, .3, 1); }
html:not(#ul) body .prc-offer:is(:hover, :focus-visible) .prc-offer-go .arr-swap .arr:first-child { transform: translateX(120%); opacity: 0; }
html:not(#ul) body .prc-offer:is(:hover, :focus-visible) .prc-offer-go .arr-swap .arr + .arr { transform: none; opacity: 1; transition-delay: .06s; }
@media (prefers-reduced-motion: reduce) { html:not(#ul) body .prc-offer:hover .prc-offer-go > .ul { animation: none; } }
.prc-offer:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.prc-panel { padding: 32px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .prc-name { margin: 0; font: 600 28px/36px var(--p-font); letter-spacing: -0.03em; color: var(--p-ink); }
html body .prc-for { margin: 8px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
html body .prc-cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.prc-pre { font: 500 16px/24px var(--p-font); color: var(--p-mute); }
.prc-amt { font: 600 56px/56px var(--p-font); letter-spacing: -0.05em; color: var(--p-ink); font-variant-numeric: tabular-nums; }
html body .prc-bill { margin: 8px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
html body .prc-panel .prc-cta { width: 100%; justify-content: center; margin-top: 24px; }
.prc-list { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--p-line); }
.prc-list ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.prc-list li { display: flex; gap: 12px; padding: 12px 0; }
.prc-list li + li { border-top: 1px solid var(--p-line); }
.prc-list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prc-list li span { display: grid; gap: 2px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.prc-list li b { font: 600 15px/22px var(--p-font); color: var(--p-ink); }

.prc-how { padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
.prc-how-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 48px; }
html body .prc-how .p-h2 { color: var(--p-white); }
html body .prc-intro { margin: 0; font: 400 18px/28px var(--p-font); color: var(--p-link-d); }
.prc-how-list { position: relative; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.prc-how-list li { position: relative; padding: 28px; border-radius: var(--p-r-card); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
.prc-how-top { display: flex; align-items: center; justify-content: space-between; }
.prc-how-n { font: 600 48px/48px var(--p-font); letter-spacing: -0.04em; color: var(--p-accent); font-variant-numeric: tabular-nums; }
.prc-how-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p-white); color: var(--p-ink); }
.prc-how-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body .prc-how-when { margin: 28px 0 0; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-link-d); }
html body .prc-how-list h3 { margin: 8px 0 0; font: 600 22px/30px var(--p-font); letter-spacing: -0.02em; color: var(--p-white); }
html body .prc-how-l { margin: 8px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
html body .prc-note { margin: 32px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-link-d); }
html body .prc-how .prc-note .p-ul, html body .prc-how .prc-note .p-ul .ul { color: var(--p-white); }

@media (min-width: 761px) {
  .prc-how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prc-how-list li:not(:last-child)::after { content: ''; position: absolute; top: 52px; right: -16px; width: 16px; height: 2px; background: var(--p-accent); }
}
@media (min-width: 1101px) {
  .prc-pick { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
  .prc-left { position: sticky; top: 104px; }
  .prc-how-list { gap: 24px; }
  .prc-how-list li:not(:last-child)::after { right: -24px; width: 24px; }
}
@media (max-width: 1100px) { .prc-left { display: contents; } .prc-pick > * , .prc-left > * { min-width: 0; } .prc-left > .prc-label { order: 0; margin-bottom: -12px; } .prc-rows { order: 1; } .prc-right { order: 2; } .prc-offer { order: 3; margin-top: 0; } }
@media (max-width: 760px) { .prc-panel { padding: 24px; } .prc-amt { font-size: 44px; line-height: 48px; } .prc-switch { width: 100%; } html body .prc-switch button { flex: 1; justify-content: center; padding: 0 10px; font-size: 14px; } .prc-switch .prc-tag { display: none; } }
/* Blog, 14 Nov 2026 (Erfan: hero pattern + padding missing; no card hover, the image should zoom in; more space between the
   date line and the title; "Keep reading" → related). Hero = .p-dk.p-lt band; H1 → subline = 32 / 16 under 760 like the service top. */
html body .bl-sub { margin-top: 32px; }
@media (max-width: 760px) { html body .bl-sub { margin-top: 16px; } }
.bl-card { position: relative; }
.bl-card .p-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--p-r-card); }  /* the whole card opens the post */
.bl-card .p-card-pic img { transition: transform .6s cubic-bezier(.25, 1, .5, 1); }
.bl-card:hover .p-card-pic img, .bl-card:focus-within .p-card-pic img { transform: scale(1.05); }
.bl-card .p-link:focus-visible { outline: none; }
.bl-card:has(.p-link:focus-visible) { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bl-card .p-card-pic img { transition: none; } .bl-card:hover .p-card-pic img { transform: none; } }
html body .p-post-head .p-post-meta { margin-top: 24px; }
@media (min-width: 761px) { html body .p-post-head .p-post-meta { margin-top: 32px; } }
html body .bl-list { padding-top: 0; }  /* the band's own bottom padding is the one gap above the cards (192px → 96 at 1024) */

/* ---------- Template page v2 (14 Nov 2026, Framer's Nov 2026 template page): TemplateMarket.astro ---------- */
html body .tp-top .p-crumbs { margin-bottom: 24px; }
html body .tp-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .tp-meta li { display: inline-flex; align-items: center; gap: 8px; }
html body .tp-meta li + li::before { content: ''; width: 3px; height: 3px; margin-right: 12px; border-radius: 50%; background: var(--p-link-d); }
html body .tp-meta img { width: 16px; height: 16px; }
html body .tp-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--p-line); text-underline-offset: 3px; transition: color var(--p-ease), text-decoration-color var(--p-ease); }
html body .tp-meta a:hover { color: var(--p-ink); text-decoration-color: currentColor; }
/* Gallery: big picture left, thumbnail column right on desktop (as on Framer); thumbnails under it below 1101px */
@media (min-width: 1101px) {
  html body .tp-gallery-2 { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 12px; }
  html body .tp-gallery-2 .tp-thumbs-wrap { position: relative; min-height: 0; }
  html body .tp-gallery-2 .tp-thumbs { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; max-width: none; margin: 0; overflow-y: auto; scrollbar-width: none; }
  html body .tp-gallery-2 .tp-thumbs::-webkit-scrollbar { display: none; }
  html body .tp-gallery-2 .tp-thumbs button { flex: none; width: 100%; border-radius: var(--p-r-card); }
}
/* Details card: maker row like Framer's creator row */
html body .tp-maker { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
html body .tp-maker .tp-maker-mark { width: 40px; height: 40px; border-radius: var(--p-r-box); }
html body .tp-maker p { margin: 0; }
html body .tp-maker-name { font: 600 16px/24px var(--p-font); color: var(--p-ink); }
html body .tp-maker-line { font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .tp-plat { display: inline-flex; align-items: center; gap: 8px; }
html body .tp-plat img { width: 14px; height: 14px; }
html body .tp-help { display: grid; gap: 8px; }
html body .tp-help-t { margin: 0; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
html body .tp-help-p { margin: 0 0 8px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
html body .tp-help .btn { justify-content: center; }
html body .tp-more .tp-h3 { margin-bottom: 8px; }
html body .tp-more-2 { padding-top: 64px; }
html body .tp-more-2 .p-in { padding-top: 64px; border-top: 1px solid var(--p-line); }

/* ===== Website example gallery (ExampleGallery.astro, /examples/ai-company-websites, 14 Nov 2026) =====
   A sheet band with the screenshot cards (2 columns from 761px), then an ink band with the shared patterns and audit numbers. */
html body .exg-sec { margin-top: 48px; padding-block: var(--p-sec); background: var(--p-sheet); }
.exg-head { display: grid; gap: 24px; margin-bottom: 40px; }
html body .exg-intro { margin: 12px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-mute); }
.exg-chips { display: flex; flex-wrap: wrap; gap: 8px; align-self: end; }
html body .exg-chips button { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--p-r-card); border: 1px solid var(--p-line); background: var(--p-white); cursor: pointer; font: 500 14px/20px var(--p-font); color: var(--p-ink); transition: background var(--p-ease), color var(--p-ease), border-color var(--p-ease); }
html body .exg-chips button span { color: var(--p-mute); font-variant-numeric: tabular-nums; }
html body .exg-chips button:hover { border-color: var(--p-ink); }
html body .exg-chips button[aria-pressed="true"] { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-white); }
html body .exg-chips button[aria-pressed="true"] span { color: var(--p-link-d); }
html body .exg-chips button:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.exg-grid { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.exg-card { display: flex; flex-direction: column; border-radius: var(--p-r-card); background: var(--p-white); overflow: hidden; box-shadow: 0 0 0 1px var(--p-line); }
.exg-card[hidden] { display: none; }
.exg-shot { display: block; padding: 16px 16px 0; background: var(--p-subtle); }
.exg-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px 6px 0 0; background: var(--p-white); box-shadow: inset 0 -1px 0 var(--p-line); }
.exg-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-line); }
.exg-bar span { margin-left: 8px; font: 400 12px/16px var(--p-font); color: var(--p-mute); }
.exg-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform var(--p-ease); }
.exg-card:hover .exg-shot img { transform: translateY(-4px); }
.exg-body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.exg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.exg-n { font: 600 14px/20px var(--p-font); color: var(--p-accent-deep); font-variant-numeric: tabular-nums; }
.exg-built { padding: 4px 10px; border-radius: var(--p-r-card); background: var(--p-subtle); font: 500 12px/16px var(--p-font); color: var(--p-ink); }
html body .exg-name { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
html body .exg-quote { margin: 8px 0 0; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-wrap: balance; }
.exg-pts { display: grid; gap: 8px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--p-line); list-style: none; }
html body .exg-pts li { display: flex; gap: 8px; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
.exg-pts svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .exg-visit { align-self: flex-start; margin-top: auto; padding-top: 20px; font: 500 14px/20px var(--p-font); }
html body .exg-src { margin: 24px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-mute); }

.exg-band { padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
html body .exg-band .p-h2 { color: var(--p-white); }
.exg-band-grid { display: grid; gap: 48px; }
.exg-common { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.exg-common li { display: flex; gap: 16px; font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
.exg-common b { font-weight: 600; color: var(--p-white); }
.exg-cn { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--p-accent); color: var(--p-white); font: 600 13px/1 var(--p-font); }
.exg-stats { display: grid; gap: 0; align-content: start; padding: 32px; border-radius: var(--p-r-card); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
html body .exg-stats-t { margin: 0 0 8px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-link-d); }
.exg-stat { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--p-line-dark); }
.exg-stat b { font: 600 48px/52px var(--p-font); letter-spacing: -0.04em; color: var(--p-white); font-variant-numeric: tabular-nums; }
.exg-stat b::after { content: ' / 114'; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--p-link-d); }
.exg-stat span { font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
html body .exg-stats-src { margin: 20px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-link-d); }
html body .exg-band .p-ul, html body .exg-band .p-ul .ul { color: var(--p-white); }
html body .exg-how { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--p-line-dark); font: 400 14px/20px var(--p-font); color: var(--p-link-d); max-width: 760px; }
html body .exg-how b { font-weight: 600; color: var(--p-white); }
@media (min-width: 761px) {
  .exg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exg-shot { padding: 24px 24px 0; }
  .exg-body { padding: 28px 32px 32px; }
}
@media (min-width: 1101px) {
  .exg-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .exg-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
}
@media (max-width: 760px) { .exg-stat { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Store page v2 (14 Nov 2026, Framer's Nov 2026 marketplace): StoreMarket.astro ---------- */
/* Title + intro left, a link card right (where Framer shows "Agent Templates"); stacks under 1101px */
html body .mk-intro { display: grid; gap: 24px; }
@media (min-width: 1101px) { html body .mk-intro { grid-template-columns: minmax(0, 1fr) 400px; align-items: end; gap: 48px; } }
html body .mk-promo { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); color: var(--p-ink); text-decoration: none; transition: box-shadow var(--p-ease), background-color var(--p-ease); }
html body .mk-promo:hover { box-shadow: inset 0 0 0 1px var(--p-ink); }
html body .mk-promo:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
html body .mk-promo img { flex: none; width: 96px; height: 72px; border-radius: var(--p-r-box); object-fit: cover; object-position: center; background: var(--p-sheet); }
html body .mk-promo-txt { display: grid; gap: 4px; min-width: 0; }
html body .mk-promo-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 14px/20px var(--p-font); }
html body .mk-promo-tag { padding: 2px 6px; border-radius: var(--p-r-box); background: #FFEDE6; color: #A42600; font: 500 12px/16px var(--p-font); letter-spacing: .06em; text-transform: uppercase; }
html body .mk-promo-p { font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
/* Case results, 14 Nov 2026 (Erfan: show what each client gained; research/case-outcomes-2026-11-14/). Before/after table: 1px line
   ring, 4px corners, sheet header; After column in ink 600 with a sage delta chip. Source line under every tile (Bop Design pattern).
   Phone: each row stacks, metric on top, Before and After side by side. Tokens only. */
.cw-src { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--t-fg, var(--p-ink)) 18%, transparent);
  font: 400 13px/20px var(--p-font); color: var(--t-fg, var(--p-text-2)); opacity: .85; text-wrap: pretty; }
.cw-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cw-cmp-wrap { border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); overflow: hidden; }
.cw-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cw-cmp th, .cw-cmp td { padding: 20px 24px; text-align: left; vertical-align: top; }
.cw-cmp thead th { background: var(--p-sheet); font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.cw-cmp thead th:first-child { width: 40%; font-weight: 500; color: var(--p-text-2); }
.cw-cmp thead small, .cw-cmp tbody th small { display: block; margin-top: 4px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.cw-cmp tbody tr { border-top: 1px solid var(--p-line); }
.cw-cmp tbody th { font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.cw-cmp-b { font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.cw-cmp-a { font: 600 18px/24px var(--p-font); color: var(--p-ink); }
.cw-delta { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--p-r-box); background: #E4EEDF; color: #2E5631;
  font: 500 14px/20px var(--p-font); font-style: normal; vertical-align: 1px; white-space: nowrap; }
.cw-cmp a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cw-imp-tiles { margin-top: 24px; }
@media (max-width: 760px) {
  .cw-cmp thead { display: none; }
  .cw-cmp, .cw-cmp tbody, .cw-cmp tr { display: block; }
  .cw-cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: 16px; gap: 8px 16px; }
  .cw-cmp tbody tr:first-child { border-top: 0; }
  .cw-cmp tbody th { grid-column: 1 / -1; padding: 0; }
  .cw-cmp td { padding: 0; }
  .cw-cmp td::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
  .cw-delta { margin: 4px 0 0; }
}
.cw-cmp-key { display: none; }  /* phone only: the column dates, since the table head is hidden there */
@media (max-width: 760px) { .cw-cmp-key { display: grid; gap: 4px; margin: 0 0 16px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); } .cw-cmp-key b { font-weight: 600; color: var(--p-ink); } .cw-cmp-key a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } }

/* ===== B2B website cost guide (CostGuide.astro, /guides/b2b-website-cost, 14 Nov 2026) =====
   Sand band (t-sand #EFEAE3 / #5C4A33) with the price ladder, white comparison table, Reddit bar chart, sheet band with the
   eight driver cards, ink band with the quote checklist. */
html body .cg-ladder-sec { margin-top: 48px; padding-block: var(--p-sec); background: #EFEAE3; }
.cg-short { display: grid; gap: 12px; max-width: 760px; margin-bottom: 48px; }
html body .cg-short .p-meta { color: #5C4A33; }
html body .cg-short-t { margin: 4px 0 0; font: 400 18px/28px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.cg-tiers { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cg-tier { display: flex; flex-direction: column; padding: 28px; border-radius: var(--p-r-card); background: var(--p-white); }
.cg-tier.cg-t4 { background: var(--p-ink); }
.cg-meter { display: flex; gap: 4px; }
.cg-meter i { width: 28px; height: 6px; border-radius: var(--p-r-card); background: var(--p-line); }
.cg-meter i.on { background: var(--p-accent); }
.cg-t4 .cg-meter i { background: var(--p-line-dark); } .cg-t4 .cg-meter i.on { background: var(--p-accent); }
html body .cg-tier-who { margin: 24px 0 0; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
html body .cg-tier-val { margin: 8px 0 0; font: 600 32px/38px var(--p-font); letter-spacing: -0.04em; color: var(--p-ink); font-variant-numeric: tabular-nums; }
html body .cg-tier-note { flex: 1; margin: 12px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
html body .cg-tier-src { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--p-line); font: 500 12px/16px var(--p-font); letter-spacing: .06em; text-transform: uppercase; color: var(--p-mute); }
html body .cg-t4 .cg-tier-who, html body .cg-t4 .cg-tier-val { color: var(--p-white); }
html body .cg-t4 .cg-tier-note, html body .cg-t4 .cg-tier-src { color: var(--p-link-d); }
html body .cg-t4 .cg-tier-src { border-top-color: var(--p-line-dark); }
@media (min-width: 761px) { .cg-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .cg-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body .cg-src { margin: 20px 0 0; font: 400 13px/20px var(--p-font); color: var(--p-mute); }
html body .cg-ladder-sec .cg-src { color: #5C4A33; }

.cg-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 760px; }
html body .cg-intro { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-mute); }
.cg-table-wrap { overflow-x: auto; border: 1px solid var(--p-line); border-radius: var(--p-r-card); }
.cg-table { width: 100%; min-width: 760px; border-collapse: collapse; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
.cg-table th, .cg-table td { padding: 18px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--p-line); }
.cg-table thead th { border-top: 0; background: var(--p-sheet); font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.cg-table tbody th b { display: block; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.cg-table tbody th span { font: 400 13px/20px var(--p-font); color: var(--p-mute); }
.cg-table .cg-from { font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg-table tbody tr:hover { background: var(--p-sheet); }
.cg-table tr.is-us { background: var(--p-ink); }
.cg-table tr.is-us:hover { background: var(--p-ink); }
.cg-table tr.is-us th b, .cg-table tr.is-us .cg-from, html body .cg-table tr.is-us .p-ul, html body .cg-table tr.is-us .p-ul .ul { color: var(--p-white); }
.cg-table tr.is-us th span, .cg-table tr.is-us td { color: var(--p-link-d); }
.cg-table tr.is-us .cg-from { font-size: 16px; }
.cg-model { display: inline-block; padding: 3px 10px; border-radius: var(--p-r-card); font: 500 12px/18px var(--p-font); white-space: nowrap; }
.cg-m-project { background: #EFEAE3; color: #5C4A33; }
.cg-m-fixed { background: #E4EEDF; color: #2E5631; }   /* t-sage */
.cg-m-hourly { background: #FFEDE6; color: #A42600; }  /* tag-pop */
.cg-m-subscription { background: var(--p-subtle); color: var(--p-ink); }
.is-us .cg-m-fixed { background: var(--p-accent); color: var(--p-white); }

.cg-rep { display: grid; gap: 16px; }
.cg-chart { margin: 0; padding: 32px; border: 1px solid var(--p-line); border-radius: var(--p-r-card); }
.cg-chart figcaption { margin-bottom: 24px; font: 600 18px/28px var(--p-font); color: var(--p-ink); }
.cg-bar { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 16px; padding: 10px 0; }
.cg-bar-l { font: 500 15px/22px var(--p-font); color: var(--p-ink); }
.cg-bar-t { height: 32px; border-radius: var(--p-r-box); background: var(--p-sheet); overflow: hidden; }
.cg-bar-t i { display: block; height: 100%; border-radius: var(--p-r-box); background: var(--p-accent); }
.cg-bar:nth-of-type(n+3) .cg-bar-t i { background: color-mix(in srgb, var(--p-accent) 55%, #FFFFFF); }
.cg-bar b { font: 600 20px/28px var(--p-font); color: var(--p-ink); text-align: right; font-variant-numeric: tabular-nums; }
html body .cg-chart-n { margin: 16px 0 0; font: 400 13px/20px var(--p-font); color: var(--p-mute); }
.cg-card-up { display: flex; flex-direction: column; padding: 32px; border-radius: var(--p-r-card); background: #E4EEDF; }
html body .cg-card-up .p-meta { color: #2E5631; }
html body .cg-big { margin: 16px 0 0; font: 600 56px/60px var(--p-font); letter-spacing: -0.04em; color: #2E5631; }
html body .cg-side-t { margin: 12px 0 0; font: 400 16px/24px var(--p-font); color: #2E5631; }

html body .cg-drivers-sec { margin-top: var(--p-sec); padding-block: var(--p-sec); background: var(--p-sheet); }
.cg-drivers { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cg-drivers li { display: flex; flex-direction: column; padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: 0 0 0 1px var(--p-line); }
.cg-dico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--p-r-box); background: var(--p-ink); color: var(--p-white); }
.cg-dico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body .cg-drivers h3 { margin: 20px 0 0; font: 600 18px/26px var(--p-font); color: var(--p-ink); }
html body .cg-drivers p { margin: 8px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
html body .cg-drivers .cg-ask { margin-top: auto; padding-top: 16px; font-size: 14px; line-height: 20px; color: var(--p-mute); }
html body .cg-drivers .cg-ask b { display: block; margin-bottom: 2px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-accent-deep); }
html body .cg-drivers li > p:not(.cg-ask) { flex: 1; margin-bottom: 0; }
html body .cg-drivers li .cg-ask { margin-top: 16px; border-top: 1px solid var(--p-line); }

.cg-quote { padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
html body .cg-quote .p-h2 { color: var(--p-white); }
.cg-quote-grid { display: grid; gap: 40px; }
html body .cg-quote-t { margin: 16px 0 0; font: 400 18px/28px var(--p-font); color: var(--p-link-d); }
.cg-three { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cg-three span { padding: 10px 16px; border-radius: var(--p-r-card); background: var(--p-white); font: 600 15px/20px var(--p-font); color: var(--p-ink); }
.cg-check { padding: 32px; border-radius: var(--p-r-card); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
html body .cg-check-t { margin: 0 0 16px; font: 600 16px/24px var(--p-font); color: var(--p-white); }
.cg-check ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cg-check li { display: flex; gap: 10px; font: 400 16px/24px var(--p-font); color: var(--p-white); }
.cg-check svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .cg-match { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--p-line-dark); font: 400 16px/24px var(--p-font); color: var(--p-link-d); max-width: 860px; }
html body .cg-match .p-ul, html body .cg-match .p-ul .ul { color: var(--p-white); }

@media (min-width: 761px) {
  .cg-drivers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  html body .cg-drivers li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
  html body .cg-drivers li > p:not(.cg-ask) { flex: none; }
  html body .cg-drivers .cg-dico { justify-self: start; }
  .cg-rep { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (min-width: 1101px) {
  .cg-drivers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cg-quote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}
@media (max-width: 760px) { .cg-bar { grid-template-columns: 96px 1fr 40px; gap: 10px; } html body .cg-ladder-sec { padding-block: 56px; } }

/* /work page (14 Nov 2026, research/work-page-study-2026-11-14): "see work like yours" band after the big cases, then compact cards */
.wk-band { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; margin-top: var(--p-sec); padding: 32px; border-radius: var(--p-r-card); background: var(--p-sheet); }
.wk-face { width: 64px; height: 64px; border-radius: 50%; }
html body .wk-band-txt .p-body { margin-top: 8px; }
@media (min-width: 761px) { .wk-band { grid-template-columns: auto 1fr auto; gap: 24px; } }
.wk-more { margin-top: var(--p-sec); }
.wk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.wk-card { display: flex; flex-direction: column; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); overflow: hidden; }
.wk-pic { display: block; aspect-ratio: 16 / 10; background: var(--p-sheet); overflow: hidden; }
.wk-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform var(--p-ease); }
.wk-card:hover .wk-pic img { transform: scale(1.02); }
.wk-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 32px; }
html body .wk-body h3 a { color: inherit; }
html body .wk-body h3 a:hover { color: var(--p-accent-deep); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 0; padding: 0; list-style: none; }
.wk-chips li { padding: 4px 8px; border-radius: var(--p-r-box); background: var(--p-subtle); font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
.wk-quote { margin: 0; padding: 16px; border-radius: var(--p-r-box); background: var(--p-sheet); }
.wk-quote blockquote { margin: 0; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.wk-quote figcaption { margin-top: 8px; font: 400 14px/20px var(--p-font); color: var(--p-text-2); }
.wk-read { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; font: 500 16px/24px var(--p-font); color: var(--p-ink); }  /* underline + wipe from the site-wide a > .ul rule */
.wk-read:focus-visible, html body .wk-body h3 a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
.wk-call { background: var(--p-sheet); box-shadow: none; }
.wk-call .wk-body { justify-content: center; }
.wk-call .btn { align-self: flex-start; }
@media (max-width: 760px) { .wk-band, .wk-body { padding: 24px; } }

/* "More from us" panel (Blocks related), 14 Nov 2026: columns follow the number of link groups (--lc-n from Blocks.astro), so a
   page with only "Learn more" no longer shows two empty columns; a single group splits its links into two columns. */
@media (min-width: 761px) { html body .p-lc-cols { grid-template-columns: repeat(var(--lc-n, 3), minmax(0, 1fr)); } }
@media (min-width: 1101px) { html body .p-lc-cols { grid-template-columns: repeat(var(--lc-n, 3), minmax(0, 1fr)) minmax(0, 1.3fr); } }
html body .p-lc-cols:has(> :nth-child(2):last-child) > div:first-child ul { display: block; columns: 2; column-gap: 32px; }
html body .p-lc-cols:has(> :nth-child(2):last-child) > div:first-child li { break-inside: avoid; margin-bottom: 10px; }
@media (min-width: 1101px) { html body .p-lc-cols:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr); } }

/* ===== Agency guide (AgencyGuide.astro, /guides/how-to-choose-a-web-design-agency, 14 Nov 2026) ===== */
html body .ag-short { margin-top: 48px; padding-block: 80px; }
.ag-short-grid { display: grid; gap: 40px; }
html body .ag-short .p-meta { margin-bottom: 12px; color: var(--t-fg); }
html body .ag-short-t { margin: 20px 0 0; font: 400 18px/28px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
.ag-fork { display: grid; gap: 12px; align-content: center; }
.ag-fork-c { padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); }
.ag-fork-c.is-pick { background: var(--p-ink); }
html body .ag-fork-if { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
html body .ag-fork-then { margin: 8px 0 0; font: 600 22px/30px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
.ag-fork-then span { color: var(--p-accent); }
html body .is-pick .ag-fork-if { color: var(--p-link-d); } html body .is-pick .ag-fork-then { color: var(--p-white); }

.ag-head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 760px; }
html body .ag-intro { margin: 12px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-mute); }
.ag-head .ag-intro { margin: 0; }
.ag-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ag-steps li { display: flex; flex-direction: column; padding: 28px; border-radius: var(--p-r-card); background: var(--p-sheet); }
.ag-sn { font: 600 40px/44px var(--p-font); letter-spacing: -0.04em; color: var(--p-accent); font-variant-numeric: tabular-nums; }
html body .ag-steps h3 { margin: 20px 0 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
html body .ag-steps li > p:not(.ag-out) { flex: 1; margin: 8px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
html body .ag-out { margin: 20px 0 0; padding: 14px 16px; border-radius: var(--p-r-box); background: var(--p-white); font: 400 14px/20px var(--p-font); color: var(--p-ink); }
.ag-out b { display: block; margin-bottom: 2px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }

.ag-q { margin-top: var(--p-sec); padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
html body .ag-q .p-h2 { color: var(--p-white); } html body .ag-q .ag-intro { color: var(--p-link-d); }
.ag-q-head { display: grid; gap: 24px; margin-bottom: 40px; }
html body .ag-copy { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; justify-self: start; align-self: end; min-height: 48px; padding: 0 20px; border-radius: var(--r-s, 8px); background: var(--p-white); color: var(--p-ink); cursor: pointer; font: 500 16px/24px var(--p-font); transition: background var(--p-ease); }
html body .ag-copy:hover { background: var(--p-subtle); }
html body .ag-copy:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.ag-copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag-qs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.ag-qs li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: var(--p-r-card); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); font: 500 17px/26px var(--p-font); color: var(--p-white); }
.ag-qn { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--p-accent); font: 600 13px/1 var(--p-font); color: var(--p-white); }

html body .ag-flags { padding-block: var(--p-sec); }
html body .ag-flags .ag-intro, html body .ag-flags .ag-src { color: var(--t-fg); }
.ag-flag-grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ag-flag-grid li { display: flex; flex-direction: column; padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); }
html body .ag-flag { display: flex; gap: 10px; margin: 0; font: 600 18px/26px var(--p-font); color: var(--p-ink); }
.ag-flag svg { width: 20px; height: 20px; flex: none; margin-top: 3px; fill: #FCE6DC; stroke: #A42600; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
html body .ag-why { flex: 1; margin: 8px 0 0 30px; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
html body .ag-instead { display: flex; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: var(--p-r-box); background: #E4EEDF; font: 400 15px/22px var(--p-font); color: #2E5631; }
.ag-instead b { font-weight: 600; }
.ag-instead svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: #2E5631; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .ag-src { margin: 24px 0 0; font: 400 13px/20px var(--p-font); }

.ag-check { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ag-check li { padding: 28px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); }
.ag-cico, .ag-oico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--p-r-box); }
.ag-cico { background: #E0E8F4; color: #23426B; }   /* t-blue */
.ag-cico svg, .ag-oico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body .ag-check h3 { margin: 20px 0 0; font: 600 18px/26px var(--p-font); color: var(--p-ink); }
html body .ag-check p { margin: 8px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }

.ag-ours { display: grid; gap: 40px; }
.ag-ours-pic { margin: 0; align-self: start; }
.ag-ours-pic img { display: block; width: 100%; height: auto; border-radius: var(--p-r-card); }
.ag-ours-pic figcaption { display: grid; margin-top: 12px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.ag-ours-pic b { font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.ag-ours-list { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; }
.ag-ours-list li { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--p-line); }
.ag-oico { flex: none; background: var(--p-ink); color: var(--p-white); }
html body .ag-ours-list h3 { margin: 0; font: 600 18px/26px var(--p-font); color: var(--p-ink); }
html body .ag-ours-list p { margin: 4px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }

@media (min-width: 761px) {
  .ag-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-qs, .ag-flag-grid, .ag-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-q-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 1101px) {
  .ag-short-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .ag-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-check { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ag-ours { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .ag-ours-pic { position: sticky; top: 104px; }
}
@media (max-width: 760px) { html body .ag-short { padding-block: 56px; } .ag-ours-pic { max-width: 320px; } }

/* ===== About page (AboutPage.astro, /about, 14 Nov 2026) =====
   Sand fact band, story beside Erfan's portrait, ink timeline (Pentaclay accent / Erfan white), service cards + a moving strip
   of our own template designs, tinted culture cards. */
.ab-facts { padding-block: 40px; }
.ab-facts-grid { display: grid; gap: 24px; margin: 0; }
.ab-facts-grid div { display: grid; gap: 4px; }
.ab-facts-grid dt { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--t-fg); }
.ab-facts-grid dd { margin: 0; font: 600 18px/26px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }

.ab-story { display: grid; gap: 40px; }
.ab-story-pic { margin: 0; align-self: start; }
.ab-story-pic img { display: block; width: 100%; height: auto; border-radius: var(--p-r-card); }
.ab-story-pic figcaption { display: grid; margin-top: 12px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
.ab-story-pic b { font: 600 16px/24px var(--p-font); color: var(--p-ink); }
html body .ab-story-copy .p-meta { margin-bottom: 12px; }
html body .ab-story-copy > p:not(.p-meta) { margin: 20px 0 0; font: 400 18px/30px var(--p-font); color: var(--p-text-2); text-wrap: pretty; max-width: 680px; }
html body .ab-story-copy > p:nth-of-type(2) { font-size: 20px; line-height: 32px; color: var(--p-ink); }
.ab-sign { display: block; width: 180px; height: auto; margin-top: 32px; }

.ab-tl { margin-top: var(--p-sec); padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
html body .ab-tl .p-h2 { color: var(--p-white); }
.ab-tl-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.ab-tl-key { display: flex; gap: 8px; margin: 0; }
.ab-k { display: inline-block; padding: 3px 10px; border-radius: var(--p-r-card); font: 500 12px/18px var(--p-font); }
.ab-k-p { background: var(--p-accent); color: var(--p-white); }
.ab-k-e { background: var(--p-white); color: var(--p-ink); }
.ab-tl-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ab-tl-list li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; padding-bottom: 32px; }
.ab-tl-list li::before { content: ''; position: absolute; left: 11px; top: 16px; bottom: -4px; width: 2px; background: var(--p-line-dark); }
.ab-tl-list li:last-child::before { display: none; }
.ab-when { grid-column: 2; font: 600 14px/20px var(--p-font); color: var(--p-link-d); font-variant-numeric: tabular-nums; }
.ab-dot { grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1; width: 24px; height: 24px; margin-top: -2px; border-radius: 50%; background: var(--p-ink); box-shadow: inset 0 0 0 2px var(--p-white); }
.is-p .ab-dot { box-shadow: inset 0 0 0 6px var(--p-accent); }
.ab-tl-list li > div { grid-column: 2; margin-top: 8px; padding: 20px 24px; border-radius: var(--p-r-card); background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
html body .ab-tl-list h3 { margin: 10px 0 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-white); }
html body .ab-tl-list p { margin: 6px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-link-d); }

.ab-head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 760px; }
html body .ab-intro { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-mute); }
.ab-svc { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-svc a { display: grid; gap: 6px; height: 100%; padding: 24px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); text-decoration: none; transition: background var(--p-ease); }
.ab-svc a:hover { background: var(--p-sheet); }
.ab-svc a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.ab-svc-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: var(--p-r-box); background: var(--p-ink); color: var(--p-white); }
.ab-svc-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-svc b { font: 600 18px/26px var(--p-font); color: var(--p-ink); }
.ab-svc span:last-child { font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
.ab-tpl { display: grid; gap: 24px; margin-top: 16px; padding: 32px; border-radius: var(--p-r-card); background: var(--p-sheet); overflow: hidden; }
html body .ab-tpl h3 { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.025em; color: var(--p-ink); }
html body .ab-tpl-copy p { margin: 8px 0 16px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.ab-tpl-strip { overflow: hidden; margin-inline: -32px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ab-tpl-row { display: flex; gap: 16px; width: max-content; animation: ab-slide 60s linear infinite; }
.ab-tpl-row img { display: block; width: 280px; height: auto; border-radius: var(--p-r-box); box-shadow: 0 0 0 1px var(--p-line); }
@keyframes ab-slide { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .ab-tpl-row { animation: none; } }

.ab-cul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-cul li { display: flex; flex-direction: column; padding: 28px; border-radius: var(--p-r-card); }
.ab-cico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--p-r-box); background: var(--p-white); color: var(--t-fg); }
.ab-cico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html body .ab-cul h3 { margin: 20px 0 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
html body .ab-cul p { margin: 8px 0 0; font: 400 15px/22px var(--p-font); color: var(--p-text-2); }
html body .ab-cul .ab-from { margin-top: auto; padding-top: 16px; font: 500 12px/16px var(--p-font); letter-spacing: .06em; text-transform: uppercase; color: var(--t-fg); }

@media (min-width: 761px) {
  .ab-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-svc, .ab-cul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-tl-list li { grid-template-columns: 120px 24px minmax(0, 1fr); }
  .ab-tl-list li::before { left: 147px; }
  .ab-when { grid-column: 1; grid-row: 1; padding-top: 0; text-align: right; }
  .ab-dot { grid-column: 2; grid-row: 1; }
  .ab-tl-list li > div { grid-column: 3; grid-row: 1; margin-top: -8px; }
}
@media (min-width: 1101px) {
  .ab-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .ab-story { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; }
  .ab-story-pic { position: sticky; top: 104px; }
  .ab-svc, .ab-cul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-tpl { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
  .ab-tpl-strip { margin-inline: 0 -32px; }
  .ab-tl .p-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  .ab-tl-head { position: sticky; top: 120px; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 0; }
}
@media (max-width: 760px) { .ab-story-pic { max-width: 320px; } .ab-tpl { padding: 24px; } .ab-tpl-strip { margin-inline: -24px; } }
/* Case study v3, 14 Nov 2026 (Erfan: "designme.agency/projects/hint … copy it exactly", in our design system). Overview with result
   tiles and a client · CTA · year bar; numbered chapters (label + rule left, story right, 1:2); full-width framed screens with an
   uppercase caption; the bar docks at the bottom while reading. Tokens only (ink, sheet, line, 4px cards, 8-step spacing). */
html body .cs3-eyebrow { margin: 32px 0 16px; }
html body .cs3-h1 { max-width: 960px; }
html body .cs3-sub { max-width: 720px; margin-top: 24px; }
html body .cs3-stats { margin-top: 48px; }
.cs3-did { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--p-line); }
.cs3-did ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.cs3-did li { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.cs3-did svg { width: 16px; height: 16px; fill: none; stroke: var(--p-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs3-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--p-line); }
.cs3-bar-k { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.cs3-bar-k i { flex: none; width: 40px; height: 1px; background: var(--p-line); }
.cs3-bar-k b { font: 500 16px/24px var(--p-font); color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs3-bar-y { justify-content: flex-end; }
.cs3-bar-cta { display: flex; align-items: center; gap: 24px; }
@media (max-width: 760px) {
  .cs3-bar { grid-template-columns: 1fr 1fr; }
  .cs3-bar-cta { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
}
.cs3-film-sec { padding-top: 0; }
.cs3-ch { padding-top: var(--p-sec); }
.cs3-ch-in { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 761px) { .cs3-ch-in { grid-template-columns: 1fr 2fr; gap: 32px; } }
@media (min-width: 1101px) { .cs3-ch-in { gap: 64px; } }
.cs3-ix-line { display: flex; align-items: baseline; gap: 12px; }
.cs3-num { font: 500 14px/20px var(--p-font); color: var(--p-mute); font-variant-numeric: tabular-nums; }
html body .cs3-label { margin: 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); text-wrap: balance; }
@media (min-width: 761px) { html body .cs3-label { font-size: 24px; line-height: 32px; } }
.cs3-rule { display: block; width: 40px; height: 2px; margin-top: 16px; background: var(--p-ink); }
@media (min-width: 761px) { .cs3-ix { position: sticky; top: 112px; align-self: start; } }
html body .cs3-lead { margin: 0; font: 600 18px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); text-wrap: pretty; }
@media (min-width: 761px) { html body .cs3-lead { font-size: 20px; line-height: 30px; } }
html body .cs3-p { margin-top: 16px; }
.cs3-facts { margin: 40px 0 0; border-bottom: 1px solid var(--p-line); }
.cs3-facts > div { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--p-line); }
.cs3-facts dt { font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.cs3-facts dd { margin: 0; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.cs3-needs { margin: 32px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--p-line); }
.cs3-needs li { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-top: 1px solid var(--p-line); }
@media (min-width: 761px) { .cs3-needs li { grid-template-columns: 1fr 1fr; gap: 32px; } }
.cs3-need-q { margin: 0; font: 600 18px/28px var(--p-font); color: var(--p-ink); text-wrap: pretty; }
.cs3-need-a { margin: 0; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.cs3-need-a .p-meta { display: block; margin-bottom: 4px; }
.cs3-steps { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--p-line); }
.cs3-steps li { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-top: 1px solid var(--p-line); }
@media (min-width: 761px) { .cs3-steps li { grid-template-columns: 160px 1fr; gap: 32px; } }
.cs3-step-when { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cs3-step-when b { font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.cs3-step-t { margin: 0 0 8px; font: 600 18px/28px var(--p-font); color: var(--p-ink); }
.cs3-checks { margin-top: 0; }
.cs3-sys { margin-top: 0; }
.cs3-quote { margin: 0; }
.cs3-quote blockquote { margin: 0; font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); text-wrap: pretty; }
@media (min-width: 1101px) { .cs3-quote blockquote { font-size: 32px; line-height: 40px; } }
.cs3-quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 24px; font: 400 16px/24px var(--p-font); color: var(--p-mute); }
.cs3-quote figcaption b { font-weight: 600; color: var(--p-ink); }
.cs3-media { margin-top: var(--p-head); }
.cs3-cap { margin: 0 0 12px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.cs3-framed { margin: 0; }
.cs3-frame { padding: 24px; border-radius: var(--p-r-card); background: var(--p-sheet); }
@media (min-width: 761px) { .cs3-frame { padding: 48px; } }
@media (min-width: 1101px) { .cs3-frame { padding: 64px; } }
.cs3-frame img { display: block; width: 100%; height: auto; border-radius: var(--p-r-box); box-shadow: 0 0 0 1px var(--p-line); background: var(--p-white); }
.cs3-framed.is-phone .cs3-frame img { width: auto; max-width: 320px; max-height: 640px; margin: 0 auto; }
.cs3-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 761px) { .cs3-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .cs3-grid .cs3-frame { padding: 32px; } }
.cs3-grid.is-one { grid-template-columns: 1fr; }
.cs3-phones { margin-top: 24px; }
.cs3-phone-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cs3-phone-row img { width: calc(50% - 8px); max-width: 240px; }
@media (min-width: 761px) { .cs3-phone-row img { width: calc(25% - 12px); } }
.cs3-imp-tiles { margin-top: 24px; }
.cs3-imp .cs3-cap + .cw-cmp-key + .cw-cmp-wrap, .cs3-imp .cs3-cap + .cw-cmp-wrap { margin-top: 0; }
.cs3-imp .cw-cmp-wrap + .cs3-cap { margin-top: 40px; }
html body .cs3-method { max-width: 800px; margin-top: 24px; }
.cs3-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 0; background: color-mix(in srgb, var(--p-white) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--p-line); transform: translateY(100%); transition: transform var(--p-ease); }
.cs3-dock.is-on { transform: none; }
.cs3-dock-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
@media (max-width: 760px) { .cs3-dock-in { grid-template-columns: 1fr auto; } .cs3-dock .cs3-bar-y, .cs3-dock .p-link { display: none; } }
@media (prefers-reduced-motion: reduce) { .cs3-dock { transition: none; } }
@media (max-width: 760px) {  /* phone: client and year each get a full row, the name wraps instead of "Ma…" */
  .cs3-bar { grid-template-columns: 1fr; gap: 16px; }
  .cs3-bar .cs3-bar-y { justify-content: flex-start; }
  .cs3-bar .cs3-bar-cta { grid-row: auto; }
  .cs3-bar .cs3-bar-k b { white-space: normal; }
  .cs3-bar-k i { width: 24px; }
}
@media (max-width: 760px) { .cs3-bar .cs3-bar-cta { order: 3; margin-top: 8px; } }
@media (max-width: 760px) { .cs3-dock .cs3-bar-cta { grid-column: auto; grid-row: auto; } .cs3-dock .cs3-bar-k i { display: none; } }  /* phone dock: one row, name + Book a call */
/* Project cards (ProjectGrid.astro), 14 Nov 2026: DesignMe /projects layout in our tokens. */
.pj-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.pj-f { padding: 8px 16px; border: 0; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line);
  font: 500 14px/20px var(--p-font); color: var(--p-ink); cursor: pointer; transition: background-color var(--p-ease), color var(--p-ease); }
.pj-f:hover { background: var(--p-sheet); }
.pj-f.is-on { background: var(--p-ink); color: var(--p-white); box-shadow: none; }
.pj-f:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.pj-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .pj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1101px) { .pj:not(.pj-2) .pj-grid { grid-template-columns: repeat(3, 1fr); } }
.pj-grid > li { display: flex; }
.pj-grid > li[hidden] { display: none; }
.pj-card { display: flex; flex-direction: column; width: 100%; padding: 8px; border-radius: var(--p-r-card); background: var(--p-white);
  box-shadow: inset 0 0 0 1px var(--p-line); color: var(--p-ink); text-decoration: none; transition: box-shadow var(--p-ease); }
.pj-card:hover { box-shadow: inset 0 0 0 1px #D4D4D4; }
.pj-card:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.pj-cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--p-r-box); background: var(--p-sheet); }
.pj-cover img, .pj-cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pj-cover img { transition: transform .6s cubic-bezier(.25, 1, .5, 1); }
.pj-cover video { opacity: 0; transition: opacity .3s; }
.pj-card.is-film video { opacity: 1; }
.pj-card:hover .pj-cover img { transform: scale(1.04); }
.pj-meta { display: flex; align-items: center; gap: 8px; padding: 20px 12px 16px; border-bottom: 1px solid var(--p-line); }
.pj-name { font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.pj-chip { padding: 2px 8px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 500 12px/16px var(--p-font); color: var(--p-text-2); white-space: nowrap; }
.pj-year { margin-left: auto; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); white-space: nowrap; }
.pj-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: 1; padding: 16px 12px 12px; }
html body .pj-title { margin: 0; font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); text-wrap: pretty; }
.pj-arr { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--p-r-box); background: var(--p-white);
  box-shadow: inset 0 0 0 1px var(--p-line); transition: background-color var(--p-ease), color var(--p-ease); }
.pj-arr svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--p-ease); }
.pj-card:hover .pj-arr { background: var(--p-ink); color: var(--p-white); box-shadow: none; }
.pj-card:hover .pj-arr svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .pj-cover img, .pj-arr svg { transition: none; } .pj-card:hover .pj-cover img { transform: none; } }
.cs3-more .p-head { margin-bottom: var(--p-head); }
@media (max-width: 760px) { .cw-cmp { table-layout: auto; } .cw-cmp tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cw-cmp th, .cw-cmp td { display: block; width: auto; min-width: 0; overflow-wrap: anywhere; } }  /* phone: Before and After side by side inside the card, nothing runs off the edge */
.cw-cmp { min-width: 0; }  /* site.css gives every table min-width: 820px (scrolling data tables); this one reflows instead */
.cw-cmp th, .cw-cmp td { border: 0; background: none; }  .cw-cmp thead th { background: var(--p-sheet); }  /* site.css table cell lines off; rows keep their own 1px line */
@media (min-width: 761px) and (max-width: 1100px) { .cs3-imp-tiles:has(> li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }  /* 4 tiles: 2 + 2, no lone tile */
/* /work v3 head (DesignMe /projects: centred eyebrow, H1, one line), 14 Nov 2026 */
html body .pj-top { text-align: center; padding-bottom: 64px; }
html body .pj-top .p-crumbs ol { justify-content: center; }
html body .pj-eyebrow { margin: 32px 0 16px; }
html body .pj-h1 { max-width: 900px; margin: 0 auto; }
html body .pj-sub { max-width: 640px; margin: 24px auto 0; }
.pj-sec { padding-bottom: 0; }  /* the band below already has the section gap on top */

/* Plain hero on the shared band (PageHero.astro, 14 Nov 2026): H1 kept to about three lines like the other tops; the CTA row's
   spacing; a tinted or ink band right after the hero starts flush (no white strip), a white band after it drops its extra top gap. */
html body .p-hero-plain .p-plain-h1 { max-width: 15ch; }
html body .p-hero-plain .p-plain-sub { margin-top: 16px; }
@media (min-width: 761px) { html body .p-hero-plain .p-plain-sub { margin-top: 32px; } }
html body .p-hero-plain + .exg-sec, html body .p-hero-plain + .cg-ladder-sec, html body .p-hero-plain + .ag-short { margin-top: 0; }

/* Agency guide spacing v2 (14 Nov 2026 evening, Erfan: "so much content… give it proper gaps; take inspiration from DesignMe").
   DesignMe's rhythm (checked on designme.agency/industries/b2b-saas): every band the same top and bottom padding, a small
   eyebrow over each heading, a wide gap between heading and content, white / light grey / colour bands alternating. */
html body .ag-short, html body .ag-band, html body .ag-q, html body .ag-flags { margin-top: 0; padding-block: var(--p-sec); }
html body .ag-band-grey { background: var(--p-sheet); }
html body .ag-band-grey .ag-check li { background: var(--p-white); box-shadow: none; }
html body .ag-eye { margin: 0 0 16px; font: 500 12px/16px var(--p-font); letter-spacing: .1em; text-transform: uppercase; color: var(--p-mute); }
html body .ag-short .ag-eye, html body .ag-flags .ag-eye { color: var(--t-fg); }
html body .ag-q .ag-eye { color: var(--p-link-d); }
html body .ag-head { gap: 0; margin-bottom: 56px; }
html body .ag-head .ag-intro { margin-top: 16px; }
html body .ag-q-head { margin-bottom: 56px; }
html body .ag-steps, html body .ag-flag-grid, html body .ag-check, html body .ag-qs { gap: 24px; }
html body .ag-ours-list li { padding: 24px 0; }
@media (max-width: 760px) { html body .ag-head, html body .ag-q-head { margin-bottom: 40px; } html body .ag-steps, html body .ag-flag-grid, html body .ag-check, html body .ag-qs { gap: 16px; } }
.pj-cover { aspect-ratio: 16 / 10; }  /* the composed thumbnails are 1600x1000 (16:10); nothing cropped */
.pj-cover video { object-position: center center; }  /* 14 Nov (Erfan: "the logo is not in the center"): films are 1200x980, cropped to 16:10 from the middle, not from the top */
.cs3-rule { display: none; }  /* 14 Nov (Erfan: "why the underline bar? not our design") */
/* Case overview v3.1 (14 Nov, Erfan: "so confusing"): CTA under the summary; one quiet Client · What we did · Year row */
.cs3-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 40px; }
.cs3-meta { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--p-line); }
@media (min-width: 761px) { .cs3-meta { grid-template-columns: 1fr 2fr 1fr; gap: 32px; } }
.cs3-meta dt { font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.cs3-meta dd { margin: 8px 0 0; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.cs3-dock-in { grid-template-columns: 1fr auto; }
.cs3-dock-name { display: flex; align-items: baseline; gap: 12px; margin: 0; min-width: 0; }
.cs3-dock-name b { font: 600 16px/24px var(--p-font); color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs3-dock-name span { font: 400 14px/20px var(--p-font); color: var(--p-mute); }
@media (max-width: 760px) { .cs3-dock-name span { display: none; } }

/* /pricing comparison (PriceCards compare, 14 Nov 2026 night; layout idea from gr8rstudio.com): ink band, one rounded box with
   three columns, ours lifted on ink-2 with ticks. "How the price is set" after it turns light so the bands alternate. */
.prc-cmp { padding-block: var(--p-sec); background: var(--p-ink); color: var(--p-white); }
.prc-cmp-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 48px; }
html body .prc-cmp .p-h2 { color: var(--p-white); }
html body .prc-cmp .prc-intro { color: var(--p-link-d); }
.prc-cmp-box { display: grid; gap: 8px; padding: 8px; border-radius: var(--p-r-card);  /* 14 Nov: system radius, was 24px */ box-shadow: inset 0 0 0 1px var(--p-line-dark); }
.prc-cmp-col { display: flex; flex-direction: column; padding: 32px; border-radius: var(--p-r-box); }  /* inner card inside the 4px box: 2px (was 16px) */
.prc-cmp-col.is-us { background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-line-dark); }
html body .prc-cmp-who { margin: 0; font: 500 15px/24px var(--p-font); color: var(--p-link-d); }
html body .prc-cmp-logo { font: 600 20px/24px var(--p-font); letter-spacing: -0.02em; color: var(--p-white); }
html body .prc-cmp-val { margin: 24px 0 0; font: 600 48px/52px var(--p-font); letter-spacing: -0.045em; color: var(--p-white); font-variant-numeric: tabular-nums; }
html body .prc-cmp-per { margin: 8px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
html body .prc-cmp-note { margin: 20px 0 0; min-height: 66px; font: 400 14px/22px var(--p-font); color: #8A8A8A; }
.prc-cmp-col dl { display: grid; margin: 24px 0 0; }
.prc-cmp-col dl div { padding: 18px 0; border-top: 1px solid var(--p-line-dark); }
.prc-cmp-col dt { font: 400 13px/20px var(--p-font); color: #8A8A8A; }
.prc-cmp-col dd { display: flex; gap: 10px; margin: 6px 0 0; font: 400 16px/24px var(--p-font); color: var(--p-link-d); }
.is-us dd { color: var(--p-white); font-weight: 500; }
.prc-cmp-col dd svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--p-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .prc-cmp-src { margin: 24px 0 0; font: 400 13px/20px var(--p-font); color: #8A8A8A; }
@media (min-width: 1101px) {
  .prc-cmp-box { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .prc-cmp-col { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; }
  .prc-cmp-col dl { display: contents; }
  .prc-cmp-col dl div:first-child { margin-top: 24px; }
}
@media (max-width: 760px) { .prc-cmp-col { padding: 24px; } html body .prc-cmp-val { font-size: 40px; line-height: 44px; } html body .prc-cmp-note { min-height: 0; } }

html body .prc-cmp + .prc-how { background: var(--p-sheet); color: var(--p-ink); }
html body .prc-cmp + .prc-how .p-h2, html body .prc-cmp + .prc-how .prc-how-list h3 { color: var(--p-ink); }
html body .prc-cmp + .prc-how .prc-intro, html body .prc-cmp + .prc-how .prc-how-l, html body .prc-cmp + .prc-how .prc-how-when, html body .prc-cmp + .prc-how .prc-note { color: var(--p-text-2); }
html body .prc-cmp + .prc-how .prc-how-list li { background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .prc-cmp + .prc-how .prc-how-ico { background: var(--p-ink); color: var(--p-white); }
html body .prc-cmp + .prc-how .prc-note .p-ul, html body .prc-cmp + .prc-how .prc-note .p-ul .ul { color: var(--p-ink); }

/* Booking block v2 (BookingBlock.astro, 14 Nov 2026 night): our section head + the Cal.com calendar only, in our 4px card on the
   sheet band. No review column, no big radii (Erfan: bring every reference into our style). */
.bk { padding-block: var(--p-sec); background: var(--p-sheet); }
.bk-head { display: grid; gap: 12px; max-width: 720px; margin-bottom: 40px; }
html body .bk-intro { margin: 0; font: 400 18px/28px var(--p-font); color: var(--p-text-2); }
.bk-cal { min-height: 560px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); overflow: auto; }
html body .bk-load { margin: 0; padding: 40px; font: 400 15px/22px var(--p-font); color: var(--p-mute); text-align: center; }
html body .bk-alt { margin: 16px 0 0; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
@media (max-width: 1100px) { .prc-cmp-col.is-us { order: -1; } }
/* Comparison pages (CompareGuide.astro, cg2-*), 15 Nov 2026: the approved guide bands (ag-*) + logo cards, a pick card, a
   side-by-side table and fold-out detail rows. Tokens only: 4px cards, 1px line, sheet/white, 8-step spacing. */
.cg2-logo { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
.cg2-logo img { width: 18px; height: 18px; }
.cg2-logo-lg { width: 48px; height: 48px; } .cg2-logo-lg img { width: 26px; height: 26px; }
.cg2-logo-txt { font: 700 16px/1 var(--p-font); color: var(--p-ink); }
.cg2-logo-lg.cg2-logo-txt { font-size: 22px; }
html body .cg2-short-p { margin: 16px 0 0; font: 400 16px/26px var(--p-font); color: var(--p-ink); opacity: .85; text-wrap: pretty; }
.cg2-pick { display: grid; gap: 16px; align-content: start; }
.cg2-pick-card { padding: 24px; border-radius: var(--p-r-card); background: var(--p-white); }
.cg2-pick-h { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 18px/24px var(--p-font); color: var(--p-ink); }
.cg2-pick-card ul { margin: 16px 0 0; padding: 0 0 0 20px; font: 400 16px/26px var(--p-font); color: var(--p-text-2); }
.cg2-what { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 761px) { .cg2-what { grid-template-columns: 1fr 1fr; } }
.cg2-card { padding: 32px; border-radius: var(--p-r-card); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
.ag-band-grey .cg2-card { box-shadow: none; }
.cg2-card-h { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font: 600 24px/32px var(--p-font); letter-spacing: -0.02em; color: var(--p-ink); }
.cg2-card .p-body + .p-body { margin-top: 12px; }
.cg2-more { margin-top: 12px; }
.cg2-more summary { cursor: pointer; font: 500 15px/24px var(--p-font); color: var(--p-ink); text-decoration: underline; text-underline-offset: 4px; }
.cg2-more .p-body { margin-top: 12px; }
.cg2-best-h { margin: 24px 0 12px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.cg2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg2-chips li { padding: 4px 12px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 500 14px/24px var(--p-font); color: var(--p-ink); }
html body .cg2-intro { margin: 16px 0 0; max-width: 640px; font: 400 18px/28px var(--p-font); color: var(--p-text-2); }
.cg2-tbl { margin-top: 40px; border-radius: var(--p-r-card); background: var(--p-white); overflow: hidden; }
.cg2-tr { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 24px; padding: 20px 24px; border-top: 1px solid var(--p-line); font: 400 16px/24px var(--p-font); color: var(--p-text-2); }
.cg2-th { border-top: 0; background: var(--p-ink); color: var(--p-white); font-weight: 600; }
.cg2-th span { display: flex; align-items: center; gap: 12px; }
.cg2-th span:first-child { color: var(--p-link-d); font-weight: 500; }
.cg2-crit b { display: block; font: 600 16px/24px var(--p-font); color: var(--p-ink); }
.cg2-crit small { display: block; margin-top: 4px; font: 400 14px/20px var(--p-font); color: var(--p-mute); }
@media (max-width: 760px) {
  .cg2-th { display: none; }
  .cg2-tr { grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 20px; }
  .cg2-tr:nth-child(2) { border-top: 0; }
  .cg2-crit { grid-column: 1 / -1; }
  .cg2-tr [data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 500 12px/16px var(--p-font); letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
}
.cg2-detail-grid { display: grid; gap: 40px; }
@media (min-width: 1101px) { .cg2-detail-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .cg2-detail-grid > div:first-child { position: sticky; top: 112px; align-self: start; } }
.cg2-acc { border-top: 1px solid var(--p-line); }
.cg2-acc details { border-bottom: 1px solid var(--p-line); }
.cg2-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; font: 600 20px/28px var(--p-font); letter-spacing: -0.01em; color: var(--p-ink); }
.cg2-acc summary::-webkit-details-marker { display: none; }
.cg2-acc summary::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: var(--p-r-box); box-shadow: inset 0 0 0 1px var(--p-line);
  background: linear-gradient(var(--p-ink), var(--p-ink)) center / 12px 2px no-repeat, linear-gradient(var(--p-ink), var(--p-ink)) center / 2px 12px no-repeat, var(--p-white); }
.cg2-acc details[open] summary::after { background: linear-gradient(var(--p-ink), var(--p-ink)) center / 12px 2px no-repeat, var(--p-white); }
.cg2-acc details > .p-body { margin: 0 0 16px; max-width: 680px; }
.cg2-acc details > .p-body:last-child { margin-bottom: 24px; }
.cg2-ticks { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.cg2-ticks li { display: flex; gap: 12px; font: 500 16px/24px var(--p-font); color: var(--p-ink); }
.cg2-ticks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--p-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg2-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
html body .ag-q .cg2-cta-act .p-link { color: var(--p-white); }
html body .cg2-cta-t { max-width: 560px; margin-top: 16px; }
/* /comparison hub (15 Nov 2026): logo-pair cards in the guide band style */
html body .cmh-sec { padding-block: var(--p-sec); margin-top: 0; }
.cmh-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .cmh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1101px) { .cmh-grid { grid-template-columns: repeat(3, 1fr); } }
.cmh-grid > li { display: flex; }
.cmh-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 32px; border-radius: var(--p-r-card); background: var(--p-white);
  box-shadow: inset 0 0 0 1px var(--p-line); color: var(--p-ink); text-decoration: none; transition: box-shadow var(--p-ease); }
.ag-band-grey .cmh-card { box-shadow: none; }
.cmh-card:hover { box-shadow: inset 0 0 0 1px #D4D4D4; }
.cmh-card:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.cmh-marks { display: flex; }
.cmh-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--p-r-box); background: var(--p-white); box-shadow: inset 0 0 0 1px var(--p-line); }
.cmh-mark + .cmh-mark { margin-left: -8px; }
.cmh-mark img { width: 24px; height: 24px; } .cmh-mark b { font: 700 18px/1 var(--p-font); color: var(--p-ink); }
.ag-band-grey .cmh-mark { background: var(--p-sheet); box-shadow: none; }
.cmh-t { margin-top: 24px; padding-right: 48px; font: 600 22px/28px var(--p-font); letter-spacing: -0.02em; text-wrap: balance; }
.cmh-l { margin-top: 12px; font: 400 16px/24px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }
.cmh-arr { position: absolute; top: 32px; right: 32px; }
.cmh-card:hover .pj-arr { background: var(--p-ink); color: var(--p-white); box-shadow: none; }
html body .p-dk.p-lt + .cmh-sec { padding-top: 0; }  /* white hero + white band: one gap, not two */
/* Guide mode (pages JSON "style": "guide"), 15 Nov 2026: every block in its own band, in the approved guide colours. */
html body .gd-band { padding-block: var(--p-sec); }
html body .gd-band > .p-sec { padding-top: 0; }
html body .gd-band .ag-eye { margin-bottom: 16px; }
html body .gd-grey { background: var(--p-sheet); }
html body .gd-grey .p-table-wrap, html body .gd-grey .p-table { background: var(--p-white); }
html body .gd-grey .p-table-wrap { border-radius: var(--p-r-card); }
html body .gd-band.tint .p-intro, html body .gd-band.tint .p-meta, html body .gd-band.tint .ag-eye { color: var(--t-fg); }
html body .p-dk.p-lt + .gd-white { padding-top: 0; }
html body .gd-k-split .p-entity { color: var(--p-ink); }
html body .gd-k-split .p-split { padding: 0; background: none; box-shadow: none; border-radius: 0; }
html body .gd-k-split .p-t32 { font-size: 40px; line-height: 44px; letter-spacing: -0.035em; }
@media (min-width: 1101px) { html body .gd-k-split .p-t32 { font-size: 48px; line-height: 52px; } }
html body .gd-k-split .p-entity { font: 400 18px/28px var(--p-font); }
@media (max-width: 760px) { html body .gd-k-split .p-t32 { font-size: 32px; line-height: 36px; } }
html body .gd-band.tint .p-fit > div, html body .gd-grey .p-fit > div { background: var(--p-white); box-shadow: none; border-radius: var(--p-r-card); }  /* fit cards: white on a coloured band */
html body .gd-grey .p-grid > li, html body .gd-grey .p-feat { background: var(--p-white); }
.cmh-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--p-ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* 404 (15 Nov 2026) */
html body .nf-h1 { margin-top: 16px; }
@media (min-width: 1101px) { .nf-grid { grid-template-columns: repeat(4, 1fr); } }
/* Long guide as an article (ArticleGuide.astro), 15 Nov 2026 */
html body .ag-article { padding-top: var(--p-sec); }
html body .p-dk.p-lt + .ag-article { padding-top: 0; }
html body .ag-article-upd { margin: 0 0 24px; }
html body .ag-article .p-prose h3 { margin-top: 32px; }
/* Phones in a chapter, staggered up / down / up (15 Nov 2026, Erfan) */
.cs3-phone-row.is-stagger { align-items: flex-start; flex-wrap: nowrap; gap: 24px; padding-block: 32px; }
.cs3-phone-row.is-stagger img { width: calc((100% - 48px) / 3); max-width: 260px; border-radius: var(--p-r-card); box-shadow: 0 0 0 1px var(--p-line), 0 16px 40px rgba(5,5,5,.08); }
.cs3-phone-row.is-stagger img:nth-child(odd) { transform: translateY(-32px); }
.cs3-phone-row.is-stagger img:nth-child(even) { transform: translateY(32px); }
@media (max-width: 760px) { .cs3-phone-row.is-stagger { gap: 12px; padding-block: 16px; } .cs3-phone-row.is-stagger img:nth-child(odd) { transform: translateY(-16px); } .cs3-phone-row.is-stagger img:nth-child(even) { transform: translateY(16px); } }
/* 15 Nov 2026 (Erfan: "bottom padding missing; 11 and the heading don't match") */
html body main.cs3 > section.faq2 { margin-top: var(--p-sec) !important; }   /* the last chapter keeps one section gap before the grey FAQ band */
.cs3-ix-line { gap: 10px; }
.cs3-num { font: 600 20px/28px var(--p-font); letter-spacing: -0.02em; color: #9A9A9A; }
@media (min-width: 761px) { .cs3-num { font-size: 24px; line-height: 32px; } }
.cs3-framed.is-phone .cs3-phone-row.is-stagger img { flex: 1 1 0; min-width: 0; width: auto; max-width: 260px; max-height: none; height: auto; margin: 0; }  /* three phones share the row; never wider than the frame */
.cs3-framed.is-phone .cs3-phone-row.is-stagger { justify-content: center; }
.cs3-svc { display: flex; justify-content: center; margin: 40px 0 0; }
.cs3-svc-solo { margin-top: var(--p-sec); }

/* 15 Nov 2026 phone pass (Erfan: "centre-aligned things look better left-aligned on mobile"): centred section heads, centred
   heroes (/free-website-audit, /pricing, /work) and the migration tool tiles start on the left on phones. Desktop unchanged. */
@media (max-width: 760px) {
  html body .p-head-c { margin-inline: 0; text-align: left; }
  html body .p-dk-center .p-in > nav, html body .p-dk-center .p-top-center, html body .p-top-center .p-top-form .ck-note { text-align: left; }
  html body .p-top-center .p-top-copy { justify-items: start; }
  html body .p-top-center :is(.p-dk-h1, .p-dk-sub, .p-top-form) { margin-left: 0; margin-right: 0; }
  html body .p-hero-center .p-in { align-items: flex-start; text-align: left; }
  html body :is(.p-hero-center, .pj-top) .p-crumbs ol, html body .p-hero-center .p-cta { justify-content: flex-start; }
  html body .p-hero-center .p-plain-sub { margin-inline: 0; }
  html body .pj-top { text-align: left; }
  html body .pj-top :is(h1, p, .cs3-cta, .pj-filters) { margin-left: 0; margin-right: 0; justify-content: flex-start; }
  html body .p-tw-grid li { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  html body .pj .pj-filters { justify-content: flex-start; }
  html body .p-tw-k { text-align: left; }
}