/* Home hero visual and the angle landing pages (/lp/*).
   Values from the design tokens only (styles/tokens.css; DESIGN.md "Chat-window mock" and "Buttons"): a warm wash
   stage, white windows with a 1px hairline and Linear's layered shadow, one accent. Spacing on the 4px scale. */

/* --- CTA hierarchy: the trial is the one filled button; the secondary is quiet (text and an arrow) -- */
.btn-quiet { background: transparent; color: var(--color-accent-ink); border-color: transparent; box-shadow: none; padding: 0 var(--space-3); }
/* Left-aligned, the quiet button's text lines up with the primary's edge; its hover fill reaches into the gutter. */
@media (min-width: 640px) { .cta-block .btn-quiet { margin-inline-start: calc(-1 * var(--space-3)); } }
.btn-quiet:hover { background: var(--color-wash); color: var(--color-accent-hover); }
.btn-quiet .arr { display: inline-block; margin-inline-start: var(--space-1); transition: transform var(--dur-fast) var(--ease-out); }
.btn-quiet:hover .arr { transform: translateX(2px); }
/* Translations write the arrow for their own direction (Arabic: ←), so it isn't mirrored; the hover nudge follows it. */
[dir=rtl] .btn-quiet:hover .arr { transform: translateX(-2px); }
.cta-sure { margin: 0; font-size: var(--text-md); line-height: var(--leading-ui); font-weight: var(--weight-bold); color: var(--color-ink); }
/* Primary, then the bold line right under it, then the quiet secondary, at every width: the secondary's label
   varies by page (up to "Copy the proposal for my manager"), so it never shares the primary's row. */
.cta-block { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-6); }
.cta-block .btn-quiet { margin-top: var(--space-1); }
.cta-block + .small { margin-top: var(--space-2); }
@media (max-width: 639px) { .cta-block { justify-items: stretch; } .cta-block .btn { width: 100%; } .cta-block .cta-sure { text-align: center; } }
.hero.hero-v2 > *, .lp-hero > * { min-width: 0; }

/* --- Hero layout ------------------------------------------------------------------------------------ */
@media (min-width: 960px) { .hero.hero-v2 { grid-template-columns: 5fr 6fr; gap: var(--space-12); } }

/* --- The visual ------------------------------------------------------------------------------------- */
.hv { margin: 0; padding-bottom: var(--space-5); container-type: inline-size; width: 100%; max-width: 600px; justify-self: center; }
.hv-stage {
  /* Bottom padding is 32, not 20, on purpose: the toast overlaps the stage's bottom edge by 16. */
  position: relative; padding: var(--space-5) var(--space-5) var(--space-8); border-radius: var(--radius-xl); border: 1px solid var(--color-line);
  background: var(--color-wash);
}
.hv-stage, .hv-stage * { line-height: var(--leading-ui); }
.hv-win { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* The pod and its skill card */
.hv-pod { padding: var(--space-3); }
.hv-pod-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }
.hv-pod-name { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-ink); }
.hv-pod-mark { width: 16px; height: 16px; border-radius: var(--radius-xs); background: var(--color-accent); flex: none; }
.hv-skill { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); }
.hv-skill-icon { flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-accent-line); display: grid; place-items: center; color: var(--color-accent); }
.hv-skill-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hv-skill-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-skill-desc { font-size: var(--text-xs); color: var(--color-muted); }
.hv-skill-badge { flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-success); background: var(--color-success-bg); border-radius: var(--radius-pill); padding: 0 var(--space-2); }

/* Lines from the skill to both chats */
.hv-links { display: block; width: 100%; height: 40px; overflow: visible; }
.hv-links .hv-l0 { display: none; }
.hv-links path { fill: none; stroke: var(--color-faint); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 1; vector-effect: non-scaling-stroke; }

/* The two chats */
.hv-chats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hv-chat { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.hv-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); font-size: var(--text-xs); }
.hv-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.hv-claude .hv-bar { background: var(--mock-claude-wash); }
.hv-claude .hv-dot { background: var(--mock-claude); }
.hv-gpt .hv-dot { background: var(--mock-gpt); }
.hv-app { font-weight: var(--weight-bold); color: var(--color-ink); }
.hv-who { color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); font-size: var(--text-sm); color: var(--color-text); flex: 1 1 auto; }
.hv-chat.hv-claude { background: var(--color-surface); }
.hv-user { align-self: flex-end; margin: 0; max-width: 88%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); background: var(--color-wash); color: var(--color-ink); }
.hv-claude .hv-user { background: var(--mock-claude-bubble); }
/* A tool-use block as AI chats show it: the full width of the reply, one line where it fits, the skill name on its
   own line where it doesn't (a designed break between the label and the name). */
.hv-chip { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-accent-ink); background: var(--color-accent-soft); border: 1px solid var(--color-accent-line); }
.hv-chip svg { flex: none; margin-inline-end: var(--space-1); }
.hv-chip b { font-weight: var(--weight-semibold); white-space: nowrap; }
.hv-reply { display: flex; flex-direction: column; gap: var(--space-1); }
.hv-reply p { margin: 0; }
.hv-r-title { font-weight: var(--weight-bold); color: var(--color-ink); }
.hv-reply b { color: var(--color-ink); font-weight: var(--weight-semibold); margin-inline-end: var(--space-1); }
html[lang="ja"] .hv-reply b { margin-inline-end: 0; }
.hv-input { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--color-muted); }
.hv-claude .hv-input { background: var(--color-surface); }

/* The toast */
.hv-toast { position: absolute; inset-inline-end: var(--space-5); bottom: calc(-1 * var(--space-4)); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-inverse-text); font-size: var(--text-xs); box-shadow: var(--shadow-lg); white-space: nowrap; }
.hv-toast b { color: var(--color-bg); font-weight: var(--weight-semibold); }
.hv-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--tag-green-bg); color: var(--tag-green-fg); }

/* Narrow: the chats stack, the two lines become one */
@container (max-width: 520px) {
  .hv-stage { padding: var(--space-4) var(--space-4) var(--space-8); }
  .hv-chats { grid-template-columns: 1fr; }
  .hv-links { height: 24px; }
  .hv-links .hv-l1, .hv-links .hv-l2 { display: none; }
  .hv-links .hv-l0 { display: inline; }
  .hv-skill-badge { display: none; }
  .hv-toast { inset-inline-end: 16px; }
}

/* Motion: plays once on load. Without motion (or without support) everything simply shows. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hv-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes hv-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hv-draw { from { stroke-dashoffset: 120; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes hv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes hv-toast { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 100% { opacity: 1; transform: none; } }
  @keyframes hv-glow { 0% { box-shadow: 0 0 0 0 var(--color-accent-line); } 100% { box-shadow: 0 0 0 8px transparent; } }
  .hv-play .hv-pod { animation: hv-up var(--dur-slow) var(--ease-out) both; }
  .hv-play .hv-skill { animation: hv-glow 1s var(--ease-out) 1.1s 1 both; }
  .hv-play .hv-toast { animation: hv-toast var(--dur-slow) var(--ease-spring) .7s both; }
  .hv-play .hv-links path { animation: hv-draw .7s var(--ease-out) 1.2s both; }
  .hv-play .hv-chat { animation: hv-up .5s var(--ease-out) .2s both; }
  .hv-play .hv-user { animation: hv-up .35s var(--ease-out) 1.8s both; }
  .hv-play .hv-chip { animation: hv-in .3s var(--ease-out) 2.3s both; }
  .hv-play .hv-reply p { animation: hv-wipe .45s var(--ease-out) both; }
  .hv-play .hv-reply p:nth-child(1) { animation-delay: 2.7s; }
  .hv-play .hv-reply p:nth-child(2) { animation-delay: 3.0s; }
  .hv-play .hv-reply p:nth-child(3) { animation-delay: 3.3s; }
  .hv-play .hv-reply p:nth-child(4) { animation-delay: 3.6s; }
  .hv-play .hv-gpt .hv-user { animation-delay: 1.95s; }
  .hv-play .hv-gpt .hv-chip { animation-delay: 2.45s; }
  .hv-play .hv-gpt .hv-reply p:nth-child(1) { animation-delay: 2.85s; }
  .hv-play .hv-gpt .hv-reply p:nth-child(2) { animation-delay: 3.15s; }
  .hv-play .hv-gpt .hv-reply p:nth-child(3) { animation-delay: 3.45s; }
  .hv-play .hv-gpt .hv-reply p:nth-child(4) { animation-delay: 3.75s; }
}

/* --- Landing pages ---------------------------------------------------------------------------------- */
.lp-hero { display: grid; gap: var(--space-10); padding-top: var(--space-10); align-items: center; }
@media (min-width: 960px) { .lp-hero { grid-template-columns: 5fr 6fr; gap: var(--space-12); padding-top: var(--space-16); } }
.lp-hero h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); margin: var(--space-2) 0 0; }
@media (min-width: 768px) { .lp-hero h1 { font-size: var(--text-5xl); } }
html[lang="ja"] .lp-hero h1 { font-size: var(--text-2xl); line-height: var(--leading-ui); word-break: auto-phrase; }
@media (min-width: 768px) { html[lang="ja"] .lp-hero h1 { font-size: var(--text-4xl); } }
.lp-eyebrow { margin: 0; font-size: var(--text-ui); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); color: var(--color-accent); }
.lp-hero .lead { margin-top: var(--space-5); }
@media (max-width: 639px) { .lp-hero .actions .btn { width: 100%; } }
.lp-panel { margin: 0; padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--color-line); background: var(--color-wash); }
.lp-panel > :first-child { margin-top: 0; }
.lp-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-md); }
.lp-card + .lp-card { margin-top: var(--space-3); }
.lp-label { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); }
html[lang="ja"] .lp-label { text-transform: none; letter-spacing: 0; }

/* Countdown */
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.cd li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-muted); }
.cd li + li { margin-top: 0; }
.cd-n { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.cd-u { font-size: var(--text-xs); line-height: var(--leading-ui); }
.cd-when { margin: var(--space-3) 0 0; font-size: var(--text-ui); color: var(--color-muted); text-align: center; }

/* GPT -> skill */
.conv { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.conv-row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-ui); line-height: var(--leading-ui); }
.conv-k { flex: none; width: 112px; color: var(--color-muted); }
.conv-v { color: var(--color-ink); min-width: 0; }
.conv-arrow { display: flex; justify-content: center; margin: var(--space-2) 0; color: var(--color-accent); }
.skillmd { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-ink); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-body); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Price bars */
.bars { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.bars li { margin: 0; }
.bars li + li { margin-top: 0; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-ui); line-height: var(--leading-ui); }
.bar-top b { color: var(--color-ink); }
.bar-amt { font-weight: var(--weight-bold); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.bar-track { margin-top: var(--space-2); height: 12px; border-radius: var(--radius-pill); background: var(--color-inverse-text); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-faint); }
.bars .us .bar-fill { background: var(--color-accent); }
.bar-note { margin: var(--space-3) 0 0; font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--color-muted); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes bar-grow { from { transform: scaleX(0); } to { transform: none; } }
  .bar-fill { transform-origin: left; animation: bar-grow .8s var(--ease-out) .3s both; }
}

/* Members list (contractors) */
.mem { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.mem li { margin: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); font-size: var(--text-ui); line-height: var(--leading-ui); }
.mem li:first-child { border-top: 0; }
.mem li + li { margin-top: 0; }
.mem-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-on-accent); background: var(--color-accent); }
.mem-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mem-t b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.mem-t span { color: var(--color-muted); font-size: var(--text-sm); }
.mem-tag { flex: none; display: inline-flex; align-items: center; height: 20px; line-height: 1; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-wash); color: var(--color-text); }
.mem-x { flex: none; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-danger); border: 1px solid var(--color-danger-line); background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); }
.mem-off .mem-av { background: var(--color-faint) !important; }
.mem-off b { color: var(--color-muted); text-decoration: line-through; }
.mem-log { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-bg); color: var(--color-danger); font-size: var(--text-sm); line-height: var(--leading-ui); }

/* Tools fan-out (claude-and-chatgpt) */
.tools { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tools li { margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--color-ink); line-height: var(--leading-ui); }
.tools li + li { margin-top: 0; }

/* Sections on an LP */
.lp-points { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .lp-points { grid-template-columns: repeat(3, 1fr); } }
.lp-points li { margin: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.lp-points li + li { margin-top: 0; }
.lp-points h3 { margin: 0; font-size: var(--text-lg); }
.lp-points p { margin: var(--space-2) 0 0; font-size: var(--text-md); line-height: var(--leading-body); }
html[lang="ja"] .lp-points p { line-height: var(--leading-body); }
.lp-final .cta-sure { color: var(--color-ink); }
.lp-final .actions .btn-quiet { margin-inline-start: 0; }
.cd[hidden] { display: none; }
/* Home resources (.rc2): the groups in conversion order (By situation, Free tools, Guides, Compare), one column on a
   phone and two balanced columns from 900px, inside the page's width. Each link is a full-width row with a quiet arrow,
   underlined only on hover and focus; rows are at least 44px tall. */
.resource-cols.rc2 { display: block; margin-top: var(--space-6); columns: 1; column-gap: var(--space-12); }
@media (min-width: 900px) { .resource-cols.rc2 { columns: 2; } }
.rc2 .rc-group { break-inside: avoid; padding-bottom: var(--space-8); }
.rc2 h3 { margin: 0; font-size: var(--text-ui); line-height: var(--leading-ui); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); }
html:not([lang="en"]) .rc2 h3 { text-transform: none; letter-spacing: 0; font-size: var(--text-ui); }
.rc2 .link-list { margin: var(--space-2) 0 0; border-top: 1px solid var(--color-line); }
.rc2 .link-list li { margin: 0; border-bottom: 1px solid var(--color-line); }
.rc2 .link-list a { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; padding-block: var(--space-2); padding-inline: 0 var(--space-8);
  font-size: var(--text-md); line-height: var(--leading-ui); font-weight: var(--weight-medium); color: var(--color-ink); text-decoration: none; }
/* The arrow sits outside the text flow so the hover underline stays under the words only. */
.rc2 .link-list a::after { content: "→"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); color: var(--color-muted); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
[dir=rtl] .rc2 .link-list a::after { transform: translateY(-50%) scaleX(-1); }
.rc2 .link-list a:hover, .rc2 .link-list a:focus-visible { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.rc2 .link-list a:hover::after, .rc2 .link-list a:focus-visible::after { color: var(--color-accent-ink); transform: translateY(-50%) translateX(2px); }
[dir=rtl] .rc2 .link-list a:hover::after, [dir=rtl] .rc2 .link-list a:focus-visible::after { transform: translateY(-50%) translateX(-2px) scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .rc2 .link-list a::after { transition: none; } }
@media (max-width: 639px) { .lp-panel { padding: var(--space-4); } }

/* Before/after (for-team-leads) */
.ba { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.ba li { margin: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); font-size: var(--text-ui); line-height: var(--leading-ui); }
.ba li:first-child { border-top: 0; }
.ba li + li { margin-top: 0; }
.ba b { flex: none; width: 48px; color: var(--color-ink); font-weight: var(--weight-semibold); }
.ba span { color: var(--color-text); min-width: 0; }
.ba-off span { color: var(--tag-orange-fg); }
.ba-on span { color: var(--color-success); font-weight: var(--weight-semibold); }

/* The forwardable proposal */
.memo { margin-top: var(--space-6); max-width: var(--read); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.memo-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-line); }
.memo-bar .lp-label { margin: 0; }
.memo-text { padding: var(--space-5) var(--space-6); font-size: var(--text-md); line-height: var(--leading-body); color: var(--color-ink); white-space: pre-line; overflow-wrap: anywhere; }
html[lang="ja"] .memo-text { line-height: var(--leading-body); }
.copy-status { min-height: 24px; margin-top: var(--space-2); font-weight: var(--weight-semibold); color: var(--color-success); }

/* ROI calculator (for-founders) */
.calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.calc-in label { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-ui); font-weight: var(--weight-semibold); color: var(--color-muted); }
.calc-in input { width: 100%; min-height: 44px; margin: 0; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.calc-out { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.calc-out div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-accent-soft); }
.calc-out div.calc-cost { background: var(--color-wash); }
.calc-out dt { font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--color-text); }
.calc-out dd { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); font-weight: var(--weight-bold); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Home: the skill library block (build.py {{library:section}}) right after the 3 steps. One panel: the count headline,
   ten category tiles with counts, six skills to start with, and Browse all (an outline button: the trial stays the
   page's one filled CTA). */
.lib { margin-top: var(--space-16); padding: var(--space-10) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .lib { padding: var(--space-12) var(--space-10); } }
.lib h2 { margin: 0; }
.lib-sub { margin: var(--space-3) 0 0; max-width: var(--read); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-text); }
html[lang="ja"] .lib-sub, html[lang^="zh"] .lib-sub { line-height: var(--leading-body); }
.lib-cats { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .lib-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lib-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lib-cats li, .lib-pop li { margin: 0; }
.lib-cats li + li, .lib-pop li + li { margin-top: 0; }
.lib-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 100%; min-height: 56px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-ink); text-decoration: none; font-size: var(--text-ui); line-height: var(--leading-ui); font-weight: var(--weight-semibold); }
.lib-cat:hover, .lib-cat:focus-visible { background: var(--color-wash); color: var(--color-ink); }
.lib-cat-name { min-width: 0; overflow-wrap: anywhere; }
.lib-cat-n { flex: none; min-width: 32px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-line);
  font-size: var(--text-sm); line-height: 24px; font-weight: var(--weight-semibold); color: var(--color-muted); text-align: center; font-variant-numeric: tabular-nums; }
.lib-pop-title { margin: var(--space-10) 0 0; font-size: var(--text-lg); }
.lib-pop { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lib-pop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lib-pop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lib-card { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.lib-card:hover, .lib-card:focus-visible { background: var(--color-wash); box-shadow: var(--shadow-sm); }
.lib-card-cat { font-size: var(--text-sm); line-height: var(--leading-ui); font-weight: var(--weight-semibold); color: var(--color-accent-ink); }
.lib-card-title { font-size: var(--text-md); line-height: var(--leading-ui); font-weight: var(--weight-semibold); color: var(--color-ink); }
.lib-card:hover .lib-card-title, .lib-card:focus-visible .lib-card-title { text-decoration: underline; text-underline-offset: 4px; }
.lib-card-sum { font-size: var(--text-ui); line-height: var(--leading-ui); color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-cta { margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.lib-cta-mark { font-size: var(--text-ui); color: var(--color-muted); }
.lib-cta-mark:empty { display: none; }
@media (max-width: 639px) { .lib { padding: var(--space-8) var(--space-4); } .lib-cta .btn { width: 100%; } }

/* The team addendum in one line (home library block and /skills): the plans it's on, then the message. */
.lib-note { margin: 20px 0 0; max-width: var(--read); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px;
  border-radius: 12px; background: var(--tint); border: 1px solid var(--tint-line); font-size: 16px; line-height: 1.5; color: var(--ink); }
.lib-note > span:last-child { flex: 1 1 280px; min-width: 0; }
.lib-note-badge { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--action);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }