/* ============================================================================
   GoCheckMy — master hub design system (the family front door)
   This is the PARENT brand. Warm editorial base shared with the family sites
   (Fraunces serif + Inter, warm ivory ground, never pure black text), but a
   neutral master accent — brass/gold — that belongs to no single child site,
   so the hub reads as the parent rather than one of the five tools.
   The five child accents live only inside .card and .swatch (see sites.js).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme:light;
  --bg:#F7F5F0;            /* warm ivory ground (family standard) */
  --surface:#FFFEFB;
  --surface-2:#FBF9F3;
  --ink:#26313A;           /* deep ink headings — never pure black */
  --body:#5C6570;          /* body text */
  --muted:#676D74;         /* AA-compliant neutral (4.8:1 on ivory); was #7A828B (3.86:1) */
  --line:#E5E1D8;
  --line-soft:#EEEAE0;
  --gold:#A87C3D;          /* master accent (brass) */
  --gold-deep:#795A1B;     /* family gold-ink standard for text on light (5.9:1); decorative --gold stays #A87C3D */
  --goldsoft:#F3EBDA;
  --goldline:#E7D9BC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{margin:0;color:var(--body);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink)}
a{color:var(--gold-deep)}
img{max-width:100%}

.serif{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.16;letter-spacing:-.015em;color:var(--ink)}
.serif em{font-style:italic}

/* content shell */
.shell{max-width:1180px;margin:0 auto;padding:0 24px}
.measure{max-width:720px}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* eyebrow pill */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);background:var(--goldsoft);border:1px solid var(--goldline);border-radius:99px;padding:6px 13px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* buttons */
.btn{cursor:pointer;border:none;border-radius:13px;padding:14px 24px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;transition:transform .16s,box-shadow .2s}
.btn svg{transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:linear-gradient(135deg,var(--gold-deep),var(--gold));color:#fff;box-shadow:0 14px 32px -14px rgba(138,99,32,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(138,99,32,.62)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}

/* ===========================================================================
   HOME — hero + card grid (left column / right grid on desktop, stacked mobile)
   =========================================================================== */
.home-main{background:
  radial-gradient(1100px 520px at 12% -8%, #FDFBF5 0%, transparent 60%),
  linear-gradient(180deg,#FAF8F2, var(--bg) 40%);}
.home-grid{display:grid;grid-template-columns:1fr;gap:40px;padding:40px 0 20px}

/* faint blueprint grid behind the hero, echoing the reference */
.hero-col{position:relative}
.hero-col::before{content:'';position:absolute;inset:-30px -20px;z-index:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask-image:radial-gradient(600px 460px at 30% 42%, #000 0%, transparent 72%);mask-image:radial-gradient(600px 460px at 30% 42%, #000 0%, transparent 72%);opacity:.7;pointer-events:none}
.hero-col>*{position:relative;z-index:1}

.wordmark{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:clamp(3.1rem,7vw,4.6rem);line-height:.98;letter-spacing:-.03em;color:var(--ink);margin:6px 0 0}
/* hero lockup: coin logo next to the wordmark, matched height */
.hero-lockup{display:flex;align-items:center;gap:18px;margin:6px 0 0}
.hero-lockup .hero-logo{height:clamp(3.4rem,7.4vw,4.9rem);width:auto;flex:none}
.hero-lockup .wordmark{margin:0}
/* single hero thesis (launch line) */
.hero-thesis{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(2rem,4vw,2.95rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:22px 0 0;max-width:620px}
.hero-thesis em{font-style:italic;color:var(--gold)}
.wordmark em{font-style:italic;font-weight:500;color:var(--ink)}
/* gold-gradient "Check" — matches the checkmark in the hub badge */
.chk{background:linear-gradient(135deg,#ECD494,#CBA557 55%,#A87C3D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-eyebrow{margin:26px 0 0}

/* three thesis variants, rendered in place at hero scale for Jack to pick */
.thesis{margin:22px 0 0;display:flex;flex-direction:column;gap:14px}
.thesis .variant{position:relative;padding:14px 16px 14px 18px;border-radius:14px;border:1px dashed var(--line);background:rgba(255,254,251,.5)}
.thesis .variant::before{content:attr(data-pick);position:absolute;top:-9px;left:14px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg);padding:0 7px}
.thesis h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.9rem,3.6vw,2.55rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0}
.thesis h1 em{font-style:italic;color:var(--gold)}
.thesis-note{font-size:12px;color:var(--muted);font-style:italic;margin:4px 0 0}

.hero-sub{font-size:1.02rem;line-height:1.68;color:var(--body);max-width:520px;margin:26px 0 0}
.hero-built{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.hero-built .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.hero-built p{font-size:.92rem;line-height:1.6;color:var(--body);margin:0;max-width:480px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.hero-trust span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 13px}
.hero-trust svg{flex:none}

/* card grid — each card links OUT to a live child site (new tab) */
.cards-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px}
.cards-head .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr;gap:14px}

.card{position:relative;display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;text-decoration:none;overflow:hidden;transition:transform .16s,box-shadow .2s,border-color .2s;
  --accent:#5B7A96}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);opacity:.9}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -26px rgba(38,49,58,.4);border-color:var(--accent)}
.card-top{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.card-mark{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:transparent;overflow:hidden}
.card-mark svg{width:22px;height:22px}
.card-badge{width:46px;height:46px;display:block;object-fit:contain}
.card-tag{font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%, transparent);border-radius:99px;padding:4px 10px}
.card h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.28rem;line-height:1.16;color:var(--ink);margin:0 0 6px}
.card h3 .cm-my{color:var(--gold);font-style:italic;font-weight:700}
.card h3 .my{color:var(--accent);font-style:italic}
.card p{font-size:.9rem;line-height:1.55;color:var(--body);margin:0 0 16px}
.card .go{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;color:var(--accent)}
.card .go svg{transition:transform .18s}
.card:hover .go svg{transform:translateX(4px)}
.card .newtab{position:absolute;top:18px;right:18px;color:var(--muted);opacity:.55;transition:opacity .2s,color .2s}
.card:hover .newtab{opacity:1;color:var(--accent)}

/* "more coming" placeholder card */
.card.soon{background:var(--surface-2);border-style:dashed;cursor:default}
.card.soon::before{opacity:.3}
.card.soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.card.soon .card-mark{background:var(--line);color:var(--muted)}
.card.soon h3{color:var(--muted)}

@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){
  .home-grid{grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:start;padding:56px 0 30px}
  .hero-col{position:sticky;top:88px}
}

/* ===========================================================================
   CONTENT PAGES (approach / money / contact / privacy / terms / 404)
   =========================================================================== */
.page-hero{padding:56px 0 30px;text-align:center}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);margin:0 auto;max-width:760px}
.page-hero h1 em{font-style:italic;color:var(--gold)}
.page-hero .sub{font-size:1.05rem;line-height:1.62;color:var(--body);max-width:600px;margin:16px auto 0}

article{font-size:16.5px;line-height:1.72;color:var(--body)}
article h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.7rem;line-height:1.22;color:var(--ink);margin:40px 0 12px;letter-spacing:-.01em}
article h2 em{font-style:italic;color:var(--gold)}
article h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.24rem;color:var(--ink);margin:28px 0 8px}
article p{margin:0 0 14px}
article ul{margin:0 0 16px;padding-left:0;list-style:none}
article li{position:relative;padding-left:26px;margin-bottom:10px}
article li::before{content:'';position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
article a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
article strong{color:var(--ink)}

/* principle cards on the approach page */
.principles{display:grid;grid-template-columns:1fr;gap:14px;margin:24px 0 8px}
@media(min-width:680px){.principles{grid-template-columns:1fr 1fr}}
.principle{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.principle .ic{width:40px;height:40px;border-radius:11px;background:var(--goldsoft);border:1px solid var(--goldline);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.principle h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.12rem;color:var(--ink);margin:0 0 6px}
.principle p{font-size:.9rem;line-height:1.6;color:var(--body);margin:0}

/* callout / note box */
.note{background:var(--goldsoft);border:1px solid var(--goldline);border-left:4px solid var(--gold);border-radius:14px;padding:18px 20px;margin:22px 0}
.note p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink)}
.note b{color:var(--gold-deep)}

/* contact methods */
.contact-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:26px 0}
@media(min-width:640px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
.contact-card .ic{width:44px;height:44px;border-radius:12px;background:var(--goldsoft);border:1px solid var(--goldline);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.contact-card h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;color:var(--ink);margin:0 0 6px}
.contact-card p{font-size:.88rem;color:var(--body);margin:0 0 12px;line-height:1.55}
.contact-card a{font-weight:700;font-size:.92rem;color:var(--gold-deep);text-decoration:none}
.contact-card a:hover{text-decoration:underline}

/* CTA band shared across content pages */
.cta-band{background:linear-gradient(160deg,var(--goldsoft),var(--surface));border:1px solid var(--goldline);border-radius:22px;padding:40px 28px;text-align:center;margin:44px 0 10px}
.cta-band h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(1.5rem,3vw,2rem);color:var(--ink);margin:0 0 18px;letter-spacing:-.01em}
.cta-band h2 em{font-style:italic;color:var(--gold)}

.fine{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:20px}

/* ---- 404 ---- */
.err{text-align:center;padding:80px 0}
.err .code{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(4rem,12vw,7rem);color:var(--gold);line-height:1;letter-spacing:-.03em}
.err h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.8rem;color:var(--ink);margin:6px 0 12px}
.err p{color:var(--body);max-width:440px;margin:0 auto 26px}

/* ---- usability controls (a11y.js) ---- */
.a11y-widget{position:fixed;left:14px;bottom:14px;z-index:80}
.a11y-toggle{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:19px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(38,49,58,.45);display:flex;align-items:baseline;justify-content:center;line-height:1;gap:1px}
.a11y-toggle span{font-size:13px}
.a11y-panel{position:absolute;left:0;bottom:54px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 16px 40px -20px rgba(38,49,58,.5);width:186px}
.a11y-cap{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.a11y-grp{display:flex;gap:6px;margin-bottom:8px}
.a11y-b{flex:1;min-height:44px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;font-family:'Inter',system-ui,sans-serif}
.a11y-b:hover{border-color:var(--gold)}
.a11y-b.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.a11y-wide{width:100%;font-size:13px;min-height:44px}
html.a11y-contrast{--body:#2B333B;--muted:#3C444C}
html.a11y-contrast a:not(.btn):not([class*="card"]):not([class*="go"]){text-decoration:underline}
@media print{.a11y-widget{display:none}}

/* shared footer */
.gc-foot{border-top:1px solid var(--line);margin-top:56px;padding:30px 24px 40px;background:var(--surface)}
.gc-foot .fin{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 34px;align-items:flex-start;justify-content:space-between}
.gc-foot .fbrand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:16px;color:var(--ink)}
.gc-foot .fbrand em{font-style:italic;color:var(--ink)}
.gc-foot .fcopy{width:100%;font-size:12px;color:var(--muted);margin-top:-6px}
.gc-foot .flinks{display:flex;flex-wrap:wrap;gap:16px}
.gc-foot .flinks a{font-size:13px;color:var(--muted);text-decoration:none}
.gc-foot .flinks a:hover{color:var(--ink)}
.gc-foot .fnote{width:100%;font-size:11.5px;color:var(--muted);line-height:1.6;margin-top:6px}
.gc-foot .ffamily{width:100%;display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gc-foot .ffamily a{font-size:12px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.gc-foot .ffamily a:hover{color:var(--ink)}
.gc-foot .ffamily .sw{width:9px;height:9px;border-radius:3px;flex:none}

/* ===========================================================================
   HOME — hero video stage (added 2026-07-17). Full-bleed marsh scene with the
   thesis overlaid on the open sky/water at left; palmetto anchors the right.
   =========================================================================== */
.hero-stage{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  /* svh, not vh: vh grows when the mobile URL bar collapses mid-scroll, which
     resized the hero and shifted the whole page (real-user CLS 0.295). svh is
     constant; the vh line stays first as the fallback for older browsers. */
  min-height:clamp(440px,64vh,600px);
  min-height:clamp(440px,64svh,600px);background:#c9d3d1}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block;pointer-events:none}
/* soft ivory scrim on the left for headline legibility; fully clear by the palmetto */
.hero-stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(247,245,240,.92) 0%, rgba(247,245,240,.74) 24%,
    rgba(247,245,240,.34) 46%, rgba(247,245,240,0) 66%)}
.hero-shell{position:relative;z-index:2;width:100%}
.hero-copy{max-width:560px;padding:32px 0}
.hero-copy .hero-lockup{margin:0}
.hero-copy .hero-eyebrow{margin:18px 0 0}
.hero-copy .hero-thesis{margin:16px 0 0;max-width:520px}
.hero-copy .hero-sub{margin:16px 0 0;max-width:450px}
.hero-copy .hero-trust{margin:20px 0 0}
.tools-section{padding:6px 0 26px}

@media(min-width:1080px){
  .hero-stage{min-height:clamp(560px,72vh,700px);min-height:clamp(560px,72svh,700px)}
  .hero-copy{padding:44px 0}
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .hero-stage{min-height:clamp(420px,74vh,560px);min-height:clamp(420px,74svh,560px)}
  .hero-video{object-position:80% 42%}        /* bias right so the palmetto stays in frame */
  .hero-stage::before{background:linear-gradient(178deg,
     rgba(247,245,240,.88) 0%, rgba(247,245,240,.60) 40%, rgba(247,245,240,.16) 100%)}
  .hero-copy{max-width:none;padding:22px 0}
  /* keep the wordmark lockup inside the frame down to 320px (1.4.10 reflow) */
  .hero-copy .hero-lockup{gap:12px}
  .hero-copy .hero-lockup .hero-logo{height:clamp(2.2rem,10vw,3.2rem)}
  .hero-copy .wordmark{font-size:clamp(1.85rem,9.5vw,2.9rem)}
}
@media(prefers-reduced-motion:reduce){
  /* The JS gate already keeps the hero on its poster for these users. This also
     neutralises the card/button hover transitions so nothing animates. */
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ===========================================================================
   ACCESSIBILITY (2026-07-17): visible keyboard focus, hero pause control,
   legibility of hero copy over the video. No brand-token values changed here.
   =========================================================================== */
/* 2.4.7 Focus Visible — a clear brass ring for keyboard users on every control,
   with a light halo so it stays visible over the dark video too. */
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,254,251,.85);border-radius:6px}

/* 2.2.2 Pause, Stop, Hide — control for the auto-playing hero loop. 44x44 target. */
.hero-toggle{position:absolute;z-index:3;right:16px;bottom:16px;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,254,251,.9);
  color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
.hero-toggle svg{fill:currentColor;display:block}
.hero-toggle .ic-play{display:none}
.hero-toggle.is-paused .ic-pause{display:none}
.hero-toggle.is-paused .ic-play{display:block}
.hero-toggle:hover{background:#fff;border-color:var(--gold)}

/* 1.4.3 — subtle ivory halo keeps the overlaid copy legible over any video frame,
   on top of the ivory scrim. Not a brand-token change. */
.hero-copy .wordmark,.hero-copy .hero-thesis,.hero-copy .hero-sub{
  text-shadow:0 1px 2px rgba(247,245,240,.55)}