/* Beginner guide: the shared C palette and original app screenshots. */
.guide-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding:40px 0 64px; }
.guide-hero h1 { font-size:clamp(40px,4vw,56px); line-height:1.5; }
.guide-lead { color:var(--color-text-muted); font-size:17px; margin:24px 0 30px; }
.guide-download { display:flex; width:fit-content; font-size:14px; margin-top:20px; }
.guide-hero-visual { min-width:0; }
.guide-hero-screens { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; padding:16px 24px 24px; background:var(--color-surface-soft); border-radius:28px; }
.guide-hero-screen { min-width:0; }
.guide-hero-screen:nth-child(2) { margin-top:40px; }
.guide-hero-screen>span { display:block; font-size:12px; font-weight:700; color:var(--color-primary-hover); text-align:center; margin-bottom:12px; }
.guide-hero-screen img,.guide-screen img { width:100%; border:1px solid var(--color-border); border-radius:24px; box-shadow:0 10px 28px var(--color-phone-shadow); }
.guide-hero-visual>figcaption { text-align:center; font-size:12px; color:var(--color-text-muted); margin-top:18px; line-height:1.7; }
.guide-jumps { border-block:1px solid var(--color-border); background:var(--color-surface); }
.guide-jumps>.container { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:20px; }
.guide-jumps a { display:flex; gap:14px; align-items:center; justify-content:center; min-height:44px; font-size:14px; font-weight:700; }
.guide-jumps a+a { border-left:1px solid var(--color-border); }
.guide-jumps a span { color:var(--color-primary); font-size:12px; }
.guide-jumps a:hover { color:var(--color-primary); }
.guide-section-intro { margin-bottom:32px; }
.guide-section-intro>p:not(.eyebrow) { color:var(--color-text-muted); margin-top:20px; }
.guide-permissions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.guide-permissions article,.guide-extra-grid article { background:var(--color-surface); border:1px solid var(--color-border); border-radius:14px; padding:28px; }
.guide-card-mark { display:flex; width:44px; height:44px; align-items:center; justify-content:center; background:var(--color-surface-soft); border-radius:12px; color:var(--color-primary); font-size:23px; margin-bottom:18px; }
.guide-permissions h3 { font-size:18px; }
.guide-permissions p,.guide-extra-grid p { color:var(--color-text-muted); margin-top:14px; font-size:15px; }
.guide-small-note { font-size:13px; color:var(--color-text-muted); margin-top:24px; }
.guide-step { border-top:1px solid var(--color-border); }
.guide-step-tinted,.guide-extras { background:var(--color-surface-soft); }
.guide-step-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:88px; }
.guide-step-copy { min-width:0; }
.guide-step-number { color:var(--color-primary); font-size:13px; font-weight:750; letter-spacing:.12em; margin-bottom:18px; }
.guide-instructions { list-style:decimal; padding:0 0 0 24px; margin:28px 0 0; }
.guide-instructions li { padding-left:12px; margin-top:18px; }
.guide-instructions li::marker { color:var(--color-primary); font-weight:750; }
.guide-instructions strong { font-weight:750; }
.guide-tip { margin-top:30px; padding:22px 24px; background:var(--color-surface-soft); border-left:3px solid var(--color-primary); border-radius:0 10px 10px 0; }
.guide-step-tinted .guide-tip { background:var(--color-surface); }
.guide-tip>strong { font-size:15px; }
.guide-tip p { font-size:14px; color:var(--color-text-muted); margin-top:10px; }
.guide-screen { min-width:0; width:min(100%,250px); margin-inline:auto; }
.guide-screen>a { display:block; border-radius:24px; }
.guide-screen figcaption { text-align:center; margin-top:22px; font-size:13px; line-height:1.7; }
.guide-screen figcaption>strong { display:block; }
.guide-screen figcaption>a { display:inline-flex; align-items:center; gap:8px; color:var(--color-primary-hover); min-height:44px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.guide-paired-grid { grid-template-columns:.92fr 1.08fr; gap:60px; }
.guide-screen-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; min-width:0; }
.guide-screen-pair .guide-screen { max-width:228px; }
.guide-material-note { border-top:1px solid var(--color-border); padding-top:24px; margin-top:40px; color:var(--color-text-muted); font-size:12px; }
.guide-extra-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.guide-next { background:var(--color-surface-soft); }
.guide-next-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.guide-next-links>a { position:relative; display:flex; flex-direction:column; gap:8px; padding:24px 48px 24px 24px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; min-height:108px; }
.guide-next-links>a>span:first-child { color:var(--color-text-muted); font-size:12px; }
.guide-next-links strong { font-size:17px; color:var(--color-primary-hover); }
.guide-next-links>a>span:last-child { position:absolute; right:22px; top:40px; color:var(--color-primary); }
.guide-next-links>a:hover { border-color:var(--color-primary); }
@media(min-width:769px) and (max-width:1050px) {
  .guide-hero-grid { gap:36px; }
  .guide-hero h1 { font-size:42px; }
  .guide-hero-screens { padding:16px; gap:16px; }
  .guide-hero-screen>span { font-size:10px; }
  .guide-step-grid { gap:40px; }
  .guide-permissions { gap:16px; }
  .guide-permissions article { padding:24px 18px; }
  .guide-paired-grid { grid-template-columns:1fr; }
  .guide-paired-grid .guide-step-copy { max-width:640px; }
  .guide-screen-pair { max-width:560px; width:100%; margin:auto; }
}
@media(max-width:768px) {
  .guide-hero-grid { display:flex; flex-direction:column; align-items:stretch; padding:24px 0 36px; gap:36px; }
  .guide-hero h1 { font-size:clamp(34px,6.6vw,48px); }
  .guide-lead { font-size:16px; margin:20px 0 24px; }
  .guide-hero-screens { max-width:480px; margin:auto; gap:16px; padding:18px 16px; border-radius:18px; }
  .guide-hero-screen:nth-child(2) { margin-top:28px; }
  .guide-hero-screen>span { font-size:10px; }
  .guide-hero-screen img { border-radius:14px; }
  .guide-hero-visual>figcaption { font-size:11px; }
  .guide-jumps>.container { grid-template-columns:1fr 1fr; padding-block:12px; gap:8px 0; }
  .guide-jumps a { gap:10px; font-size:12px; }
  .guide-jumps a:nth-child(3) { border-left:0; }
  .guide-section-intro { margin-bottom:24px; }
  .guide-permissions,.guide-extra-grid,.guide-next-links { grid-template-columns:1fr; gap:16px; }
  .guide-permissions article,.guide-extra-grid article { padding:24px; }
  .guide-card-mark { margin-bottom:14px; }
  .guide-step-grid { display:flex; flex-direction:column; align-items:stretch; gap:32px; }
  .guide-step-number { margin-bottom:14px; }
  .guide-instructions { margin-top:24px; }
  .guide-instructions li { margin-top:16px; }
  .guide-tip { padding:20px; margin-top:24px; }
  .guide-screen { width:min(100%,260px); }
  .guide-screen-pair { grid-template-columns:1fr; gap:32px; }
  .guide-screen-pair .guide-screen { max-width:260px; }
  .guide-material-note { margin-top:32px; padding-top:20px; }
  .guide-next-links>a { min-height:96px; }
}