/* Interactive guide (/manual). Scoped under .gd so it cannot leak into the landing page. */
.gd { --g-bg:#f5f1ea; --g-card:#fff; --g-ink:#1c2433; --g-mute:#6b7384; --g-line:#e4ddd0; --g-accent:#b8742a; --g-accent-ink:#fff;
      --g-navy:#1d3557; --g-side:#fff; --g-sel:#2b4a73; --g-shadow:0 10px 30px rgba(20,30,50,.10);
      background:var(--g-bg); color:var(--g-ink); min-height:70vh; }
.gd--dark { --g-bg:#0f141c; --g-card:#171e2a; --g-ink:#e8ecf3; --g-mute:#9aa4b6; --g-line:#273044; --g-side:#141b26; --g-sel:#2f5d8f; --g-shadow:0 10px 30px rgba(0,0,0,.45); }
.gd-in { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }

.gd-hero { position: relative; color:#fff; background: linear-gradient(135deg,#142640 0%,#1d3557 55%,#27466f 100%); padding: 3rem 0 2.6rem; }
.gd-eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#f2d3a5;
      border:1px solid rgba(242,211,165,.45); padding:.35rem .8rem; border-radius:999px; background:rgba(255,255,255,.06); }
.gd-hero h1 { font-size: clamp(1.7rem, 4.4vw, 3rem); line-height:1.12; margin:1rem 0 .6rem; font-weight:800; max-width: 22ch; }
.gd-hero p { margin:0; max-width:56ch; color:#cdd6e6; font-size:1.02rem; }
.gd-theme { position:absolute; right:1rem; top:1rem; width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.08); color:#fff; font-size:1.1rem; cursor:pointer; }

.gd-layout { display:grid; grid-template-columns: 270px 1fr; gap: 1.4rem; padding-top:1.4rem; padding-bottom:3rem; align-items:start; }
.gd-side { position:sticky; top:1rem; background:var(--g-side); border:1px solid var(--g-line); border-radius:16px; padding:1rem; box-shadow:var(--g-shadow); max-height: calc(100vh - 2rem); overflow:auto; }
.gd-side__label { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g-mute); margin-bottom:.6rem; }
.gd-search { width:100%; box-sizing:border-box; padding:.55rem .75rem; border:1px solid var(--g-line); border-radius:10px; background:var(--g-bg); color:var(--g-ink); font:inherit; font-size:.9rem; margin-bottom:.7rem; }
.gd-list { display:flex; flex-direction:column; gap:.2rem; }
.gd-item { display:flex; align-items:center; gap:.65rem; padding:.62rem .7rem; border-radius:10px; color:var(--g-ink); text-decoration:none; font-weight:600; font-size:.93rem; }
.gd-item:hover { background:rgba(184,116,42,.10); }
.gd-item.is-current { background:var(--g-sel); color:#fff; }
.gd-item__ico { width:1.4rem; text-align:center; }
.gd-item__t { flex:1; line-height:1.25; }
.gd-item__ok { width:1.25rem; height:1.25rem; border-radius:50%; background:#d6eadf; color:#1f7a4a; font-size:.7rem; display:none; align-items:center; justify-content:center; }
.gd-item.is-done .gd-item__ok { display:inline-flex; }
.gd-none { color:var(--g-mute); font-size:.9rem; }

.gd--js .gd-sec { display:none; }
.gd--js .gd-sec.is-active { display:block; }
.gd--js .gd-steps { display:none; }
.gd-sec { margin-bottom:2.2rem; }
.gd-sec__head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.gd-sec__head h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 .35rem; line-height:1.15; }
.gd-sec__head p { margin:0; color:var(--g-mute); max-width:62ch; }
.gd-pct { font-weight:700; color:var(--g-mute); font-size:.95rem; }
.gd-bar { height:6px; border-radius:99px; background:var(--g-line); margin:.9rem 0 1.1rem; overflow:hidden; }
.gd-bar i { display:block; height:100%; width:0; background:var(--g-accent); border-radius:99px; transition:width .35s ease; }
.gd-steps { color:var(--g-mute); padding-left:1.2rem; line-height:1.6; }

.gd-stage { display:grid; grid-template-columns: minmax(0,1fr); gap:1rem; align-items:start; }
.gd-shot { position:relative; background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:.6rem; box-shadow:var(--g-shadow); }
.gd-img { position:relative; }
.gd-shot img { display:block; width:100%; height:auto; border-radius:10px; }
.gd-pin { position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:2px solid #fff; background:rgba(29,53,87,.78);
      color:#fff; font:700 .68rem/1 inherit; cursor:pointer; padding:0; z-index:2; }
.gd-pin.is-active { background:var(--g-accent); }
.gd-ring { position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; border:3px solid var(--g-accent); pointer-events:none;
      animation: gdPulse 1.6s ease-out infinite; z-index:1; }
.gd-arrow { position:absolute; z-index:3; pointer-events:none; color:var(--g-accent); filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
      transform: translate(-50%, calc(-100% - 24px)); animation: gdBob 1s ease-in-out infinite; }
.gd-arrow svg { display:block; stroke:#fff; stroke-width:1.5; }
.gd-arrow.is-below { transform: translate(-50%, 24px) rotate(180deg); animation-name: gdBobDown; }
.gd-zoom { position:absolute; right:1rem; bottom:1rem; z-index:4; border:0; border-radius:999px; padding:.4rem .8rem; font:600 .78rem/1 inherit; background:rgba(16,20,28,.82); color:#fff; cursor:pointer; }
@keyframes gdPulse { 0% { transform: scale(.6); opacity:1; } 100% { transform: scale(1.5); opacity:0; } }
@keyframes gdBob { 0%,100% { transform: translate(-50%, calc(-100% - 24px)); } 50% { transform: translate(-50%, calc(-100% - 12px)); } }
@keyframes gdBobDown { 0%,100% { transform: translate(-50%, 24px) rotate(180deg); } 50% { transform: translate(-50%, 12px) rotate(180deg); } }

.gd-card { background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:1.3rem 1.5rem; box-shadow:var(--g-shadow); }
.gd-card p { max-width:70ch; }
.gd-card__nav { max-width:420px; }
.gd-card__step { font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--g-accent); }
.gd-card h3 { font-size:1.45rem; margin:.5rem 0 .5rem; line-height:1.2; }
.gd-card p { margin:0 0 1.1rem; color:var(--g-mute); line-height:1.6; }
.gd-card__nav { display:flex; gap:.6rem; }
.gd-btn { flex:1; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--g-line); background:var(--g-card); color:var(--g-ink); font:600 .95rem/1 inherit; cursor:pointer; }
.gd-btn:disabled { opacity:.45; cursor:default; }
.gd-btn--primary { background:var(--g-accent); border-color:var(--g-accent); color:var(--g-accent-ink); flex:1.4; }
.gd-dots { display:flex; gap:.45rem; margin:1rem 0 .4rem; flex-wrap:wrap; }
.gd-dot { width:.7rem; height:.7rem; border-radius:50%; border:0; padding:0; background:var(--g-line); cursor:pointer; }
.gd-dot.is-past { background:#c9a679; } .gd-dot.is-on { background:var(--g-accent); transform:scale(1.35); }
.gd-tour { margin-top:.6rem; background:none; border:0; color:var(--g-accent); font:600 .88rem/1 inherit; cursor:pointer; padding:.4rem 0; }
.gd-help { display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:1rem 1.2rem; }

@media (max-width: 900px) {
    .gd-layout { grid-template-columns: 1fr; }
    .gd-side { position:static; max-height:none; padding:.7rem; }
    .gd-search { display:none; }
    .gd-side__label { display:none; }
    .gd-list { flex-direction:row; overflow-x:auto; gap:.4rem; padding-bottom:.2rem; -webkit-overflow-scrolling:touch; }
    .gd-item { flex:none; white-space:nowrap; background:var(--g-bg); }
    .gd-item__t { flex:none; }
    .gd-stage { grid-template-columns: 1fr; }
    .gd-card { position:static; }
    .gd-hero { padding: 2.2rem 0 1.8rem; }
    .gd-theme { top:.6rem; }
}
@media (prefers-reduced-motion: reduce) { .gd-arrow, .gd-ring { animation:none; } }