/* ===========================================================
   GozAround Giving Desk landing page sheet.
   Built 2026-09-29 to docs/GozAround-Giving-Desk-Landing-Page-Inst.md.

   Loaded ONLY by giving-desk.php, after tokens.css + public.css.
   Every class is `gd-` prefixed and the page wrapper carries `.gd`, so
   nothing here can reach the homepage or any other marketing page. The
   shared system still does the heavy lifting: buttons, nav, footer,
   .container, .section, .section-label, .feature-card, .faq-item and the
   motion/reduced-motion rules all come from public.css and are not
   redeclared here.

   Colour, type, spacing, radius and shadow come from tokens.css (the
   site-wide steel palette). No raw hex in this file, per CLAUDE.md.

   Visual grammar follows index.php: dark steel opening, alternating light
   bands, white artifact cards with one hairline and one shadow tier,
   serif for headings and big numerals, sans for everything else. No
   gradients, no glassmorphism, no card edge-trim, no restless motion.
   =========================================================== */

.gd {
    /* diagram semantics, mapped onto the shared tokens exactly as .hp maps
       them on the homepage, so giving-desk-flow.php renders in the same
       colour code as every other diagram on the site:
         warm = the client's domain, cool = GozAround's domain */
    --dg-warm-field: var(--orange-soft);
    --dg-warm-label: var(--orange-ink);
    --dg-cool-field: var(--teal-deep);
    --dg-cool-ink:   #ffffff;
    --dg-cool-label: var(--teal-light);
    --dg-ink:        var(--ink);
    --dg-line:       var(--line-2);
    --dg-muted:      var(--muted);
}

/* width:100% is load bearing. As a grid item, `margin:0 auto` alone
   suppresses stretch alignment and the wrapper collapses to the SVG's 300px
   intrinsic default instead of filling its column. */
.gd .dg-wrap { width: 100%; margin: 0 auto; max-width: 100%; }
.gd .dg { display: block; width: 100%; height: auto; }
.gd .dg-mobile { display: none; }
@media (max-width: 700px) {
    .gd .dg-desktop { display: none; }
    .gd .dg-mobile { display: block; }
}

/* ===================== HERO =====================
   Two columns at roughly 54/46 on the homepage's dark steel ground. Left
   carries the promise, right carries the illustration of handled work and
   shareable output, which is the page's whole proposition in one glance. */
.gd-hero { background: var(--ink); }
.gd-hero__in {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--hero-top) 0 var(--pad-tight);
    align-items: center;
}
@media (min-width: 980px) {
    .gd-hero__in { grid-template-columns: 54fr 46fr; gap: var(--s-7); }
}
.gd-hero__copy { max-width: 36em; }
.gd-hero .section-label { color: var(--orange-light); }
.gd-hero h1 {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: 1.09;
    letter-spacing: -.012em;
    color: var(--on-dark);
    margin: 18px 0 0;
    text-wrap: balance;
}
.gd-hero p { color: var(--on-dark-prose); max-width: 34em; }
.gd-hero__lede { font-size: var(--fs-lede); margin-top: var(--s-4); }
.gd-hero__body { font-size: var(--fs-body); margin-top: var(--s-3); }
.gd-hero .btn-group { margin-top: var(--s-5); align-items: center; }
.gd-hero .btn.btn--secondary {
    color: var(--on-dark);
    border-color: var(--on-dark-line);
    background: transparent;
}
.gd-hero .btn.btn--secondary:hover {
    background: var(--ink-2);
    border-color: var(--on-dark);
    color: var(--on-dark);
}
.gd-hero .link-arrow { color: var(--orange-light); }
.gd-hero .link-arrow:hover { color: var(--on-dark); }
.gd-hero__qual {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--on-dark-line);
    font-size: var(--fs-micro);
    color: var(--on-dark-muted);
    max-width: 34em;
}

/* the illustration: one white card, two labelled groups of real rows */
.gd-desk {
    background: var(--white);
    border: 1px solid var(--on-dark-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 32px 64px -28px rgba(0, 0, 0, .55);
}
.gd-desk__h {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: var(--s-3);
    border-bottom: 1px solid var(--line);
}
.gd-desk__mark {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: var(--r-sm);
    background: var(--orange);
    color: var(--on-dark);
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gd-desk__t {
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink);
}
.gd-desk__when {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
}
.gd-desk__group { padding: var(--s-3) 0 var(--s-2); }
.gd-desk__group + .gd-desk__group { border-top: 1px solid var(--line); }
.gd-desk__k {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 var(--s-3) var(--s-1);
}
.gd-desk__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 11px var(--s-3);
}
.gd-desk__row + .gd-desk__row { border-top: 1px solid var(--line); }
.gd-desk__row-k { font-size: var(--fs-sm); color: var(--text); line-height: 1.35; }
.gd-desk__v {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-label);
    border-radius: var(--r-sm);
    padding: 5px 10px;
    white-space: nowrap;
}
.gd-desk__v svg { width: 13px; height: 13px; flex: 0 0 13px; }
/* cool = GozAround did it; orange = waiting on a person, exactly as the
   homepage operating view codes the same two states */
.gd-desk__v--done { color: var(--teal-ink); background: var(--teal-soft); border: 1px solid var(--teal-soft); }
.gd-desk__v--ready { color: var(--text); background: var(--sand); border: 1px solid var(--line-2); }
.gd-desk__v--you { color: var(--orange-ink); background: var(--orange-soft); border: 1px solid var(--orange-soft); }
.gd-desk__row--you { background: var(--cream); }
.gd-hero .gd-note { color: var(--on-dark-muted); }
.gd-note {
    font-family: var(--sans);
    font-size: var(--fs-micro);
    color: var(--muted);
    margin-top: var(--s-2);
}
@media (max-width: 420px) {
    .gd-desk__row { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
}

/* ===================== SHARED SECTION RHYTHM ===================== */
/* the header anchors jump to these four sections; without the offset the
   fixed .site-nav covers the heading they land on */
.gd section[id] { scroll-margin-top: 86px; }
.gd .gd-narrow { max-width: 820px; }

/* The service diagram runs full width under the problem copy rather than
   beside it. In a 57% column its 16px labels rendered at an effective 9.3px,
   which is the point at which a diagram stops being readable and becomes
   decoration. Capped at the viewBox width so it never scales past 1:1. */
.gd .gd-flow { max-width: 1000px; margin: var(--s-6) auto 0; }

/* one icon treatment, reused by the service cards and the control items:
   line icon, ~1.75 stroke, currentColor, in a soft tile. Same construction as
   the capability cards on /features. */
.gd-ic {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--r);
    background: var(--orange-soft);
    color: var(--orange-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-3);
}
.gd-ic svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gd-ic--sm { width: 34px; height: 34px; border-radius: var(--r-sm); margin-bottom: var(--s-2); }
.gd-ic--sm svg { width: 17px; height: 17px; }
.gd-close {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--ink);
    max-width: 32em;
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-2);
}

/* ===================== CONTENT AND REPORTS =====================
   Given the same weight as the operational section: it is half the reason
   this page exists. Two previews side by side, both built from real text
   rather than a fabricated screenshot. */
.gd-deliver { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) { .gd-deliver { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.gd-deliver__copy h3 { font-size: var(--fs-h3); font-family: var(--sans); margin-bottom: var(--s-2); }
.gd-deliver__copy p { font-size: var(--fs-sm); }

/* the quarterly content pack: three channel versions of one update */
.gd-pack {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: var(--s-4);
}
.gd-pack__h {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
}
.gd-pack__t { font-family: var(--sans); font-weight: 700; font-size: var(--fs-sm); color: var(--ink); }
.gd-pack__when {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
}
.gd-pack__item { padding: var(--s-3) var(--s-4); }
.gd-pack__item + .gd-pack__item { border-top: 1px solid var(--line); }
.gd-pack__k {
    display: block;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--teal-ink);
    margin-bottom: 6px;
}
.gd-pack__item p { font-size: var(--fs-sm); color: var(--text); margin: 0; line-height: 1.5; }

/* the annual report: a cover plus its contents, as headings not fake data */
.gd-report {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-top: var(--s-4);
}
.gd-report__cover {
    background: var(--ink);
    color: var(--on-dark);
    padding: var(--s-5) var(--s-4);
}
.gd-report__k {
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--orange-light);
}
.gd-report__title {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: var(--on-dark);
    margin-top: var(--s-2);
}
.gd-report__sub { font-size: var(--fs-micro); color: var(--on-dark-muted); margin-top: 6px; }
.gd-report__toc { list-style: none; margin: 0; padding: 0; }
.gd-report__toc li {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: 11px var(--s-4);
    font-size: var(--fs-sm);
    color: var(--text);
}
.gd-report__toc li + li { border-top: 1px solid var(--line); }
.gd-report__n {
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    color: var(--muted);
    flex: 0 0 18px;
    font-variant-numeric: tabular-nums;
}

/* ===================== HOW IT WORKS =====================
   Three stages on one connecting rule. Same sequence grammar as the
   homepage Blueprint row, rebuilt here because home.css is not loaded. */
.gd-stages {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: var(--s-6) 0 0;
    padding: 0;
    position: relative;
}
@media (min-width: 900px) {
    .gd-stages { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
    /* the connector is drawn per item, from the right edge of one numeral
       across the gap to the next, because the numerals sit at each column's
       left edge rather than its centre */
    .gd-stage:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 44px;
        right: -30px;
        top: 17px;
        height: 1px;
        background: var(--line-2);
    }
}
.gd-stage { position: relative; padding: 0 0 28px; }
@media (min-width: 900px) { .gd-stage { padding: 0; } }
.gd-stage__n {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sand);
    border: 1px solid var(--line-2);
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    color: var(--ink);
}
.gd-stage h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-body);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin-top: 16px;
    line-height: 1.3;
}
.gd-stage p { font-size: var(--fs-sm); color: var(--muted); margin-top: 9px; }
/* mobile: a timeline. The numeral lifts out of flow so the connector gets
   its own gutter instead of running through the paragraph. */
@media (max-width: 899px) {
    .gd-stage { padding: 0 0 30px 46px; }
    .gd-stage__n { position: absolute; left: 0; top: 0; }
    .gd-stage:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 17px;
        top: 40px;
        bottom: 6px;
        width: 1px;
        background: var(--line-2);
    }
}

/* ===================== CONTROL ===================== */
.gd-control { display: grid; grid-template-columns: 1fr; margin-top: var(--s-5); border-top: 1px solid var(--line-2); }
@media (min-width: 780px) { .gd-control { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); } }
.gd-control__item { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); }
.gd-control__item dt {
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--orange-ink);
    margin-bottom: 6px;
}
.gd-control__item dd { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* ===================== PRICING ===================== */
.gd-prices { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); align-items: start; }
@media (min-width: 780px) { .gd-prices { grid-template-columns: 1fr 1fr; } }
.gd-price {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
}
/* modest emphasis on the standard desk: one shadow tier and the heavier
   hairline, never a coloured edge or a "most popular" claim we cannot support */
.gd-price--lift { border-color: var(--line-2); box-shadow: var(--shadow); }
.gd-price h3 { font-size: var(--fs-lede); color: var(--ink); margin: 0; }
.gd-price__amt {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(30px, 4vw, 38px);
    line-height: 1.05;
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin: var(--s-2) 0 0;
}
.gd-price__amt span { font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0; color: var(--muted); }
.gd-price__for { font-size: var(--fs-sm); color: var(--muted); margin: 6px 0 0; }
.gd-price__list { list-style: none; display: grid; gap: 11px; margin: var(--s-4) 0 0; padding: 0; flex-grow: 1; }
.gd-price__list li { display: flex; gap: 11px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.gd-price__list .k {
    flex: 0 0 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.gd-price__list .k svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* setup, scope and the no-custody line sit in the open under both cards,
   never behind a tooltip */
.gd-terms { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-2); max-width: 60em; }
.gd-terms p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s-2); }
.gd-terms p:last-child { margin-bottom: 0; }
.gd-terms b { color: var(--ink); font-weight: 600; }
.gd-aside { font-size: var(--fs-micro); color: var(--muted); margin-top: var(--s-4); }

/* ===================== FAQ =====================
   Leans on public.css's .faq-item base (padding + first-child rule), the
   same base /pricing uses. Only the homepage-style disclosure is added. */
.gd-faq { max-width: var(--wrap-narrow); margin: 0 auto; }
.gd-faq .faq-h { margin: 0; font: inherit; letter-spacing: 0; }
.gd-faq .faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    padding: var(--s-2) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    align-items: center;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-body);
    color: var(--ink);
}
.gd-faq .faq-q .pm { flex: 0 0 18px; color: var(--orange-ink); font-size: 22px; line-height: 1; transition: transform var(--t); }
.gd-faq .faq-item.open .faq-q .pm { transform: rotate(45deg); }
.gd-faq .faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.gd-faq .faq-item.open .faq-a { max-height: 900px; }
.gd-faq .faq-a p { color: var(--muted); font-size: var(--fs-sm); padding: 0 0 var(--s-3); }

@media (prefers-reduced-motion: reduce) {
    .gd-faq .faq-a { transition: none; }
    .gd-faq .faq-q .pm { transition: none; }
}