/* Coinsnap Wallet "Get Started" page (template-pos-docs.php). Loaded after wallet.css and uses its tokens. */

/* ---------- nav: current page ---------- */
.nav__links a[aria-current="page"] { color: var(--primary); font-weight: 700; }
.js .nav.is-over .nav__links a[aria-current="page"] { color: var(--amber); }

/* ---------- hero ---------- */
.gs-hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 88px); color: var(--on-blue); background:
    radial-gradient(900px 560px at 82% 20%, rgba(97, 147, 201, .5), transparent 62%),
    radial-gradient(600px 400px at 10% 110%, rgba(44, 62, 107, .9), transparent 70%),
    var(--primary); }
.gs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.gs-hero__copy { min-width: 0; }
.gs-hero__media { align-self: end; margin: 0; }
.gs-hero__media img { display: block; width: 100%; height: auto; max-height: min(660px, 72vh); object-fit: cover; object-position: center top; border-radius: 24px; box-shadow: 0 38px 90px -52px rgba(0, 0, 0, .72); }
.gs-crumbs { font-size: .92rem; color: var(--on-blue); margin-bottom: 20px; }
.gs-crumbs a { color: #fff; font-weight: 600; }
.gs-crumbs a:hover { color: var(--amber); }
.gs-crumbs span { margin: 0 6px; opacity: .6; }
.gs-hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.8rem); max-width: 14ch; }
.gs-hero__intro { display: grid; gap: 14px; margin-top: 28px; max-width: 64ch; }
.gs-hero .lead { color: #fff; max-width: none; }
.gs-hero :focus-visible { outline-color: var(--orange); }

.gs-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 52px); max-width: 980px; }
.gs-path { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 6px; align-content: start; padding: 22px 24px; border-radius: 22px; background: #fff; color: var(--body); text-decoration: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .45); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.gs-path:hover { color: var(--body); transform: translateY(-2px); box-shadow: 0 26px 46px -24px rgba(0, 0, 0, .5); }
.gs-path__ico { grid-row: span 3; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--zone); color: var(--primary); }
.gs-path__ico .ico { width: 22px; height: 22px; stroke-width: 2; }
.gs-path strong { font: 700 1.2rem/1.3 var(--display); color: var(--primary); }
.gs-path > span:not(.gs-path__ico) { font-size: .98rem; line-height: 1.55; }
.gs-path em { font-style: normal; font-weight: 700; color: var(--primary); margin-top: 6px; }
.gs-path:hover em { text-decoration: underline; }

/* ---------- layout: sticky TOC + document ---------- */
.gs-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(64px, 8vw, 120px); }

.gs-toc { position: sticky; top: calc(var(--nav) + 28px); max-height: calc(100vh - var(--nav) - 56px); overflow-y: auto; overscroll-behavior: contain; font-size: .9rem; padding-right: 8px; }
.gs-toc__title { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.gs-toc ol { list-style: none; margin: 0; padding: 0; }
.gs-toc > ol > li + li { margin-top: 14px; }
.gs-toc a { display: block; color: var(--steel); text-decoration: none; padding: 3px 0; line-height: 1.35; }
.gs-toc a:hover { color: var(--primary); text-decoration: underline; }
.gs-toc > ol > li > a { font-weight: 700; color: var(--primary); }
.gs-toc ol ol { margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--accent-20); }
.gs-toc ol ol a { color: var(--muted); font-size: .86rem; padding: 3px 0 3px 10px; margin-left: -14px; border-left: 2px solid transparent; }
.gs-toc a.is-current { color: var(--primary); font-weight: 700; border-left-color: var(--primary); }

/* ---------- document typography ---------- */
.gs-doc { min-width: 0; }
.gs-doc h2 { font-size: clamp(2rem, 3.4vw, 3rem); max-width: none; }
.gs-doc h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; }
.gs-doc h4 { margin: 28px 0 0; font: 650 1.12rem/1.3 var(--display); color: var(--dark); }
.gs-doc h3 + p, .gs-doc h4 + p { margin-top: 12px; }
.gs-doc p + p, .gs-doc ul + p, .gs-doc dl + p, .gs-doc p + ul, .gs-doc p + dl, .gs-doc .stores + .gs-note, .gs-doc aside + .gs-shot { margin-top: 16px; }
.gs-doc strong { color: var(--dark); font-weight: 650; }
.gs-doc .gs-note strong { font-weight: 700; }

/* section */
.gs-sec + .gs-sec { margin-top: clamp(72px, 8vw, 112px); }
.gs-sec__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--primary); }
.gs-sec__ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--zone); color: var(--primary); }
.gs-sec__ico .ico { width: 26px; height: 26px; stroke-width: 2; }

/* topic: text + screenshot(s) */
.gs-topic { display: flex; align-items: flex-start; gap: clamp(32px, 4vw, 56px); padding: clamp(36px, 4vw, 52px) 0; border-bottom: 1px solid var(--line); }
.gs-topic:last-child { border-bottom: 0; padding-bottom: 0; }
.gs-topic__body { flex: 1 1 0; min-width: 0; max-width: 64ch; }
.gs-topic > .gs-shot { flex: none; width: 236px; }
.gs-topic > .gs-shot--sheet { width: 300px; }
.gs-topic > .gs-pair { flex: none; }
.gs-topic--wide { display: block; }
.gs-topic--wide .gs-topic__body { max-width: none; }
.gs-topic--wide > .gs-pair { margin-top: 32px; }

.gs-list { margin: 0; padding: 0 0 0 1.2em; }
.gs-list li + li { margin-top: 4px; }
.gs-list li::marker { color: var(--orange); }
.gs-list--cols { columns: 2; column-gap: 32px; }
.gs-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.gs-tags li { padding: 5px 12px; border-radius: 999px; background: var(--zone); color: var(--primary); font-size: .92rem; font-weight: 600; }
.gs-tags + p { margin-top: 16px; }
.gs-path-ui { display: inline; padding: 2px 8px; border-radius: 8px; background: var(--light); color: var(--dark); font-weight: 600; font-size: .95em; white-space: nowrap; }

.gs-defs { display: grid; gap: 14px; margin: 16px 0 0; }
.gs-defs > div { padding: 14px 18px; border-radius: 16px; background: var(--light); }
.gs-defs dt { display: flex; align-items: center; gap: 10px; font: 650 1.05rem/1.3 var(--display); color: var(--dark); }
.gs-defs dt em { font-style: normal; color: var(--primary); }
.gs-defs dt .ico { width: 30px; height: 30px; padding: 6px; border-radius: 10px; stroke-width: 2; flex: none; }
.gs-defs dt .ico { background: #fff1de; color: var(--orange-ink); }
.gs-defs div:nth-child(2) dt .ico { background: #dff6ec; color: var(--green-ink); }
.gs-defs dd { margin: 4px 0 0; }
.gs-defs--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gs-defs--inline > div { padding: 12px 16px; }
.gs-defs--inline dd { font-size: .95rem; }

.gs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gs-split h4 { margin-top: 24px; }

.gs-grid-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 20px 0 0; }
.gs-grid-defs > div { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.gs-grid-defs dt { display: flex; align-items: center; gap: 10px; font: 700 1.08rem/1.3 var(--display); color: var(--primary); }
.gs-grid-defs dt .ico { width: 22px; height: 22px; stroke-width: 2; }
.gs-grid-defs dd { margin: 8px 0 0; font-size: .98rem; }

.gs-fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.gs-fee-card { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.gs-fee-card h4 { margin-top: 0; color: var(--primary); }
.gs-fee-card .gs-list { margin-top: 14px; }
.gs-note-text { margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--zone); color: var(--steel); }

/* notes */
.gs-note { display: grid; grid-template-columns: 24px 1fr; gap: 14px; margin-top: 24px; padding: 18px 20px; border-radius: 18px; background: var(--zone); border: 1px solid #d9e3f6; }
.gs-note > .ico { width: 24px; height: 24px; color: var(--primary); stroke-width: 2; margin-top: 2px; }
.gs-note p + p { margin-top: 4px; }
.gs-note--warn { background: #fff8e6; border-color: #f5e2b3; }
.gs-note--warn > .ico { color: var(--orange-ink); }
.gs-editor-note { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px dashed #d4a300; background: #fffbea; color: #5c4700; font-size: .92rem; }
.gs-editor-note b { margin-right: 6px; }

/* links */
.gs-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--primary); text-decoration: none; }
.gs-more .ico { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .25s var(--ease); }
.gs-more:hover { color: var(--primary); text-decoration: underline; }
.gs-more:hover .ico { transform: translateX(3px); }
.gs-kiosk .gs-more { margin-top: 4px; padding: 12px 20px; border-radius: 999px; background: var(--primary); color: #fff; }
.gs-kiosk .gs-more:hover { background: var(--steel); color: #fff; text-decoration: none; }

/* ---------- screenshots ---------- */
.gs-shot { margin: 0; }
.gs-shot__frame { overflow: hidden; background: #fff; }
.gs-shot img { width: 100%; height: auto; }
.gs-shot figcaption, .gs-caption { margin-top: 12px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.gs-caption { margin-top: 16px; }
.gs-shot--phone .gs-shot__frame { padding: 7px; border-radius: 34px; background: var(--dark); box-shadow: 0 2px 0 1px #2a3152 inset, 0 30px 60px -30px rgba(15, 19, 42, .45); }
.gs-shot--phone img { border-radius: 27px; }
.gs-shot--sheet .gs-shot__frame { border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 26px 50px -34px rgba(26, 59, 139, .45); }
.gs-shot--desktop .gs-shot__frame { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 26px 50px -34px rgba(15, 19, 42, .4); }
.gs-topic__body .gs-shot { margin-top: 24px; }
.gs-topic__body .gs-shot--sheet { max-width: 520px; }

.gs-pair { display: grid; grid-template-columns: repeat(2, 200px); gap: 20px; align-items: start; }
.gs-pair .gs-shot--sheet { width: 260px; }
.gs-pair:has(.gs-shot--sheet) { grid-template-columns: repeat(2, 260px); }
.gs-pair--desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-pair:empty { display: none; }
.gs-topic--wide > .gs-pair:not(.gs-pair--desktop) { grid-template-columns: repeat(2, 236px); }

/* placeholder (editors only) */
.gs-shot--missing .gs-shot__frame { display: grid; place-items: center; aspect-ratio: 1 / 2; padding: 16px; border-radius: 30px; border: 2px dashed #d4a300; background: #fffbea; box-shadow: none; text-align: center; }
.gs-shot--sheet.gs-shot--missing .gs-shot__frame, .gs-shot--desktop.gs-shot--missing .gs-shot__frame { aspect-ratio: 4 / 3; border-radius: 18px; }
.gs-shot--missing span { display: grid; gap: 6px; font-size: .8rem; color: #5c4700; }
.gs-shot--missing b { font-size: .9rem; word-break: break-word; }
.gs-shot--missing small { font-size: .7rem; opacity: .75; word-break: break-all; }

/* ---------- table ---------- */
.gs-table-wrap { margin-top: 20px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.gs-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.gs-table th, .gs-table td { padding: 12px 20px; text-align: left; vertical-align: top; }
.gs-table thead th { background: var(--primary); color: #fff; font-weight: 700; font-size: .92rem; }
.gs-table tbody tr:nth-child(even) { background: var(--light); }
.gs-table tbody th { font-weight: 650; color: var(--dark); width: 50%; }
.gs-table tbody tr + tr > * { border-top: 1px solid var(--line); }

/* ---------- help cards ---------- */
.gs-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 4vw, 52px); }
.gs-help__card { padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: var(--zone); }
.gs-help__card p { margin-top: 10px; }
.gs-help__card > .gs-more { margin-top: 18px; }
.gs-guides { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }

/* ---------- download band ---------- */
.gs-dl { --sec: clamp(72px, 9vw, 120px); }
.gs-dl .stores { margin-top: 32px; }
.gs-dl .cta { grid-template-columns: minmax(0, 1fr); }
.gs-dl h2 { max-width: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .gs-topic { flex-wrap: wrap; }
  .gs-topic__body { flex-basis: 100%; max-width: 70ch; }
}
@media (max-width: 960px) {
  .gs-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .gs-hero__media { max-width: 520px; }
  .gs-hero__media img { max-height: none; }
  .gs-layout { grid-template-columns: minmax(0, 1fr); }
  .gs-toc { position: static; max-height: none; overflow: visible; padding: 20px 22px; border-radius: 20px; background: var(--light); }
  .gs-toc ol ol { display: none; }
  .gs-toc > ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
  .gs-toc > ol > li + li { margin-top: 0; }
  .gs-paths { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .gs-hero__media img { border-radius: 18px; }
  .gs-toc > ol { grid-template-columns: minmax(0, 1fr); }
  .gs-path { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .gs-path__ico { grid-row: auto; margin-bottom: 6px; }
  .gs-sec__ico { width: 44px; height: 44px; border-radius: 14px; }
  .gs-topic > .gs-shot, .gs-topic > .gs-shot--sheet { width: min(100%, 260px); margin: 0 auto; }
  .gs-topic > .gs-shot--sheet { width: 100%; }
  .gs-pair, .gs-pair:has(.gs-shot--sheet), .gs-topic--wide > .gs-pair:not(.gs-pair--desktop) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .gs-pair .gs-shot--sheet { width: auto; }
  .gs-pair:has(.gs-shot--sheet), .gs-pair--desktop { grid-template-columns: minmax(0, 1fr); }
  .gs-shot--phone .gs-shot__frame { padding: 5px; border-radius: 24px; }
  .gs-shot--phone img { border-radius: 19px; }
  .gs-list--cols { columns: 1; }
  .gs-defs--inline, .gs-split, .gs-help, .gs-fees { grid-template-columns: minmax(0, 1fr); }
  .gs-split { gap: 0; }
  .gs-table th, .gs-table td { padding: 10px 14px; font-size: .94rem; }
  .gs-path-ui { white-space: normal; }
}

/* pairs of screenshots sit under the text; an empty pair (captures not supplied yet) takes no space */
.gs-pair:not(:has(figure)) { display: none; }
.gs-topic:has(> .gs-pair) { flex-wrap: wrap; }
.gs-topic:has(> .gs-pair) > .gs-topic__body { flex-basis: 100%; }
.gs-doc .gs-list + .stores { margin-top: 20px; }