/* Client guide: readable, responsive, and consistent with the cosmic homepage. */
.guide-nav-wrap { padding: 0 max(1.25rem, 5vw); background: var(--black); }
.guide-nav-wrap .nav-shell { max-width: 1120px; margin: auto; padding-bottom: 1.6rem; }
.guide-main { padding: 4rem max(1.25rem, 5vw) 5rem; background: radial-gradient(ellipse 760px 550px at 95% 0%, rgba(143,43,255,.2), transparent), var(--black); }
.guide-article { max-width: 1120px; margin: auto; }
.guide-page-heading { max-width: 920px; margin: 0 0 2rem; }
.guide-eyebrow { margin: 0 0 1rem; color: var(--yellow); font: 600 .78rem/1.5 'Fredoka', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.guide-page-heading h1 { margin: 0; font: 400 clamp(3rem, 6.5vw, 6.8rem)/.98 'DM Serif Display', Georgia, serif; letter-spacing: -.035em; }
.guide-content { max-width: 920px; font-size: 1.1rem; line-height: 1.75; color: #e8dfec; }
.guide-content p { margin: 0 0 1.1rem; }
.guide-content strong { font-weight: 800; color: var(--white); }
.guide-content code { color: var(--yellow); font-family: inherit; font-size: 1em; overflow-wrap: anywhere; }
.guide-content a:not(.cosmic-button) { text-decoration: underline; text-underline-offset: .25em; }
.guide-content a:hover { color: var(--yellow); }
.guide-content a:focus-visible, .guide-footer a:focus-visible, .guide-nav-wrap a:focus-visible, .guide-nav-wrap button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.guide-content :is(h2, h3) { color: var(--white); }
.guide-content h2 { margin: 0 0 1.3rem; font: 400 clamp(1.8rem, 3.2vw, 3rem)/1.13 'DM Serif Display', Georgia, serif; letter-spacing: -.02em; }
.guide-content h3 { margin: 0 0 .6rem; font: 600 .84rem/1.5 'Fredoka', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.guide-content ol, .guide-content ul { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.guide-content li { padding-left: .3rem; margin-bottom: .7rem; }
.guide-content li::marker { color: var(--yellow); font-weight: 800; }
.guide-content li ul { margin-top: .7rem; }
.guide-content img { max-width: 100%; height: auto; }
.guide-lead { font-size: 1.2rem; max-width: 790px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; margin: 1.8rem 0 1.1rem; }
.guide-actions .cosmic-button { min-height: 52px; color: var(--white); }
.guide-download { padding: .6rem 0; color: var(--yellow); font-weight: 800; }
.guide-time { color: #bcaec8; font-size: .9rem; }
.guide-store-note, .guide-price-note { font-size: .9rem; color: #c6b8d1; overflow-wrap: anywhere; }
.guide-ready { margin: 2.8rem 0 1.6rem; padding: 1.8rem; background: #100a17; border: 1px solid #36243f; border-radius: 1.5rem; }
.guide-ready h2 { font: 600 1.45rem/1.2 'Fredoka', sans-serif; color: var(--yellow); }
.guide-ready ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem 2rem; margin-bottom: 0; }
.guide-ready li { font-size: 1rem; }
.guide-checklist { margin: 1.6rem 0 4rem; padding: 1.8rem; border-radius: 1.5rem; border: 1px solid #493059; background: linear-gradient(135deg, #1a1026, #0e0913); }
.guide-checklist-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.guide-checklist-heading h2 { margin-bottom: 0; font: 600 1.5rem/1.25 'Fredoka', sans-serif; }
.guide-progress-text { color: var(--yellow); font: 600 .85rem/1.3 'Fredoka', sans-serif; white-space: nowrap; }
.guide-progress { display: block; width: 100%; height: 8px; margin: 1.2rem 0; border: 0; border-radius: 999px; overflow: hidden; background: #38253f; color: var(--yellow); accent-color: var(--yellow); }
.guide-progress::-webkit-progress-bar { background: #38253f; border-radius: 999px; }
.guide-progress::-webkit-progress-value { background: var(--yellow); border-radius: 999px; }
.guide-progress::-moz-progress-bar { background: var(--yellow); border-radius: 999px; }
.guide-checklist-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .3rem 1.4rem; }
.guide-checklist-row { display: flex; align-items: center; border-bottom: 1px solid #36283e; }
.guide-checklist-row label { display: flex; align-items: flex-start; gap: .8rem; flex: 1; min-width: 0; cursor: pointer; padding: .85rem 0; font-size: .96rem; line-height: 1.45; }
.guide-checklist-row input { flex-shrink: 0; width: 21px; height: 21px; margin: .12rem 0 0; accent-color: var(--yellow); cursor: pointer; }
.guide-checklist-row input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.guide-checklist-row.is-complete label span { color: #bcafc7; text-decoration: line-through; }
.guide-checklist-row a { display: grid; place-items: center; flex-shrink: 0; min-width: 44px; min-height: 44px; font-size: 1.25rem; color: var(--purple-light); text-decoration: none!important; }
.guide-checklist-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.guide-checklist-bottom p { margin: 0; color: #bfb0cd; font-size: .82rem; }
.guide-reset { min-height: 44px; padding: .5rem .8rem; border-radius: 999px; border: 1px solid #795587; color: var(--white); background: transparent; cursor: pointer; font-size: .86rem; }
.guide-reset[hidden] { display: none; }
.guide-reset:hover { border-color: var(--yellow); color: var(--yellow); }
.guide-reset:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.quiel-guide-step { padding: 3rem 0; border-top: 1px solid #372740; scroll-margin-top: 1.5rem; }
.quiel-guide-step > .guide-eyebrow { margin-bottom: .8rem; }
.guide-tip { margin: 1.4rem 0; padding: 1.15rem 1.4rem; border-left: 3px solid var(--purple-light); border-radius: 0 1rem 1rem 0; background: #120c1a; }
.guide-tip:nth-of-type(even) { border-left-color: var(--yellow); }
.guide-tip h3 { color: var(--yellow); }
.guide-tip p:last-child { margin-bottom: 0; }
.guide-screenshot { margin: 2rem 0 1rem; padding: .45rem; border: 1px solid #50305f; border-radius: 1.1rem; background: linear-gradient(120deg, #321345, #4d0b1b); }
.guide-screenshot img { display: block; width: 100%; height: auto; border-radius: .7rem; background: white; }
.guide-screenshot figcaption { padding: .75rem .55rem .35rem; color: #dfd0e8; font-size: .88rem; line-height: 1.5; text-align: left; }
.guide-cart-table { width: 100%; margin: 1.8rem 0; overflow-x: auto; }
.guide-cart-table table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: .98rem; line-height: 1.55; }
.guide-cart-table th, .guide-cart-table td { padding: 1rem; text-align: left; vertical-align: top; border: 1px solid #49334f; }
.guide-cart-table th { color: var(--yellow); background: #1d1127; font: 600 .8rem/1.5 'Fredoka', sans-serif; letter-spacing: .06em; }
.guide-cart-table td { background: #0e0912; }
.guide-cart-table figcaption { font-size: .85rem; margin-top: .6rem; color: #c6b8d1; }
.guide-estimates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.guide-estimate { padding: 1.5rem; border: 1px solid #573566; border-radius: 1.2rem; background: #120b1a; }
.guide-estimate:last-child { border-color: var(--yellow); }
.guide-estimate h3 { color: var(--yellow); }
.guide-estimate .guide-price { margin: .25rem 0 .65rem; color: var(--white); font: 400 2.8rem/1.2 'DM Serif Display', Georgia, serif; }
.guide-estimate p:last-child { margin-bottom: 0; font-size: .96rem; }
.guide-complete { margin: 1.5rem 0 3rem; padding: 2.2rem; border-radius: 1.5rem; border: 1px solid #573566; background: radial-gradient(ellipse at right top, #4a126a, transparent 70%), #130b1b; }
.guide-complete h2 { font-size: 2.4rem; }
.guide-complete a { color: var(--yellow); overflow-wrap: anywhere; }
.guide-help { margin: 3rem 0; }
.guide-faq { margin-bottom: .8rem; border: 1px solid #3c2947; border-radius: 1rem; padding: 0 1.3rem; background: #110b17; }
.guide-faq summary { position: relative; cursor: pointer; padding: 1.15rem 1.5rem 1.15rem 0; font-weight: 800; line-height: 1.5; color: var(--white); }
.guide-faq summary::marker { color: var(--yellow); }
.guide-faq summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.guide-faq p { margin-top: .2rem; padding-bottom: .2rem; font-size: 1rem; }
.guide-source-note { padding-top: 1.6rem; border-top: 1px solid #372740; font-size: .82rem; color: #bfaecc; letter-spacing: .05em; }
.guide-footer { max-width: 1120px; margin: auto; padding: 2rem 1.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; border-top: 1px solid #372740; font-size: .82rem; }
.guide-footer p { margin: 0; color: #baabc7; }
.guide-footer > a:last-child { color: var(--yellow); }
.guide-skip-link { position: fixed; left: 1rem; top: .5rem; z-index: 100001; padding: 1rem; background: var(--yellow); color: var(--black); border-radius: .5rem; transform: translateY(-160%); }
.guide-skip-link:focus { transform: none; }
@media (max-width: 820px) {
  .guide-main { padding-top: 2.5rem; }
  .guide-checklist-items { grid-template-columns: 1fr; }
  .guide-ready ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .guide-nav-wrap, .guide-main { padding-left: 1.1rem; padding-right: 1.1rem; }
  .guide-main { padding-top: 2rem; }
  .guide-page-heading h1 { font-size: clamp(2.8rem, 11.5vw, 4rem); }
  .guide-content { font-size: 1.02rem; line-height: 1.75; }
  .guide-lead { font-size: 1.08rem; }
  .guide-actions { gap: .8rem 1.3rem; }
  .guide-actions .cosmic-button { width: 100%; font-size: .82rem; }
  .guide-ready, .guide-checklist { padding: 1.2rem; }
  .guide-checklist-heading { align-items: flex-start; }
  .guide-checklist-heading h2 { font-size: 1.35rem; }
  .guide-progress-text { padding-top: .15rem; font-size: .8rem; }
  .guide-checklist-bottom { align-items: flex-start; }
  .quiel-guide-step { padding: 2.3rem 0; }
  .guide-tip { padding: 1rem; }
  .guide-estimates { grid-template-columns: 1fr; }
  .guide-cart-table { position: relative; overflow: visible; }
  .guide-cart-table table { min-width: 0; }
  .guide-cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .guide-cart-table :is(table, tbody, tr, td) { display: block; width: 100%; }
  .guide-cart-table tbody tr { margin-bottom: 1rem; padding: .4rem 0; border: 1px solid #49334f; border-radius: 1rem; overflow: hidden; background: #0e0912; }
  .guide-cart-table td { border: 0; padding: .7rem 1rem; }
  .guide-cart-table td::before { display: block; margin-bottom: .25rem; color: var(--yellow); font: 600 .75rem/1.5 'Fredoka', sans-serif; letter-spacing: .08em; }
  .guide-cart-table td:nth-child(1)::before { content: 'IN YOUR CART'; }
  .guide-cart-table td:nth-child(2)::before { content: 'WHAT TO CHECK'; }
  .guide-cart-table td:nth-child(3)::before { content: 'ABOUT HOW MUCH'; }
  .guide-complete { padding: 1.35rem; }
  .guide-complete h2 { font-size: 2rem; }
  .guide-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
  .guide-footer p { flex-basis: 100%; order: 1; }
}
@media print {
  .guide-nav-wrap, .guide-footer, .guide-actions, .guide-skip-link, .guide-reset { display: none; }
  .guide-main, .guide-content, .guide-ready, .guide-checklist, .guide-tip, .guide-complete, .guide-estimate, .guide-faq, .guide-cart-table :is(th,td) { color: #111!important; background: white!important; }
  .guide-content :is(h1,h2,h3,p,a,strong,li), .guide-page-heading h1, .guide-eyebrow, .guide-progress-text { color: #111!important; }
  .guide-main { padding: 0; }
  .guide-content { max-width: none; font-size: 11pt; }
  .guide-screenshot, .guide-tip, .guide-estimate, .guide-faq { break-inside: avoid; }
  .guide-faq:not([open]) p { display: block; }
}