/* Visual guide: real app captures, shared ForgePlay type and ember palette. */
.guide-main { padding-top:48px; }
.guide-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:end; padding-bottom:44px; }
.guide-hero h1 { margin-top:15px; font-size:clamp(34px,4.1vw,55px); line-height:1.2; letter-spacing:-.05em; }
.guide-hero h1 span { display:block; }
.guide-hero h1 span:last-child { color:var(--fp-accent); }
.guide-intro { max-width:460px; padding-bottom:5px; }
.guide-intro>p:first-child { font-size:16px; line-height:1.8; color:#c3c7cc; }
.guide-platform { display:flex; gap:12px; margin-top:17px!important; font-size:11px; color:var(--fp-soft); letter-spacing:.04em; }
.guide-section-label { border-top:1px solid var(--fp-line); display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:23px 20px; }
.guide-section-label h2 { font-size:15px; letter-spacing:-.02em; }
.guide-section-label>span { color:var(--fp-soft); font-size:11px; flex-shrink:0; }
.guide-tabs { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--fp-line); border-radius:10px; padding:5px; gap:5px; margin-bottom:24px; background:#15181d; }
.guide-tabs button { display:flex; align-items:center; gap:13px; text-align:left; padding:14px 18px; min-height:54px; background:transparent; border:1px solid transparent; color:#b4b9c2; border-radius:7px; font-size:14px; }
.guide-tabs button>span:first-child { font:11px ui-monospace,monospace; color:#808995; }
.guide-tabs button[aria-selected="true"] { color:#ffe0d1; border-color:#594238; background:#302521; }
.guide-tabs button[aria-selected="true"]>span:first-child { color:var(--fp-accent); }
.guide-tabs button:hover { color:var(--fp-text); }
.guide-stage { display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:28px; align-items:start; }
.guide-visual { min-width:0; position:sticky; top:95px; }
.guide-image-shell { position:relative; border:1px solid #45413d; border-radius:18px; overflow:hidden; background:#151719; isolation:isolate; }
.guide-image-shell>img { width:100%; height:auto; }
.guide-highlight { position:absolute; border:2px solid #ffc6aa; background:rgb(255 165 135 / .065); border-radius:8px; pointer-events:none; transition:top .25s,left .25s,width .25s,height .25s; box-shadow:0 0 0 1px rgb(0 0 0 / .5); }
.guide-pin { position:absolute; width:29px; height:29px; padding:0; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid #b78e77; border-radius:50%; background:#221c19; color:#ffdecf; font:650 12px "Avenir Next",sans-serif; box-shadow:0 0 0 4px rgb(10 10 10 / .5); z-index:2; transition:background .18s,scale .18s; }
.guide-pin[aria-pressed="true"] { background:#ffd3bb; color:#23140f; border-color:#ffd3bb; }
.guide-pin:hover { scale:1.12; }
.guide-pin::after { content:""; position:absolute; inset:-10px; border-radius:50%; }
.guide-image-footer { display:flex; gap:15px; align-items:center; justify-content:space-between; padding:14px 2px; font-size:10px; color:#9b9fa6; }
.guide-zoom { border:0; background:none; padding:4px 0; color:#e3d3ca; display:flex; align-items:center; gap:10px; font-size:11px!important; flex-shrink:0; min-height:36px; }
.guide-explanation { padding:10px 0 0; }
.guide-counter { color:#7d8791; font:11px ui-monospace,monospace; letter-spacing:.06em; }
.guide-counter>span { color:var(--fp-accent); }
.guide-explanation h3 { font-size:25px; line-height:1.4; margin-top:12px; }
.guide-instruction { font-size:11px; line-height:1.8; color:var(--fp-soft); margin-top:12px!important; }
.guide-point-list { padding:0; margin:17px 0 0; list-style:none; }
.guide-point-list li { border-top:1px solid var(--fp-line); }
.guide-point { display:grid; grid-template-columns:23px minmax(0,1fr); gap:10px; width:100%; padding:15px 4px; text-align:left; background:none; border:0; color:#aeb5bf; font-size:13px!important; line-height:1.55; }
.guide-point>span:first-child { display:grid; place-items:center; align-self:start; height:22px; border:1px solid #3d444e; border-radius:50%; font-size:10px; }
.guide-point[aria-expanded="true"] { color:#ffe0d0; }
.guide-point[aria-expanded="true"]>span:first-child { background:#f4b496; color:#26170f; border-color:#f4b496; }
.guide-point-copy { color:#c0c5cd; font-size:12px; line-height:1.9; padding:0 2px 19px 37px; }
.guide-point-copy a { text-decoration:underline; }
.guide-step-nav { display:flex; justify-content:space-between; border-top:1px solid var(--fp-line); padding-top:18px; gap:8px; }
.guide-step-nav button { display:flex; align-items:center; gap:8px; padding:7px 0; color:#cec8c4; background:transparent; border:0; font-size:11px; min-height:44px; }
.guide-step-nav button:disabled { opacity:.3; cursor:default; }
.guide-capture-note { margin-top:16px!important; font-size:10px; line-height:1.8; color:#8d959f; }
.guide-error { padding:20px; border:1px solid #9f6252; color:#ffd3bb; }
.guide-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; padding:26px; margin-top:34px; border-block:1px solid var(--fp-line); background:#13161a; font-size:12px; color:#b5b8bf; }
.guide-flow>[aria-hidden] { color:#80746a; }
.guide-flow strong { color:var(--fp-accent); font-weight:500; }
.guide-faq { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; padding-block:72px; }
.guide-faq h2 { font-size:34px; line-height:1.35; margin-block:10px 20px; }
.guide-faq details { border-top:1px solid var(--fp-line); }
.guide-faq details:last-child { border-bottom:1px solid var(--fp-line); }
.guide-faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; padding:21px 0; font-size:15px; color:#dededc; }
.guide-faq summary::-webkit-details-marker { display:none; }
.guide-faq summary::after { content:"+"; color:var(--fp-accent); font-size:19px; }
.guide-faq details[open] summary::after { content:"−"; }
.guide-faq details p { padding:0 28px 22px 0; font-size:13px; line-height:1.9; color:var(--fp-muted); }
.guide-finish { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:38px; background:#1a1c20; border:1px solid #383a3f; border-radius:13px; margin-bottom:30px; }
.guide-finish h2 { font-size:29px; line-height:1.4; margin-top:8px; }
.guide-finish p:not(.fp-eyebrow) { margin-top:12px; font-size:13px; color:var(--fp-muted); }
.guide-download { display:flex; align-items:center; gap:22px; min-height:48px; padding:11px 20px; background:#f1ede7; color:#201e1b; border-radius:8px; font-size:13px; flex-shrink:0; font-weight:600; }
.guide-download:hover { background:#ffe0cd; }
.guide-lightbox { padding:0; border:1px solid #474a4e; border-radius:14px; color:#f1f0ed; background:#16191e; width:fit-content; max-width:calc(100vw - 38px); max-height:calc(100dvh - 38px); }
.guide-lightbox::backdrop { background:rgb(0 0 0 / .86); backdrop-filter:blur(8px); }
.guide-lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:13px 18px; font-size:13px; }
.guide-lightbox-bar button { color:inherit; background:#282c32; border:1px solid #474b52; border-radius:6px; padding:7px 12px; font-size:12px; cursor:pointer; }
.guide-lightbox>img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 108px); object-fit:contain; }
.guide-teaser { display:grid; grid-template-columns:1fr .95fr; gap:35px; align-items:center; margin-top:48px; border:1px solid #3f3833; border-radius:13px; background:#18191b; overflow:hidden; padding:32px 38px; }
.guide-teaser h2 { font-size:30px; line-height:1.3; margin-top:10px; }
.guide-teaser p:not(.fp-eyebrow) { font-size:13px; color:var(--fp-muted); margin:13px 0 22px; max-width:390px; }
.guide-teaser>a:last-child { display:block; height:216px; overflow:hidden; border-radius:10px; border:1px solid #4b4b48; }
.guide-teaser img { width:100%; height:auto; transition:transform .3s; }
.guide-teaser>a:last-child:hover img { transform:scale(1.025); }
.guide-home-link { display:inline-block; margin-top:15px; color:#decabe; font-size:12px; }
@media(max-width:1000px) {
  .guide-stage { grid-template-columns:minmax(0,1fr) 270px; gap:22px; }
  .guide-hero { gap:36px; }
  .guide-tabs button { font-size:12px; padding:12px; }
  .guide-explanation h3 { font-size:21px; }
  .guide-pin { width:26px; height:26px; }
}
@media(max-width:780px) {
  .guide-main { padding-top:30px; }
  .guide-hero { grid-template-columns:1fr; gap:22px; padding-bottom:25px; }
  .guide-intro { max-width:590px; }
  .guide-intro>p:first-child { font-size:14px; }
  .guide-stage { grid-template-columns:1fr; gap:8px; }
  .guide-visual { position:relative; top:auto; }
  .guide-explanation { padding:5px 5px 0; }
  .guide-explanation h3 { max-width:600px; }
  .guide-instruction { margin-top:7px!important; }
  .guide-point-list { margin-top:12px; }
  .guide-point-copy { font-size:13px; }
  .guide-faq { grid-template-columns:1fr; gap:24px; padding-block:48px; }
  .guide-faq h2 { font-size:29px; }
  .guide-finish { flex-direction:column; align-items:start; padding:28px; }
  .guide-teaser { padding:26px; grid-template-columns:1fr; gap:20px; }
  .guide-teaser>a:last-child { max-height:240px; height:auto; }
}
@media(max-width:460px) {
  .guide-tabs { gap:2px; padding:4px; }
  .guide-tabs button { flex-direction:column; align-items:flex-start; gap:4px; padding:10px 8px; font-size:11px; }
  .guide-pin { width:23px; height:23px; font-size:10px; box-shadow:0 0 0 3px rgb(0 0 0 / .55); }
  .guide-image-shell { border-radius:10px; }
  .guide-image-footer { font-size:9px; }
  .guide-section-label { align-items:start; gap:12px; }
  .guide-section-label h2 { font-size:13px; }
  .guide-section-label>span { font-size:9px; }
  .guide-flow { gap:10px; padding:20px 10px; font-size:10px; }
}