/* The seven guide pages (/queue, /errands, /home-jobs, /desk-work, /zone, /field-work, /facts) on the v4 inner chrome.
   One system: the opener on the map with the helmet cat and a real task card or app screen, the price bands as
   outlined pills, the money rules on ink, what to put in the post, one yellow statement, the FAQ, the way on.
   Built by design/seo/tools/build_guides.py; edit there, not here, when the markup changes. */

/* ---------- opener ---------- */
.g-open { min-height: auto; padding-bottom: clamp(48px, 7vw, 112px); }
.g-open-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px clamp(32px, 5vw, 88px); align-items: center; }
.g-open .ih1 { font-size: clamp(min(46px, 11.6vw), 5.5vw, 88px); }
.g-lead { max-width: 40ch; }
.g-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.4vh, 34px); }
.g-from { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(22px, 3vh, 30px); font: 600 17px/1.3 var(--text); }
.g-from .pill { font-size: clamp(26px, 2.6vw, 38px); }

/* the visual: the cat standing on the map, a real task card or app screen leaning on it */
.g-vis { position: relative; justify-self: center; width: min(100%, 540px); margin: 0; }
.g-vis-cat { width: 74%; margin-left: auto; filter: drop-shadow(0 30px 34px rgba(18,18,18,.22)); }
.g-vis-card { position: absolute; left: 0; bottom: 12%; width: 82%; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1.5px var(--rule), 0 34px 60px -30px rgba(18,18,18,.55); transform: rotate(-3.5deg); }
.g-vis figcaption, .g-cap { margin-top: 14px; font: 600 13px/1.35 var(--text); letter-spacing: .02em; color: var(--mute); }
.g-vis figcaption { text-align: right; }
.g-vis-phone { display: grid; justify-items: end; }
.g-vis-phone .g-phone { transform: rotate(2.5deg); }
.g-vis-phone .g-vis-mini { position: absolute; left: 0; bottom: 6%; width: 34%; max-width: 190px; filter: drop-shadow(0 24px 26px rgba(18,18,18,.25)); }
.g-vis-phone .g-phone { margin-right: 4%; }
.g-vis-phone figcaption { text-align: right; }

/* a phone frame around one real app screen */
.g-phone { position: relative; width: clamp(220px, 21vw, 300px); aspect-ratio: 750 / 1623; padding: 8px; background: var(--ink); border-radius: 42px; box-shadow: 0 46px 80px -36px rgba(18,18,18,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.g-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 34px; }
.g-shot { margin: 0; display: grid; justify-items: center; align-content: start; }
.g-shot .g-cap { text-align: center; max-width: 30ch; }

/* ---------- sections ---------- */
.g-sec { padding: clamp(80px, 10vw, 150px) 0; }
.g-sec + .g-sec { border-top: 1px solid var(--rule); }
.g-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px clamp(32px, 5vw, 88px); align-items: start; }
.g-head { display: grid; gap: 18px; align-content: start; }
.g-head p { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--mute); }
.g-head .g-cap { margin-top: 0; }
.g-note { max-width: 60ch; margin-top: 24px; font-size: 16px; line-height: 1.6; color: var(--mute); }

/* price bands: the app's own pill, then what it buys */
.g-bands { border-top: 2.5px solid var(--ink); }
.g-bands li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 10px clamp(18px, 2.4vw, 32px); padding: clamp(16px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--rule); }
.g-bands .pill { font-size: clamp(24px, 2.7vw, 42px); justify-self: start; }
.g-bands b { display: block; font: 800 clamp(20px, 1.7vw, 26px)/1.12 var(--display); letter-spacing: -.012em; }
.g-bands small { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--mute); }
.g-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.g-groups h3 { margin-bottom: 12px; }
.g-groups .g-bands .pill { font-size: clamp(22px, 2vw, 30px); }
.g-groups .g-bands li { grid-template-columns: 1fr; gap: 8px; }

/* the money, on ink */
.g-money { background: var(--ink); color: #fff; }
.g-money .g-head p, .g-money .g-note, .g-money .g-cap { color: #cfcbc0; }
.g-rules { border-top: 2.5px solid var(--y); }
.g-rules li { display: grid; grid-template-columns: minmax(104px, auto) minmax(0, 1fr); align-items: baseline; gap: 10px clamp(16px, 2vw, 28px); padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.g-rules .pill { font-size: clamp(19px, 1.7vw, 25px); justify-self: start; }
.g-rules li > span:last-child { font-size: 17px; line-height: 1.5; color: #ebe8df; }
.g-money-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.g-money .arrow-link { color: #fff; }
.g-money .mark { color: var(--ink); }

/* what to put in the post: numbered like the app's steps */
.g-steps { counter-reset: g; border-top: 2.5px solid var(--ink); }
.g-steps li { counter-increment: g; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.g-steps li::before { content: counter(g); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--y); box-shadow: inset 0 0 0 2.5px var(--ink); font: 800 19px/1 var(--display); padding-top: .12em; }
.g-steps b { font: 800 clamp(20px, 1.7vw, 25px)/1.15 var(--display); letter-spacing: -.012em; }
.g-steps p { font-size: 16.5px; line-height: 1.55; color: #333; max-width: 58ch; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.g-chips li { padding: 9px 14px 7px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 15px/1 var(--text); }

/* the one statement in yellow */
.g-y { background: var(--y); --halo: var(--y); }
.g-y .g-head p { color: var(--ink); }
.g-y .g-rules { border-top-color: var(--ink); }
.g-y .g-rules li { border-bottom-color: rgba(18,18,18,.18); }
.g-y .g-rules li > span:last-child { color: var(--ink); }
.g-y .g-rules .pill { background: #fff; }
.g-y-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(32px, 5vw, 88px); align-items: center; }
.g-y .ih2 { font-size: clamp(44px, 6.4vw, 96px); }
.g-y .btn { margin-top: 8px; justify-self: start; }

/* the way on: sibling pages */
.g-on { padding: clamp(56px, 6vw, 96px) 0; border-top: 1px solid var(--rule); }
.g-on-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px clamp(32px, 5vw, 88px); align-items: start; }
.g-on ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2.5px solid var(--ink); }
.g-on li { border-bottom: 1px solid var(--rule); }
.g-on .arrow-link { width: 100%; padding: 16px 0; font-size: 18px; }

/* /facts: one fact per line */
.g-facts { border-top: 2.5px solid var(--ink); }
.g-facts > div { display: grid; grid-template-columns: minmax(180px, .38fr) minmax(0, 1.62fr); gap: 6px clamp(24px, 4vw, 64px); padding: 15px 0; border-bottom: 1px solid var(--rule); }
.g-facts dt { color: var(--mute); padding-top: .3em; }
.g-facts dd { margin: 0; font-size: 18px; line-height: 1.5; max-width: 62ch; }
.g-facts-h { margin: clamp(48px, 5vw, 72px) 0 14px; }
.g-facts-h:first-child { margin-top: 0; }
.g-date { display: inline-flex; margin-top: 22px; }

/* ---------- phone and tablet ---------- */
@media (max-width: 959px) {
  .g-open-in, .g-two, .g-money-in, .g-y-in, .g-on-in { grid-template-columns: minmax(0, 1fr); }
  .g-vis { width: min(100%, 420px); }
  .g-groups { grid-template-columns: minmax(0, 1fr); }
  .g-rules li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .g-bands li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .g-on ul { grid-template-columns: minmax(0, 1fr); }
  .g-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .g-facts dd { font-size: 17px; }
  .g-phone { width: min(64vw, 260px); }
  .g-acts .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .g-vis-card, .g-vis-phone .g-phone { transform: none; } }
.g-price-head { align-items: end; margin-bottom: clamp(36px, 4.4vw, 64px); }
.g-price-head .g-note { margin-top: 0; }
.g-faq .statement { font-size: clamp(44px, min(6.4vw, 11vh), 96px); }
.g-obj { width: min(100%, 520px); justify-self: center; }