@import url('lrl-tokens.css');

.worked-example {
  color: var(--lrl-ink);
  font-family: var(--lrl-font-sans);
  font-size: var(--lrl-body);
  line-height: var(--lrl-leading-body);
}
.worked-example * { box-sizing: border-box; }
.worked-example :where(a) { color: var(--lrl-cyan-700); }
.worked-example .we-shell {
  width: min(var(--lrl-container), 100%);
  margin: 0 auto;
  padding: var(--lrl-section-y) var(--lrl-gutter);
}
.worked-example h1, .worked-example h2, .worked-example h3 {
  text-wrap: pretty;
  color: var(--lrl-ink);
}
.worked-example h1 {
  font-size: var(--lrl-display);
  font-weight: var(--lrl-weight-display);
  line-height: 1.05;
  letter-spacing: var(--lrl-tracking-display);
  max-width: 860px;
  margin: 20px 0;
}
.worked-example h2 {
  font-size: var(--lrl-h2);
  font-weight: var(--lrl-weight-display);
  line-height: 1.1;
  letter-spacing: var(--lrl-tracking-h2);
  margin: 18px 0 0;
}
.worked-example h3 {
  font-size: var(--lrl-h3);
  font-weight: var(--lrl-weight-strong);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.worked-example p { max-width: 780px; text-wrap: pretty; }
.worked-example .we-lede {
  margin: 16px 0 28px;
  font-size: var(--lrl-lede);
  color: var(--lrl-slate);
}
.worked-example .we-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--lrl-cyan-tint-border);
  border-radius: var(--lrl-radius-pill);
  background: var(--lrl-cyan-tint);
  color: var(--lrl-cyan-700);
  font-size: var(--lrl-kicker);
  font-weight: var(--lrl-weight-strong);
  line-height: 1.2;
  letter-spacing: var(--lrl-tracking-kicker);
  text-transform: uppercase;
}
.worked-example .we-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: we-pulse 2.4s ease-in-out infinite;
}
@keyframes we-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.worked-example .we-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.worked-example .we-card {
  min-width: 0;
  padding: 28px;
  border: var(--lrl-border);
  border-radius: var(--lrl-radius-card);
  background: var(--lrl-white);
  box-shadow: var(--lrl-shadow-card);
}
.worked-example .we-tint {
  background: var(--lrl-mist);
  border-top: var(--lrl-border);
  border-bottom: var(--lrl-border);
}
.worked-example .we-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.worked-example .we-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: var(--lrl-radius-pill);
  background: var(--lrl-cyan);
  color: var(--lrl-ink);
  font-size: var(--lrl-body);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--lrl-shadow-cta-cyan);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.worked-example .we-btn:hover {
  background: var(--lrl-cyan-600);
  color: var(--lrl-ink);
  transform: translateY(-2px);
}
.worked-example .we-btn.secondary {
  background: var(--lrl-white);
  border-color: var(--lrl-line-strong);
  color: var(--lrl-ink);
  box-shadow: var(--lrl-shadow-sm);
}
.worked-example .we-btn.secondary:hover {
  border-color: var(--lrl-cyan-tint-border);
  color: var(--lrl-cyan-700);
}
.worked-example :focus-visible { outline: 2px solid var(--lrl-cyan); outline-offset: 2px; }
.worked-example .we-note { font-size: var(--lrl-body-sm); color: var(--lrl-slate); margin-top: 20px; }
.worked-example details {
  padding: 20px 24px;
  border: var(--lrl-border);
  border-radius: var(--lrl-radius-chip);
  background: var(--lrl-white);
  margin: 14px 0;
}
.worked-example summary { cursor: pointer; font-weight: 800; font-size: 18px; min-height: 44px; }
.worked-example li { margin: 8px 0; }
.worked-example blockquote { margin: 16px 0; padding: 18px 20px; border-top: 3px solid var(--lrl-cyan); background: var(--lrl-cyan-tint); }
.worked-example dl { margin: 0; }
.worked-example dt { font-weight: 800; margin-top: 18px; }
.worked-example dd { margin: 4px 0 0; }
.worked-example .we-gradient {
  background: linear-gradient(100deg, var(--lrl-cyan-700), var(--lrl-cyan), var(--lrl-cyan-700));
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: we-sheen 6s linear infinite;
}
@keyframes we-sheen { to { background-position: 200% center; } }
.worked-example .we-brief { max-width: 880px; }
.worked-example .we-brief > .we-card { margin-top: 28px; }
.worked-example .we-home h2 { max-width: 860px; }
.worked-example .we-home .we-lede { max-width: 760px; }
.worked-example .we-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border: var(--lrl-border);
  border-radius: var(--lrl-radius-panel);
  overflow: hidden;
  background: var(--lrl-mist);
}
.worked-example .we-comparison-part { min-width: 0; padding: 30px 34px; }
.worked-example .we-comparison-part + .we-comparison-part { background: var(--lrl-white); border-left: var(--lrl-border); }
.worked-example .we-step-label { margin: 0 0 12px; font-size: var(--lrl-body-sm); font-weight: var(--lrl-weight-strong); color: var(--lrl-cyan-700); }
.worked-example .we-comparison h3 { margin: 0 0 12px; }
.worked-example .we-comparison-part > p:last-child { margin: 0; color: var(--lrl-slate); }
@media (max-width: 743px) {
  .worked-example .we-comparison-part + .we-comparison-part { border-left: 0; border-top: var(--lrl-border); }
}
@media (max-width: 560px) {
  .worked-example .we-shell { padding-inline: 18px; }
  .worked-example .we-comparison-part, .worked-example .we-card { padding: 24px; }
  .worked-example .we-actions a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .worked-example .we-dot, .worked-example .we-gradient { animation: none; }
  .worked-example .we-btn { transition: none; }
  .worked-example .we-btn:hover { transform: none; }
}