/* Friend of Carl pages: layout only. Fonts, sizes, colors, buttons and the container come from the site tokens in
   /design-system.css, so these pages read as the same site as every other page. */
html { scroll-behavior:smooth; }
body.friend-page { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-sans); line-height:var(--lh-body); }
.friend-page * { box-sizing:border-box; }
.friend-page a { color:inherit; text-underline-offset:4px; }
.friend-page a:focus-visible { outline:var(--focus-ring); outline-offset:5px; }
.friend-page .eyebrow { display:block; color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.friend-page .hero { padding:var(--space-5) 0 var(--space-4); display:grid; grid-template-columns:1fr; gap:var(--space-3); align-items:center; }
.friend-page h1 { margin:var(--space-2) 0 var(--space-3); }
.friend-page .hero .intro { max-width:620px; font-size:var(--fs-lg); line-height:1.65; color:var(--muted); margin:0; }
.friend-page .guide { padding:var(--space-4) 0 var(--space-1); border-top:1px solid var(--ink); }
.friend-page h2 { max-width:620px; margin:0 0 var(--space-4); }
.friend-page .entry { display:grid; grid-template-columns:48px 1fr; gap:var(--space-2); padding:var(--space-4) 0; border-top:1px solid var(--line); }
.friend-page .number { font-size:var(--fs-xs); color:var(--accent); font-weight:700; padding-top:8px; }
.friend-page h3 { margin:0 0 var(--space-2); font-weight:400; }
.friend-page .entry p { max-width:680px; font-size:var(--fs-md); line-height:1.7; color:var(--muted); margin:0 0 var(--space-2); }
.friend-page .entry a, .friend-page .note a { display:inline-flex; gap:12px; align-items:center; min-height:var(--tap); font-size:var(--fs-md); font-weight:400; text-decoration:underline; text-underline-offset:7px; }
.friend-page .note { margin:var(--space-3) 0 var(--space-5); padding:var(--space-4); background:var(--surface); border-radius:var(--radius); }
.friend-page .note h3 { font-size:var(--fs-xl); }
.friend-page .note p { font-size:var(--fs-md); line-height:1.7; color:var(--muted); margin:0; max-width:690px; }
.friend-page .note a { margin-top:var(--space-1); }
.friend-page .contact-copy { max-width:640px; margin-left:0; padding:var(--space-5) 0 var(--space-5); }
.friend-page .contact-copy>p { font-size:var(--fs-lg); line-height:1.65; color:var(--muted); }
.friend-page form { display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.friend-page .field { display:grid; gap:var(--space-1); }
.friend-page label { font-size:var(--fs-md); font-weight:700; }
.friend-page :is(input, textarea, button) { font:inherit; }
.friend-page :is(input, textarea) { width:100%; border:1px solid #777; padding:13px; background:#fff; color:var(--ink); }
.friend-page textarea { min-height:160px; resize:vertical; }
.friend-page button[type="submit"] { justify-self:start; margin-top:0; }
@media(max-width:760px) {
  .friend-page .hero { padding:var(--space-4) 0 var(--space-3); }
  .friend-page .entry { gap:var(--space-1); grid-template-columns:30px 1fr; }
  .friend-page .note { padding:var(--space-3); margin-bottom:var(--space-4); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Sample onboarding comes first; the original introduction remains below. */
.friend-page .sample-start { padding-block:var(--space-4); }
.friend-page .sample-heading h1 { margin-block:var(--space-2); }
.friend-page .sample-intro { font-size:var(--fs-xl); line-height:var(--lh-body); margin:0; max-width:46rem; }
.friend-page .sample-identity { display:grid; grid-template-columns:1fr 2fr; gap:var(--space-4); padding-block:var(--space-3); margin-top:var(--space-4); border-top:1px solid var(--line); }
.friend-page .sample-identity h2 { font-size:var(--fs-h3); margin:0; }
.friend-page .sample-identity p { margin:0 0 var(--space-1); max-width:46rem; }
.friend-page .sample-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.friend-page .sample-step { padding:var(--space-3); background:var(--surface); border-top:1px solid var(--ink); }
.friend-page .sample-step h2 { font-size:var(--fs-h2); margin:0 0 var(--space-3); }
.friend-page .sample-step h3 { font-size:var(--fs-xl); margin:0 0 var(--space-3); font-weight:400; }
.friend-page .step-value { display:block; font-size:var(--fs-h1); line-height:var(--lh-tight); margin-bottom:var(--space-1); }
.friend-page .sample-step p { margin:0; color:var(--muted); }
.friend-page .sample-step p + p { margin-top:var(--space-2); }
.friend-page .sample-next { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding-block:var(--space-4); }
.friend-page .sample-next h2 { margin:var(--space-2) 0; }
.friend-page .sample-next p { margin:0; color:var(--muted); }
.friend-page .sample-next .btn { flex-shrink:0; margin:0; color:var(--bg); }
.friend-page .sample-safety { font-size:var(--fs-sm); color:var(--muted); max-width:46rem; margin:0; }
.friend-page .sample-background { padding-top:var(--space-4); border-top:1px solid var(--ink); }
.friend-page .sample-background + .hero { padding-top:var(--space-3); }
.friend-page .sample-background + .hero h2 { margin:var(--space-2) 0 var(--space-3); }
@media(max-width:760px) {
  .friend-page .sample-identity { grid-template-columns:1fr; gap:var(--space-2); }
  .friend-page .sample-steps { grid-template-columns:1fr; }
  .friend-page .sample-step { padding:var(--space-3); }
  .friend-page .sample-step h2 { margin-top:var(--space-2); }
  .friend-page .step-value { display:inline; margin-right:var(--space-1); }
  .friend-page .sample-next { flex-direction:column; align-items:flex-start; }
  .friend-page .sample-next .btn { width:100%; }
}