/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* CARD-DISCOVER-1 (September 29, 2026): the public card page at /card/ (site/digital-business-card.html). The homepage's
   example card keeps its few rules in index.html's own style block. Built on the kit (wt-kit.css) and the site tokens; the card face itself is card.css. styles.css pads every
   <section>, so this page's sections set their own spacing. */
.wcp{max-width:1120px;margin:0 auto;padding:32px 16px 72px;display:grid;gap:64px;font-family:var(--font-body);font-size:var(--k-fs-17);line-height:1.55;color:var(--text)}
.wcp section{padding:0}
.wcp p{margin:0}
.wcp :focus-visible{outline:3px solid var(--k-focus);outline-offset:2px;border-radius:6px}

/* The first screen: the sentence and the two buttons, with the example card beside them on a laptop and under them on a phone. */
.wcp-hero{display:grid;gap:28px;align-items:center}
.wcp-hero__text{display:grid;gap:14px;min-width:0}
.wcp-label{font-size:var(--k-fs-13);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--k-accent-ink)}
.wcp-title{margin:0;font:700 clamp(1.75rem,1.2rem + 2.2vw,2.75rem)/1.12 var(--font-heading);letter-spacing:-.015em;text-wrap:balance;overflow-wrap:break-word}
.wcp-lede{font-size:var(--k-fs-17);line-height:1.6;color:var(--text-secondary);max-width:58ch}
.wcp-btns{margin-top:6px}
.wcp-btns .wtk-btn{min-width:0;max-width:100%;white-space:normal}
.wcp-example{margin:0;display:grid;gap:10px;justify-items:center;min-width:0}
.wcp-example figcaption{font-size:var(--k-fs-13);line-height:1.45;color:var(--text-muted);text-align:center;max-width:36ch}
/* The drawn face is 358 px at most (card.css); the host keeps its height before the renderer arrives, so nothing jumps. */
.wcp-example__card,.wcp-parts__card{position:relative;width:100%;max-width:358px;min-height:560px}
.wcp-example__card[data-card-example="ready"],.wcp-parts__card[data-card-example="ready"]{min-height:0}
.wcp-example__card[data-card-example="failed"]{display:none}
.wcp-parts__card[data-card-example="failed"]{display:none}

.wcp-section{display:grid;gap:20px;min-width:0}
.wcp-section > p{max-width:65ch;color:var(--text-secondary)}

/* The card taken apart: the drawn card with numbered markers, and the list that explains each number. */
.wcp-parts__grid{display:grid;gap:28px;align-items:start;justify-items:center}
.wcp-parts__card{margin:0 auto;padding-left:34px;max-width:392px}
/* The markers stand in a gutter left of the card, level with the part each one names, so none covers the card's words. */
.wcp-marks{position:absolute;inset:0;pointer-events:none}
.wcp-mark,.wcp-num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent,#1A1520);font:700 .8125rem/1 var(--font-body);flex:none}
.wcp-mark{position:absolute;box-shadow:0 0 0 2px var(--bg,#1A1520)}
.wcp-parts__list,.wcp-steps__list,.wcp-open__list{list-style:none;margin:0;padding:0;display:grid;gap:16px;min-width:0;width:100%}
.wcp-parts__list li,.wcp-steps__list li{display:flex;gap:14px;align-items:flex-start}
.wcp-parts__list p,.wcp-steps__list p{min-width:0;overflow-wrap:break-word}
.wcp-num{margin-top:2px}

/* What the person who opens the card can do: the card's own two buttons, drawn as pictures of the buttons, and a sentence each. */
.wcp-open__list{grid-template-columns:1fr}
.wcp-open__list li{display:grid;gap:10px;align-content:start;padding:var(--k-card-p);border-radius:var(--k-card-r);background:var(--k-surface);box-shadow:var(--k-shadow);min-width:0}
.wcp-open__list li > p:last-child{color:var(--text-secondary)}
.wcp-open__btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;max-width:100%;min-height:44px;padding:8px 18px;border-radius:999px;font:600 var(--k-fs-15)/1.3 var(--font-body);overflow-wrap:anywhere}
.wcp-open__btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wcp-open__btn--solid{background:#F0EAE0;color:#1A1520}
[data-theme="light"] .wcp-open__btn--solid{background:#1A1520;color:#FAF7F3}
.wcp-open__btn--accent{background:var(--k-accent-bg);color:var(--k-accent-ink);border:1.5px solid var(--k-accent-ink)}

.wcp-steps__list li{padding:18px 20px;border-radius:18px;background:var(--k-surface);box-shadow:var(--k-shadow)}
.wcp-diff{padding:var(--k-card-p) !important;border-radius:var(--k-card-r);background:var(--k-accent-bg)}
.wcp-diff > p{color:var(--text)}
.wcp-end{justify-items:start}

/* On a phone the example card follows the buttons, so it starts on the first screen even at 664 px tall; the paragraph
   that explains it comes after the card. */
@media (max-width:879px){
  .wcp-hero{gap:18px}
  .wcp-hero__text{display:contents}
  .wcp-label{order:1}.wcp-title{order:2}.wcp-btns{order:3}.wcp-example{order:4}.wcp-lede{order:5}
}
@media (min-width:880px){
  .wcp{padding-top:48px;gap:88px}
  .wcp-hero{grid-template-columns:minmax(0,1fr) 358px;gap:56px}
  .wcp-parts__grid{grid-template-columns:392px minmax(0,1fr);gap:56px;align-items:center;justify-items:stretch}
  .wcp-parts__card{margin:0}
  .wcp-open__list{grid-template-columns:1fr 1fr}
  .wcp-steps__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wcp-steps__list li{flex-direction:column}
}