/* ============================================================
   marketing.css — the bold "block mosaic" layer.
   Loads AFTER components.css so redesigned marketing classes win.
   Admin pages do NOT load this file (they stay calm/functional).
   Every value references a token in tokens.css.
   ============================================================ */

/* Muted canvas so white cards + colour blocks read as panels */
body.market { background: var(--color-bg-muted); }
body.market .nav { background: rgba(244, 245, 247, 0.82); }

/* Flat, rounded, saturated blocks — the core motif */
.block { border-radius: var(--radius-xl); padding: var(--space-8); position: relative; overflow: hidden; }
.block--blue    { background: var(--color-blue); color: var(--color-ink-invert); }
.block--ink     { background: var(--color-ink); color: var(--color-ink-invert); }
.block--tint    { background: var(--color-blue-050); color: var(--color-ink); }
.block--surface { background: var(--color-surface); color: var(--color-ink); }
.block--photo   { padding: 0; background: var(--color-gray-100); min-height: 220px; }
.block--photo img { width: 100%; height: 100%; object-fit: cover; }
.block h1, .block h2, .block h3 { color: inherit; }

.section-head { max-width: 42rem; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--fs-display); margin-top: var(--space-4); }
.section-head p  { margin-top: var(--space-4); }

/* ---- Hero mosaic --------------------------------------- */
.hero { padding-block: var(--space-12) var(--space-24); }
.hero__mosaic { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hero__lead-block { display: flex; flex-direction: column; justify-content: center; min-height: 340px; }
.hero__lead-block .eyebrow { margin-bottom: var(--space-4); }
.hero__lead-block h1 { font-family: var(--font-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); font-weight: var(--fw-extrabold); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.proofrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color: var(--color-ink-invert); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.chip i { color: var(--color-blue-300); }
.hero__stack { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hero__photo { min-height: 260px; }
.hero__caption { font-size: var(--fs-body-lg); line-height: var(--lh-snug); font-weight: var(--fw-medium); }
.hero__caption b { color: var(--color-blue); font-weight: var(--fw-bold); }
.hero__strip { display: none; background: var(--color-ink); border-radius: var(--radius-xl); align-items: flex-start; justify-content: center; padding-top: var(--space-8); position: relative; overflow: hidden; }
@media (min-width: 900px) {
  .hero__mosaic { grid-template-columns: 1.55fr 1fr 96px; align-items: stretch; }
  .hero__stack { grid-template-rows: 1.4fr 1fr; }
  .hero__strip { display: flex; }
}

/* ---- Feature grid -------------------------------------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature { background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-8); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature__badge { width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-card); display: grid; place-items: center; font-size: var(--fs-h2); margin-bottom: var(--space-6); background: var(--color-blue); color: var(--color-ink-invert); }
.feature:nth-child(3n+2) .feature__badge { background: var(--color-ink); }
.feature:nth-child(3n) .feature__badge { background: var(--color-blue-050); color: var(--color-blue); }
.feature h3 { font-size: var(--fs-h3); }
.feature p { color: var(--color-text-secondary); margin-top: var(--space-3); font-size: var(--fs-body); }

/* ---- Use-case mosaic ----------------------------------- */
.usecase { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.usecase__pitch { display: flex; flex-direction: column; justify-content: center; }
.usecase__pitch h2 { font-size: var(--fs-display); }
.usecase__pitch p { margin-top: var(--space-4); }
.usecase__pitch .btn { margin-top: var(--space-6); align-self: flex-start; }
.uc { border-radius: var(--radius-xl); padding: var(--space-8); overflow: hidden; position: relative; min-height: 200px; }
.uc h3 { font-size: var(--fs-h2); color: inherit; }
.uc p { margin-top: var(--space-3); line-height: var(--lh-relaxed); }
.uc--tint { background: var(--color-blue-050); color: var(--color-ink); }
.uc--tint p { color: var(--color-gray-500); }
.uc--blue { background: var(--color-blue); color: var(--color-ink-invert); }
.uc--blue p { color: rgba(246,247,249,0.82); }
.uc--ink { background: var(--color-ink); color: var(--color-ink-invert); display: flex; flex-direction: column; justify-content: flex-end; }
.uc--ink p { color: var(--color-ink-invert-muted); }
.uc--photo { padding: 0; background: var(--color-gray-100); }
.uc--photo img { width: 100%; height: 100%; object-fit: cover; min-height: 100%; }
.uc__mark { width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-card); background: rgba(255,255,255,0.12); display: grid; place-items: center; color: var(--color-blue-300); font-size: var(--fs-h2); margin-top: var(--space-6); }
@media (min-width: 900px) {
  .usecase { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto);
    grid-template-areas: "pitch pitch photo" "ind blue photo" "comm comm mark"; }
  .usecase__pitch { grid-area: pitch; }
  .uc--indiv { grid-area: ind; } .uc--blue { grid-area: blue; }
  .uc--photo-tall { grid-area: photo; } .uc--comm { grid-area: comm; } .uc--mark { grid-area: mark; }
}

/* ---- Steps: real sequence, oversized numerals ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-8); position: relative; }
.step__head { display: flex; align-items: center; gap: var(--space-3); }
.step__num { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 4rem; line-height: 1; letter-spacing: var(--ls-tighter); color: var(--color-blue); }
.step__tag { font-family: var(--font-mono); font-size: 2rem; line-height: 1; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-gray-500); }
.step h3 { font-size: var(--fs-h3); margin-top: var(--space-6); }
.step p { color: var(--color-text-secondary); margin-top: var(--space-3); }

/* ---- FAQ ----------------------------------------------- */
.faq { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: 0.85fr 1.15fr; } }
.faq__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); min-height: 260px; }
.faq__aside h2 { font-size: var(--fs-display); line-height: var(--lh-snug); }
.faq__aside p { color: rgba(246,247,249,0.82); margin-top: var(--space-4); }
.faq__list { background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.faq-item { border-bottom: var(--border-thin) solid var(--color-line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary { list-style: none; cursor: pointer; padding: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); color: var(--color-ink); transition: background var(--dur-fast) var(--ease); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--color-gray-100); }
.faq-icon { position: relative; width: 1em; height: 1em; font-size: var(--fs-h3); flex: none; color: var(--color-blue); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: var(--radius-pill); transition: transform var(--dur) var(--ease); }
.faq-icon::before { transform: translateY(-50%) rotate(0deg); }
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] > summary .faq-icon::before,
.faq-item[open] > summary .faq-icon::after { transform: translateY(-50%) rotate(180deg); }
.faq-item__body { padding: 0 var(--space-6) var(--space-6); color: var(--color-text-secondary); max-width: var(--measure-copy); }

/* ---- CTA band (bold variant) --------------------------- */
.cta-band { border-radius: var(--radius-xl); padding: var(--space-20) var(--space-8); text-align: center; position: relative; overflow: hidden; }
.cta-band .ripple { width: 88px; height: 88px; margin: 0 auto var(--space-8); }
.cta-band h2 { font-size: var(--fs-display); color: var(--color-ink-invert); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--color-ink-invert-muted); margin: var(--space-4) auto 0; max-width: 44ch; }

/* ---- Products page ------------------------------------- */
.phead { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-16); }
@media (min-width: 900px) { .phead { grid-template-columns: 1.5fr 1fr; } }
.phead__lead { display: flex; flex-direction: column; justify-content: center; }
.phead__lead h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); font-weight: var(--fw-extrabold); font-family: var(--font-display); }
.phead__side { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.phead__side .ripple { display: block; margin: auto; flex: none; }
.prod-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 720px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
.prod { background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; border: var(--border-thin) solid var(--color-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.prod:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.prod__media { position: relative; aspect-ratio: 4/3; overflow: hidden; display: grid; place-items: center; }
.prod__media img { width: 100%; height: 100%; object-fit: cover; }
.prod__media .badge { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-card); }
.prod--a .prod__media { background: var(--color-blue); }
.prod--b .prod__media { background: var(--color-blue-400); }
.prod--c .prod__media { background: var(--color-gray); }
.prod__body { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.prod__title { font-size: var(--fs-h2); }
.prod__desc { color: var(--color-text-secondary); }
.prod__feats { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-secondary); font-size: var(--fs-caption); }
.prod__feats li { display: flex; align-items: center; gap: var(--space-2); }
.prod__feats i { color: var(--color-blue); }
.prod--soon .prod__feats i { color: var(--color-gray); }
.prod__price { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h1); letter-spacing: var(--ls-tight); display: flex; align-items: baseline; gap: var(--space-2); margin-top: auto; }
.prod__price small { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--color-gray-500); }
.prod--soon { opacity: .92; } .prod--soon .prod__media { filter: grayscale(.3); }

/* ---- Order / contact page ------------------------------ */
.order-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .order-grid { grid-template-columns: 1.1fr 0.9fr; } }
.form-panel { background: var(--color-surface); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-xl); padding: var(--space-8); margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.order-aside { position: sticky; top: calc(var(--nav-h) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-4); }
.recap { background: var(--color-ink); color: var(--color-ink-invert); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); position: relative; overflow: hidden; }
.recap__glow { position: absolute; inset: 0; background: radial-gradient(circle at 90% -10%, rgba(76,134,224,.3), transparent 55%); pointer-events: none; }
.recap > * { position: relative; }
.recap .eyebrow { color: var(--color-ink-invert); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.recap__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.recap__row--total { border-top: var(--border-thin) solid var(--color-line-dark); padding-top: var(--space-4); margin-top: var(--space-2); }
.recap__total { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h1); color: var(--color-ink-invert); }
.recap .hint { color: var(--color-ink-invert-muted); }
.recap .mono-tag { color: var(--color-ink-invert); font-weight: var(--fw-bold); }
.intro-block h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); font-weight: var(--fw-extrabold); font-family: var(--font-display); }

/* ---- Public profile: the "card on canvas" treatment ---- */
.profile-wrap { min-height: 100vh; padding: var(--space-8) var(--space-4) var(--space-16); }
.backbar { max-width: var(--size-profile); margin: 0 auto var(--space-4); }
.pcard { max-width: var(--size-profile); margin-inline: auto; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.pcard .cover { border-radius: 0; aspect-ratio: 16/9; }
.cover__ripple { position: absolute; right: -24px; top: -24px; width: 180px; height: 180px; opacity: .55; pointer-events: none; }
.pcard__inner { padding: 0 var(--space-8) var(--space-8); }
.pcard .link-btn:hover { background: var(--color-blue-050); }

/* ---- Profile demo: caret carousel ----------------------- */
.pcard-carousel { position: relative; }
.pcard-carousel .pcard { position: relative; }
.pcard__badge { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1; background: rgba(11,11,15,0.55); color: var(--color-ink-invert); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.pcard-carousel__dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.pcard-carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--color-line); cursor: pointer; }
.pcard-carousel__dot--active { background: var(--color-blue); }
.pcard-carousel__arrows { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
.pcard-carousel__nav { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-card); border: none; display: grid; place-items: center; cursor: pointer; color: var(--color-ink); font-size: var(--fs-h3); transition: transform var(--dur-fast) var(--ease); }
.pcard-carousel__nav:hover { transform: scale(1.06); }