/* In Good Company — brand FRAME styles (host + join pages).
   Neon is the stage; these pages are chrome, so brand palette only:
   navy / cream / green / rust / gold + Lora + Helvetica. No neon pink here. */
:root {
  --navy:#22416B; --cream:#F4EFE1; --green:#2E9E50; --rust:#B24A2D;
  --gold:#E7C24A; --gray:#6B6250; --navy-deep:#172c47;
  --body:"Helvetica Neue", Arial, sans-serif;
  --head:"Lora", Georgia, serif;
  --hand:"Caveat", cursive;
}

/* ===== Method wall component (.mwall) — annual-program method visual ===== */
.mwall .flow{display:grid;grid-template-columns:1.15fr auto .95fr auto .95fr;gap:14px;align-items:stretch;}
@media (max-width:900px){ .mwall .flow{grid-template-columns:1fr;} .mwall .arrow{display:none;} }
.mwall .stage{background:#fff;border:1px solid rgba(34,65,107,.12);border-radius:18px;padding:20px 20px 24px;box-shadow:0 12px 34px rgba(34,65,107,.09);position:relative;}
.mwall .stage .sn{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--green);margin-bottom:4px;}
.mwall .stage .sn i{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;}
.mwall .stage h3{font-family:var(--head);font-weight:600;font-size:18px;color:var(--navy);margin:0 0 3px;}
.mwall .stage .sd{font-size:13px;color:var(--gray);line-height:1.45;margin:0 0 16px;}
.mwall .arrow{display:grid;place-items:center;color:var(--gold);font-size:26px;font-weight:800;}
.mwall .wall{position:relative;display:flex;flex-wrap:wrap;gap:10px;padding:6px 2px 2px;}
.mwall .note{position:relative;width:calc(50% - 5px);min-height:64px;padding:11px 12px 13px;border-radius:3px;font-family:var(--hand);font-weight:600;font-size:17px;line-height:1.12;color:#33404f;box-shadow:2px 5px 12px rgba(34,65,107,.16);}
.mwall .note::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-2deg);width:42px;height:15px;background:rgba(231,194,74,.55);border:1px solid rgba(178,74,45,.15);border-radius:2px;}
.mwall .note.n1{background:#FBEFC6;transform:rotate(-2.5deg);}
.mwall .note.n2{background:#DBEDD8;transform:rotate(1.8deg);}
.mwall .note.n3{background:#F4DAD0;transform:rotate(-1.2deg);}
.mwall .note.n4{background:#DCE6F2;transform:rotate(2.4deg);}
.mwall .note.n5{background:#FBF4DE;transform:rotate(-2deg);}
.mwall .note.n6{background:#E7E1F0;transform:rotate(1.3deg);}
.mwall .note.pick::after{content:"★";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#5a3d00;font-family:var(--body);font-size:14px;font-weight:700;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.22);transform:rotate(12deg);border:2px solid #fff;}
.mwall .picklabel{margin-top:14px;font-size:12px;color:var(--gray);display:flex;align-items:center;gap:7px;}
.mwall .picklabel .dot{width:18px;height:18px;border-radius:50%;background:var(--gold);color:#5a3d00;font-size:11px;font-weight:700;display:grid;place-items:center;}
.mwall .year{border:1px dashed rgba(34,65,107,.3);border-radius:12px;padding:14px 12px;background:linear-gradient(180deg,#fff,#fbfaf5);}
.mwall .months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-bottom:12px;}
.mwall .mo{font-family:var(--body);font-size:9.5px;font-weight:700;color:var(--gray);text-align:center;padding:5px 0;border-radius:4px;background:rgba(34,65,107,.05);}
.mwall .mo.on{background:var(--navy);color:#fff;}
.mwall .evrow{display:flex;flex-direction:column;gap:8px;}
.mwall .ev{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--navy);background:#fff;border:1px solid rgba(34,65,107,.14);border-radius:9px;padding:8px 11px;box-shadow:0 4px 12px rgba(34,65,107,.05);}
.mwall .ev .mtag{font-family:var(--head);font-weight:700;font-size:11px;color:#fff;background:var(--green);border-radius:5px;padding:3px 7px;min-width:34px;text-align:center;}
.mwall .ev.g .mtag{background:var(--green);} .mwall .ev.r .mtag{background:var(--rust);} .mwall .ev.b .mtag{background:var(--navy);} .mwall .ev.o .mtag{background:#c98a2b;}
.mwall .asg{display:flex;flex-direction:column;gap:10px;}
.mwall .card{border:1px solid rgba(34,65,107,.14);border-radius:11px;padding:12px 13px;background:#fff;box-shadow:0 5px 14px rgba(34,65,107,.05);}
.mwall .card .ct{font-family:var(--head);font-weight:600;font-size:15px;color:var(--navy);margin-bottom:8px;}
.mwall .chips{display:flex;flex-wrap:wrap;gap:7px;}
.mwall .chip{font-size:11.5px;font-weight:600;color:var(--navy);background:rgba(34,65,107,.06);border-radius:16px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px;}
.mwall .chip.owner{background:rgba(46,158,80,.12);color:#1f6b38;}
.mwall .chip.date{background:rgba(231,194,74,.18);color:#7a5c00;}
.mwall .chip.target{background:rgba(178,74,45,.1);color:var(--rust);}
.mwall .chip .av{width:16px;height:16px;border-radius:50%;background:var(--navy);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;}
.mwall .caption{margin-top:30px;font-family:var(--head);font-style:italic;font-size:clamp(16px,2vw,19px);color:var(--navy);text-align:center;}
.mwall .caption b{color:var(--rust);font-style:normal;}
.mwall .avail{display:inline-flex;align-items:center;gap:9px;margin:6px 0 34px;font-size:14px;font-weight:600;color:var(--navy);background:#fff;border:1px solid rgba(46,158,80,.4);border-radius:22px;padding:9px 17px;box-shadow:0 5px 14px rgba(34,65,107,.06);}
.mwall .avail .ab{display:inline-flex;align-items:center;gap:6px;} .mwall .avail .sep{color:var(--gray);font-weight:400;}
.mwall .inputs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:18px 0 12px;}
.mwall .inputs .ilabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);margin-right:2px;}
.mwall .ichip{font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid rgba(34,65,107,.16);border-radius:16px;padding:7px 13px;display:inline-flex;gap:6px;align-items:center;box-shadow:0 3px 9px rgba(34,65,107,.05);}

/* ===== Two-ways fork (team ⇄ client, on welcome & clients) ===== */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px;}
@media (max-width:640px){ .fork{grid-template-columns:1fr;} }
.fork .fcard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(34,65,107,.14);border-radius:18px;padding:26px 26px 22px;box-shadow:0 10px 30px rgba(34,65,107,.06);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
a.fcard:hover{transform:translateY(-2px);border-color:rgba(46,158,80,.5);box-shadow:0 16px 42px rgba(34,65,107,.1);}
.fork .flabel{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--rust);margin-bottom:11px;}
.fork h3{font-family:var(--head);font-weight:600;font-size:clamp(20px,2.6vw,24px);color:var(--navy);margin-bottom:8px;line-height:1.15;}
.fork p{font-size:15px;color:var(--gray);line-height:1.5;margin-bottom:14px;}
.fork .farrow{font-weight:700;color:var(--green);font-size:14.5px;}
.fork .fcard.here{border-color:rgba(46,158,80,.5);background:linear-gradient(180deg,#fff,#f6fbf7);}
.fork .fcard.here .flabel{color:var(--green);}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:var(--body); background:var(--cream); color:var(--navy);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; background:var(--navy); color:var(--cream);
}
.topbar .wordmark {
  font-family:var(--head); font-weight:600; font-size:18px;
  display:flex; align-items:center; gap:10px;
}
/* mic brand badge, injected before the wordmark on every page's topbar */
.topbar .wordmark::before {
  content:""; flex:0 0 auto; width:38px; height:38px; border-radius:9px;
  background:var(--cream) url("icon-source.png") center / 82% no-repeat;
  box-shadow:0 1px 3px rgba(0,0,0,.28), inset 0 0 0 1px rgba(34,65,107,.08);
}
.topbar .wordmark small {
  font-family:var(--body); font-weight:400; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold); opacity:.9;
}
.wrap { max-width:640px; margin:0 auto; padding:clamp(24px,5vw,54px) 22px 60px; }
.eyebrow {
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--rust); font-weight:600; margin-bottom:12px;
}
h1 { font-family:var(--head); font-weight:600; font-size:clamp(28px,5vw,42px); line-height:1.1; margin-bottom:14px; }
h2 { font-family:var(--head); font-weight:600; font-size:22px; margin:26px 0 6px; }
p.lead { color:var(--gray); font-size:17px; margin-bottom:22px; }
label { display:block; font-weight:600; font-size:14px; margin:18px 0 7px; }
label .cat { color:var(--rust); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-left:8px; }
input[type=text], input[type=number], textarea, select {
  width:100%; font-family:var(--body); font-size:16px; color:var(--navy);
  background:#fff; border:2px solid rgba(34,65,107,.18); border-radius:10px;
  padding:13px 15px; transition:border-color .12s ease;
}
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--navy); }
textarea { resize:vertical; min-height:52px; }
.card {
  background:#fff; border:1px solid rgba(34,65,107,.12); border-radius:14px;
  padding:22px 24px; box-shadow:0 8px 26px rgba(34,65,107,.07); margin-bottom:18px;
}
.btn {
  font-family:var(--body); font-weight:600; font-size:16px; padding:14px 30px;
  border:none; border-radius:10px; cursor:pointer; transition:transform .12s ease, filter .12s ease;
}
.btn:hover:not(:disabled) { transform:translateY(-2px); }
.btn:disabled { opacity:.45; cursor:default; }
.btn.primary { background:var(--green); color:#fff; }
.btn.gold { background:var(--gold); color:var(--navy); }
.btn.navy { background:var(--navy); color:var(--cream); }
.btn.ghost { background:transparent; color:var(--navy); border:2px solid rgba(34,65,107,.3); }
.btn.block { width:100%; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.codebox {
  font-family:var(--head); font-weight:700; font-size:40px; letter-spacing:.16em;
  color:var(--navy); background:var(--cream); border:2px dashed var(--gold);
  border-radius:12px; padding:16px 24px; text-align:center; margin:6px 0 4px;
}
.linkrow { display:flex; gap:8px; margin-top:10px; }
.linkrow input { font-size:14px; }
.muted { color:var(--gray); font-size:14px; }
.pill {
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  padding:10px 14px; border-radius:10px; background:#fff;
  border:1px solid rgba(34,65,107,.12); margin:0 0 8px;
}
.pill .dot { width:10px; height:10px; border-radius:50%; background:var(--gray); flex:0 0 auto; }
.pill.done .dot { background:var(--green); }
.pill .st { margin-left:auto; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.pill.done .st { color:var(--green); }
.avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--head); font-weight:600; font-size:14px; }
.toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:var(--cream); padding:12px 22px; border-radius:10px;
  font-size:15px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:50;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.err { color:var(--rust); font-weight:600; font-size:15px; margin-top:10px; min-height:20px; }
.progress { height:8px; background:rgba(34,65,107,.12); border-radius:6px; overflow:hidden; margin:14px 0 4px; }
.progress > i { display:block; height:100%; background:var(--green); width:0; transition:width .3s ease; }
.lockup { margin-top:34px; padding-top:18px; border-top:1px solid rgba(34,65,107,.15); font-family:var(--head); font-style:italic; color:var(--gray); font-size:14px; }
.hidden { display:none !important; }

/* co-brand skin (white-label) — a guest lockup; the logo sits on a white chip
   so any client mark reads on any background. Never touches the stage palette. */
.cobrand { display:inline-flex; align-items:center; gap:9px; }
.cobrand-pre { font-family:var(--body); font-weight:400; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); opacity:.85; white-space:nowrap; }
.cobrand-logo { height:20px; width:auto; max-width:130px; display:block;
  background:#fff; padding:4px 8px; border-radius:7px; box-shadow:0 1px 5px rgba(0,0,0,.14); }
.cobrand-name { font-family:var(--head); font-weight:600; font-size:15px; color:var(--cream);
  border-left:3px solid var(--cobrand,var(--gold)); padding-left:8px; }
/* on cream/card backgrounds, flip contrast */
.cobrand-card .cobrand-pre { color:var(--rust); }
.cobrand-card .cobrand-name { color:var(--navy); }
/* hero size for the intake welcome / done screens */
.cobrand-hero { gap:11px; }
.cobrand-hero .cobrand-logo { height:38px; max-width:210px; padding:7px 12px; border-radius:10px; }
.cobrand-hero .cobrand-pre { font-size:11px; }

/* ---- accessibility (shared) ---- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}