/* A visual, progressively enhanced guide. It is an explanation, never a transaction UI. */
.guide .sheet__head { align-items:center; }
.guide .sheet__head h2 { font-size:clamp(1.65rem, 3vw, 2rem); margin:0; }
.guide__eyebrow { margin:0 0 .25rem; font-size:.61rem; }
.guide__body { gap:1.2rem; }
.guide__intro { font-size:.94rem; line-height:1.6; margin:0; color:var(--ink-2); }
.guide__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; }
.guide__step { border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.4); color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:.65rem; padding:.85rem .4rem; font:700 .84rem var(--sans); cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.guide__step > span { font:600 .63rem var(--sans); opacity:.6; }
.guide__step[aria-selected="true"] { color:var(--ink); border-color:var(--gold); background:var(--gold-pale); box-shadow:inset 0 0 0 1px rgba(168,124,58,.15); }
.guide__step:focus-visible, .guide__details summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.guide__page { display:grid; grid-template-columns:1fr 1.05fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.guide__page[hidden] { display:none; }
.guide--enhanced .guide__page { animation:guide-page-in .28s ease-out; }
.guide__visual { background:linear-gradient(145deg,#eee6d5,#f8f3e8); min-height:325px; padding:1.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; position:relative; overflow:hidden; }
.guide__visual::before { content:''; position:absolute; inset:0; background-image:radial-gradient(#a9916550 .6px,transparent .6px); background-size:13px 13px; opacity:.25; pointer-events:none; }
.guide__visual > * { position:relative; }
.guide__lesson { align-self:center; padding:1.7rem; min-width:0; }
.guide__kicker { display:block; font:800 .61rem/1.65 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#84622c; }
.guide__lesson h3 { font-size:1.6rem; line-height:1.22; margin:.5rem 0 .8rem; }
.guide__lesson p, .guide__extra p { font-size:.82rem; line-height:1.75; color:var(--ink-2); margin:0; }
.guide__lesson strong, .guide__extra strong { color:var(--ink); }
.guide__tip { margin-top:1.2rem; padding:1rem 0 0; border-top:1px solid var(--line); color:var(--ink-2); font-size:.73rem; line-height:1.75; }
.guide__wallet { border:1px solid #ad95694a; padding:.8rem 1.4rem; background:#fffaf1; border-radius:14px; text-align:center; box-shadow:0 8px 24px #45341809; }
.guide__wallet svg { width:38px; height:34px; display:block; margin:0 auto .2rem; fill:none; stroke:#8c6a35; stroke-width:2; }
.guide__wallet strong { font-size:1rem; }
.guide__wallet small, .guide__pack-price small { display:block; color:#766e5f; font-size:.61rem; margin-top:.22rem; }
.guide__arrow { transform:rotate(90deg); color:#b39970; font-size:1.4rem; line-height:1; }
.guide__mini-table { display:flex; gap:.6rem; width:100%; justify-content:center; }
.guide__mini-slot { display:flex; flex-direction:column; align-items:center; width:31%; }
.guide__mini-slot svg { width:100%; max-width:95px; }
.guide__mini-slot span { font-size:.55rem; font-weight:700; color:#766e5f; text-align:center; white-space:nowrap; }
.guide__mini-slot--company svg { filter:drop-shadow(0 6px 3px #7b5a2813); }
.guide__emission { text-align:center; }
.guide__emission strong { display:block; font:600 2.3rem/1.2 var(--sans); margin:.2rem 0; color:#453418; }
.guide__emission > span:last-child { font-size:.65rem; color:#736650; }
.guide__share { display:flex; align-items:center; gap:1rem; margin:.4rem 0; }
.guide__pie { flex:0 0 96px; height:96px; border-radius:50%; background:conic-gradient(from -35deg,#bd934e 0deg 72deg,#dcd3c1 72deg 360deg); box-shadow:inset 0 0 0 1px #9c82422b,0 8px 10px #4e3e1910; position:relative; }
.guide__pie::after { content:''; position:absolute; inset:22px; border-radius:50%; background:#f2ecde; }
.guide__legend { display:flex; align-items:center; gap:.4rem; font-size:.61rem; font-weight:700; margin:.6rem 0; }
.guide__legend i { width:8px; height:8px; background:#bd934e; border-radius:3px; }
.guide__legend--rest i { background:#d1c7b3; }
.guide__share small { display:block; max-width:135px; font-size:.53rem; line-height:1.7; color:#857865; }
.guide__formula { background:#fffaf1; border:1px solid #d9ceb9; border-radius:7px; padding:.65rem .75rem; font-size:.63rem; font-weight:700; text-align:center; }
.guide__claim-total { display:flex; flex-direction:column; align-items:center; }
.guide__claim-total strong { color:#49371a; font:600 2.4rem/1.15 var(--sans); }
.guide__claim-total span { font-size:.62rem; color:#786a56; margin-top:.3rem; }
.guide__visual--claim { gap:.65rem; }
.guide__claim-branches { width:55%; height:24px; display:flex; }
.guide__claim-branches span { width:50%; border-top:1px solid #b89d70; border-left:1px solid #b89d70; border-radius:7px 0 0; }
.guide__claim-branches span+span { border-left:0; border-right:1px solid #b89d70; border-radius:0 7px 0 0; }
.guide__claim-split { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:.6rem; }
.guide__claim-split > div { display:flex; flex-direction:column; align-items:center; background:#fffaf1; border:1px solid #b59a713d; padding:.8rem .3rem; border-radius:11px; }
.guide__claim-split > div:first-child { background:#e9eee0; border-color:#becba9; }
.guide__claim-split strong { font:600 1.85rem var(--sans); color:#536140; }
.guide__claim-split > div+div strong { color:#8b744e; }
.guide__claim-split span { font-size:.65rem; font-weight:800; }
.guide__claim-split small { font-size:.57rem; color:#81796b; margin-top:.3rem; }
.guide__fee-pill { font-size:.58rem; color:#796b54; text-align:center; margin-top:.35rem; }
.guide__pack-price { text-align:center; }
.guide__pack-price strong { font:600 2rem var(--sans); color:#514022; }
.guide__pack-price strong span { font:700 .75rem var(--sans); }
.guide__tier-preview { display:flex; gap:.15rem; width:100%; margin:.25rem 0; }
.guide__tier-preview svg { width:25%; filter:drop-shadow(0 5px 4px #5c482514); }
.guide__capacity { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; padding-top:1rem; border-top:1px solid #d5c9b2; }
.guide__capacity > div { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.guide__capacity strong { font:600 1.75rem var(--sans); }
.guide__capacity span { font-size:.54rem; font-weight:700; color:#73654e; white-space:nowrap; }
.guide__capacity b { color:#b29b77; font-weight:400; }
.guide__navigation { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.guide__navigation[hidden] { display:none; }
.guide__navigation > span { font-size:.66rem; color:var(--ink-3); }
.guide__navigation .btn { font-size:.68rem; min-width:90px; padding:.65rem .95rem; }
.guide__navigation .btn:disabled { opacity:.4; cursor:default; }
.guide__extras { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.4rem; }
.guide__extra { border:1px solid var(--line); border-radius:15px; padding:1.25rem; background:#fffcf540; }
.guide__extra-icon { width:34px; height:34px; color:#8a703f; margin-bottom:.7rem; }
.guide__extra-icon svg { width:100%; height:100%; fill:var(--gold-pale); stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }
.guide__extra h3 { font-size:1.23rem; line-height:1.3; margin:.4rem 0 .65rem; }
.guide__extra p { font-size:.75rem; }
.guide__extra small { display:block; font-size:.64rem; line-height:1.8; color:var(--ink-3); }
.guide__mini-flow, .guide__boost-line { display:flex; align-items:center; justify-content:space-between; gap:.35rem; margin:.9rem 0; padding:.65rem 0; border-block:1px solid var(--line); font-size:.59rem; font-weight:800; color:#836a3e; }
.guide__mini-flow b { color:#bba77f; font-weight:400; }
.guide__boost-line > span+span { border-left:1px solid var(--line); padding-left:.45rem; }
.guide__details { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.guide__details + .guide__details { margin-top:-.5rem; }
.guide__details summary { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.95rem 1.1rem; font-size:.76rem; font-weight:800; cursor:pointer; list-style:none; }
.guide__details summary::-webkit-details-marker { display:none; }
.guide__details summary > span { color:var(--gold); font-size:1.2rem; line-height:1; transition:transform .2s; }
.guide__details[open] summary > span { transform:rotate(45deg); }
.guide__details-body { padding:0 1.1rem 1.1rem; font-size:.72rem; color:var(--ink-2); line-height:1.8; }
.guide__details-body > p { margin:.75rem 0 0; }
.guide__details .tiers caption { text-align:left; font-size:.67rem; margin:.25rem 0 .65rem; color:var(--ink-3); }
.guide__details .tiers { font-size:.72rem; }
.guide__details .tiers th, .guide__details .tiers td { padding:.6rem .3rem; }
.guide__rules { display:grid; gap:.85rem; }
.guide__rules strong { color:var(--ink); font-size:.72rem; }
.guide__rules p { margin:.3rem 0 0; }
.guide__value-note { border-top:1px solid var(--line); padding-top:.75rem; }
@keyframes guide-page-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:620px) {
  .guide__page { grid-template-columns:1fr; }
  .guide__visual { min-height:245px; padding:1.1rem 1.35rem; }
  .guide__visual--entry { min-height:260px; gap:.7rem; }
  .guide__mini-table { max-width:290px; }
  .guide__lesson { padding:1.2rem; }
  .guide__lesson h3 { font-size:1.4rem; }
  .guide__extras { grid-template-columns:1fr; }
  .guide__step { gap:.3rem; padding:.75rem .3rem; font-size:.68rem; border-radius:9px; }
  .guide__step > span { font-size:.5rem; }
  .guide__intro { font-size:.8rem; }
  .guide__emission strong { font-size:1.95rem; }
  .guide__visual--mining { gap:.65rem; }
  .guide__pie { flex-basis:75px; height:75px; }
  .guide__pie::after { inset:17px; }
  .guide__share { margin:0; }
  .guide__tier-preview { max-width:270px; }
  .guide__capacity { max-width:290px; }
  .guide__claim-split { max-width:290px; }
  .guide__claim-branches { max-width:160px; }
  .guide__navigation .btn { min-width:68px; font-size:.63rem; padding:.6rem .75rem; }
  .guide__navigation > span { font-size:.59rem; }
}
@media(prefers-reduced-motion:reduce) {
  .guide--enhanced .guide__page { animation:none; }
  .guide__step, .guide__details summary > span { transition:none; }
}
