/* landing.css: the two landing pages, For business (/b2b) and Sell with us (/sell-with-us), on the 2026 kit (dc-ui.css tokens and
   components; the Start screen's .big cardlink, cs-steps and .av patterns come from collab-start.css). This file adds only what the kit
   lacks: the hero, the proof strip, the craft grid, the project cards, the card lists, the two-door split, the FAQ on native <details>,
   the closing band. Scoped under .ld so it touches no other page. No raw colours: every colour is a token. Phone first (390px), desktop
   at 1024px and up, as dc-ui.css. Targets are 44px or more; nothing under 13px. */

.ld { padding-bottom: 32px; }
.ld .pad { padding: 0 var(--dc-gutter); }
.ld ul, .ld ol { margin: 0; padding: 0; }

/* hero: the photograph first, the words under it; two columns on desktop */
.ld-hero__ph { display: block; }
.ld-hero__ph img { display: block; width: 100%; height: auto; max-height: 60vw; object-fit: cover; background: var(--dc-photo-bg); }
.ld-hero__text { padding-top: 24px; }
.ld-hero__text .dc-h-title { margin-top: 12px; }
.ld-lead { margin-top: 12px; font: 400 17px/27px var(--dc-serif); color: var(--dc-ink-2); }
.ld-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ld-actions .dc-btn { white-space: normal; }
/* Project Desk: one plain line under each of the two front-door buttons, saying who it is for (printed only with the switch ON) */
.pd-ld-choice { display: flex; flex-direction: column; gap: 6px; }
/* phone: `.ld .pad` zeroes the hero text's top padding, so the eyebrow touched the photograph; give it room (only with the switch ON, so the OFF page is unchanged) */
@media (max-width: 1023px) { .ld .ld-hero__text.pd-ld-hero { padding-top: 24px; } }
/* 13px on the older kit: with the switch ON the eyebrow and the step numbers on /b2b read at 14px */
.ld-hero__text.pd-ld-hero .dc-eyebrow { font-size: 14px; }
.collab-start .cs-steps[data-pd-ld] .howc .n { font-size: 14px; }
.pd-ld-for { margin: 0; font: 400 14px/20px var(--dc-serif); color: var(--dc-ink-2); text-transform: none; max-width: 32ch; }

/* proof strip: four short facts, two by two on a phone */
.ld-proof { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 24px; }
.ld-proof li { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--dc-rule); font: 600 14px/20px var(--dc-sans); }

/* sections */
.ld-sec { margin-top: 32px; }
.ld-sec > .dc-h-sec + *, .ld-sec > .pad + * { margin-top: 16px; }

/* card lists (who buys, what Direct Create does): the Start screen's big card, with a line of text */
.ld-cards { list-style: none; display: grid; gap: 12px; margin-top: 16px; }
.ld-card { display: flex; align-items: center; gap: 16px; min-height: 88px; padding: 16px; background: var(--dc-card); border: 1px solid var(--dc-edge); border-radius: 4px; color: inherit; text-decoration: none; }
.ld-card > .dc-i { flex: none; }
.ld-card > div { flex: 1; min-width: 0; }
.ld-card b { display: block; font: 700 17px/24px var(--dc-sans); }
.ld-card span { display: block; margin-top: 4px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }
.ld-card .ld-card__go { margin-top: 8px; color: var(--dc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ld-card .go { margin-left: auto; flex: none; display: inline-flex; }
.ld-card:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }

/* the craft grid: a photograph, the craft name, its place */
.ld-crafts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 12px; margin-top: 16px; }
.ld-craft { display: block; color: inherit; text-decoration: none; }
.ld-craft__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dc-photo-bg); border: 1px solid var(--dc-rule); border-radius: 4px; }
.ld-craft__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-craft b { display: block; margin-top: 8px; font: 700 15px/20px var(--dc-sans); }
.ld-craft .dc-meta { display: block; margin-top: 4px; }
.ld-craft:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.ld-crafts__line { margin-top: 24px; font: 500 15px/22px var(--dc-sans); }
.ld-crafts__line .dc-link { gap: 4px; }

/* the fee statement and the shipping-abroad note: a plain paragraph, set apart by a rule */
.ld-fee { margin-top: 12px; max-width: 720px; font: 400 17px/28px var(--dc-serif); color: var(--dc-ink-2); }
.ld-note { margin-top: 24px; max-width: 720px; padding: 16px 0 0 16px; border-left: 4px solid var(--dc-ink); }
.ld-note h3 { margin: 0; font: 700 17px/24px var(--dc-sans); }
.ld-note p { margin: 4px 0 0; font: 400 17px/28px var(--dc-serif); color: var(--dc-ink-2); }

/* testimonials (hidden until a consented entry exists) */
.ld-says { list-style: none; display: grid; gap: 24px; margin-top: 16px; }
.ld-says blockquote { margin: 0; padding-left: 16px; border-left: 4px solid var(--dc-ink); font: 400 18px/29px var(--dc-serif); }
.ld-says blockquote p { margin: 0; }
.ld-says__by { margin: 8px 0 0 20px; font: 500 14px/20px var(--dc-sans); color: var(--dc-ink-2); }

/* work we have delivered: a band, the project's banner, the client named (logo or name), the title, one line, a link */
.ld-work { padding: 32px 0; background: var(--dc-card); border-top: 1px solid var(--dc-edge); border-bottom: 1px solid var(--dc-edge); }
.ld-work__intro { margin-top: 8px; font: 500 15px/22px var(--dc-sans); color: var(--dc-ink-2); }
.ld-projects { list-style: none; display: grid; gap: 28px; margin-top: 20px; }
.ld-project { display: block; color: inherit; text-decoration: none; }
.ld-project__ph { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dc-photo-bg); border: 1px solid var(--dc-rule); border-radius: 4px; }
.ld-project__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ld-project:hover .ld-project__ph img { transform: scale(1.03); }
.ld-project .ld-project__client { display: flex; align-items: center; min-height: 32px; margin-top: 14px; }
.ld-project__client img { display: block; max-height: 32px; width: auto; }
.ld-project__client--name { font: 700 22px/28px var(--dc-serif); letter-spacing: .01em; }
.ld-project__client--cat { font: 600 13px/20px var(--dc-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dc-ink-2); }
.ld-project b { display: block; margin-top: 4px; font: 700 17px/24px var(--dc-sans); }
.ld-project .ld-project__line { display: block; margin-top: 4px; font: 400 16px/26px var(--dc-serif); color: var(--dc-ink-2); }
.ld-project .ld-project__go { display: inline-block; margin-top: 8px; font: 600 14px/20px var(--dc-sans); text-decoration: underline; text-underline-offset: 4px; }
.ld-project:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }

/* fact lists (what to expect, the doors, terms) */
.ld-facts { list-style: none; margin-top: 8px; }
.ld-facts li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--dc-rule); font: 400 16px/26px var(--dc-serif); }
.ld-facts li:first-child { border-top: 0; }
.ld-facts .dc-i { flex: none; margin-top: 4px; }

/* the two doors: for makers, for designers */
.ld-doors { display: grid; gap: 16px; }
.ld-door { padding: 24px 16px; }
.ld-door__lead { margin-top: 8px; font: 600 16px/24px var(--dc-sans); }
.ld-door .ld-facts { margin-top: 16px; }
.ld-door .ld-actions { margin-top: 16px; }

/* how selling works: two tabs on the Start screen's four-dot line */
.ld-tabs { margin-top: 8px; }
.ld .collab-start .cs-steps { margin-top: 16px; }

/* FAQ on native details */
.ld-faq { margin-top: 8px; border-bottom: 1px solid var(--dc-rule); }
.ld-faq__q { border-top: 1px solid var(--dc-rule); }
.ld-faq__q > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 0; cursor: pointer; list-style: none; font: 600 16px/24px var(--dc-sans); }
.ld-faq__q > summary::-webkit-details-marker { display: none; }
.ld-faq__q > summary .dc-i { flex: none; transition: transform .15s; }
.ld-faq__q[open] > summary .dc-i { transform: rotate(180deg); }
.ld-faq__q > summary:focus-visible { outline: 2px solid var(--dc-focus); outline-offset: 2px; }
.ld-faq__a { padding: 0 0 16px; font: 400 16px/26px var(--dc-serif); color: var(--dc-ink-2); }

/* closing band */
.ld-close { padding: 24px 16px; background: var(--dc-card); border: 1px solid var(--dc-rule); border-radius: 4px; }
.ld-close .ld-actions { margin-top: 16px; }
.ld-close__line { margin-top: 12px; font: 500 15px/22px var(--dc-sans); }

/* the Start screen's wrapper centres at 640px from 900px up; the landing page keeps that for its step and card columns */
.ld .collab-start .dc-h-sec { margin: 0; }

@media (min-width: 1024px) {
  .ld { max-width: 1280px; margin: 0 auto; }
  .ld-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 32px var(--dc-gutter) 0; }
  .ld-hero__ph { order: 2; }
  .ld-hero__ph img { aspect-ratio: 4 / 3; max-height: none; border-radius: 4px; }
  .ld-hero__text { order: 1; padding: 0; }
  .ld-lead { font-size: 18px; line-height: 29px; }
  .ld-actions { flex-direction: row; flex-wrap: wrap; }
  .ld-actions .dc-btn { width: auto; padding: 0 24px; }
  .ld-actions--two { display: grid; grid-template-columns: 1fr 1fr; }
  .ld-actions--two .dc-btn { width: 100%; }
  .ld-proof { grid-template-columns: repeat(4, 1fr); gap: 0 24px; margin-top: 32px; }
  .ld-sec { margin-top: 48px; }
  .ld-cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
  .ld-crafts { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
  .ld-projects { grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; }
  .ld-work { padding: 48px 0; }
  .ld-doors { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ld-door { padding: 32px 24px; }
  .ld-close { padding: 48px 40px; }
  .ld-faq { max-width: 880px; }
  .ld-sticky { display: none; }
}
/* carry */