/* The AwesomeAgentic family: what every page shares.
   - the product menu in the bar (.fam) and its small-screen menu (.fam-menu, closed by menu.js)
   - the bar of the front pages and the coming-soon pages (.fbar; site 20 keeps its own .bar)
   - the coming-soon pages (.soon) and the family footer (.fam-foot)
   Load it after the page's own css. Dark pages set the --fam-* colours. */

:root {
  --fam-ink: #252869;
  --fam-hover: rgba(37, 40, 105, .07);
  --fam-mark: #28A9AB;
  --fam-pop: #ffffff;
  --fam-pop-ink: #252869;
  --fam-pop-quiet: #596172;
  --fam-ground: #F7F7F7;
  --fam-line: #e4e7eb;
  --fam-m: clamp(16px, 5vw, 64px);
}

/* ---------- the product menu ---------- */
.fam { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.fam a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0;
  color: var(--fam-ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.fam a:hover { background: var(--fam-hover); }
.fam a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--fam-mark);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.fam ~ .book, .fam ~ .fbar-cta { margin-left: 10px; }
/* on a product page, the way back to the AwesomeAgentic front page comes first, set apart by a thin line */
.fam .fam-up { position: relative; margin-right: 10px; }
.fam .fam-up::after { content: ""; position: absolute; right: -6px; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: var(--fam-line); }

.fam-menu { position: relative; margin-left: auto; display: none; }
.fam-menu ~ .book, .fam-menu ~ .fbar-cta { margin-left: 8px; }
.fam-menu summary {
  list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 999px; cursor: pointer; user-select: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fam-ink);
  transition: background-color .2s ease;
}
.fam-menu summary::-webkit-details-marker { display: none; }
.fam-menu summary:hover, .fam-menu[open] summary { background: var(--fam-hover); }
.fam-menu summary svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease;
}
.fam-menu[open] summary .fam-ch { transform: rotate(180deg); }
.fam-menu .fam-burger { display: none; width: 20px; height: 20px; }
@media (max-width: 400px) {
  .fam-menu summary { width: 44px; justify-content: center; padding: 0; }
  .fam-menu .fam-menu-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fam-menu .fam-ch { display: none; }
  .fam-menu .fam-burger { display: block; }
  .bar.fam-late { gap: 6px; }
  .bar.fam-late .book { padding: 0 11px; }
}
.fam-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: max-content; min-width: 236px;
  display: grid; gap: 2px; padding: 8px; border-radius: 12px; background: var(--fam-pop);
  box-shadow: 0 18px 40px -14px rgba(20, 22, 74, .38), 0 2px 6px rgba(20, 22, 74, .08);
}
.fam-pop a {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 12px; border-radius: 8px; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--fam-pop-ink);
}
.fam-pop a:hover { background: var(--fam-hover); }
.fam-pop a[aria-current="page"] { background: var(--fam-hover); }
.fam-pop .fam-up { margin-bottom: 4px; border-bottom: 1px solid var(--fam-line); border-radius: 8px 8px 0 0; }
.fam-pop small { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--fam-pop-quiet); }
.fam-pop .fam-pop-cta { margin-top: 4px; justify-content: center; background: var(--color-gradient-green); color: #252869; }
.fam-pop .fam-pop-cta:hover { background: var(--color-gradient-green-hover); }

/* the menu folds into "Menu" on small screens; site 20 folds it earlier, because its step words sit in the middle of the bar */
@media (max-width: 759px) {
  .fam { display: none; }
  .fam-menu { display: block; }
}
@media (max-width: 1759px) {
  .bar.fam-late .fam { display: none; }
  .bar.fam-late .fam-menu { display: block; }
}
@media (max-width: 1039px) {
  .bar.fam-late .loopw { display: none; }
}

/* ---------- the bar of the front and coming-soon pages ---------- */
/* its edges line up with the page's 1320 px column */
.fbar, .fbar *, .fam-foot, .soon-page *, .soon-page *::before, .soon-page *::after { box-sizing: border-box; }
.fbar {
  position: sticky; top: 0; z-index: 50; height: 64px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(var(--fam-m), calc((100% - 1320px) / 2 + var(--fam-m)));
  background: var(--fam-ground); transition: box-shadow .3s ease;
}
.fbar.is-down { box-shadow: 0 1px 0 var(--fam-line); }
.fbar-name {
  min-height: 44px; display: inline-flex; align-items: center; flex: none;
  font-family: var(--font-serif); font-weight: 900; font-size: clamp(17px, 1rem + .3vw, 21px);
  color: var(--fam-ink); text-decoration: none;
}
.fbar-cta {
  margin-left: auto; flex: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px; border-radius: var(--radius-md, 8px); text-decoration: none;
  background: var(--color-gradient-green); color: #252869;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 16px -6px rgba(40, 169, 171, .55); transition: transform .15s ease, box-shadow .15s ease;
}
.fbar-cta:hover { background: var(--color-gradient-green-hover); transform: translateY(-1px); box-shadow: 0 9px 20px -6px rgba(40, 169, 171, .6); }
/* on phones the menu button sits at the far right, after Write to us */
@media (max-width: 759px) {
  .fbar .fbar-cta { order: 1; margin-left: auto; }
  .fbar .fam-menu { order: 2; margin-left: 6px; }
}
@media (max-width: 379px) {
  .fbar .fbar-cta { display: none; }
  .fbar .fam-menu { margin-left: auto; }
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 80; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 8px; background: #252869; color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
}
.skip:focus { top: 10px; }

/* ---------- the family footer ---------- */
.fam-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: 20px max(var(--fam-m), calc((100% - 1320px) / 2 + var(--fam-m))) 24px; font-size: .875rem; color: var(--fam-pop-quiet);
  border-top: 1px solid var(--fam-line);
}
.fam-foot b { font-family: var(--font-serif); font-weight: 900; font-size: 1rem; color: var(--fam-ink); }
.fam-foot a, .fam-home { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fam-foot a:hover, .fam-home:hover { color: var(--fam-ink); text-decoration-color: var(--fam-mark); }
.foot .fam-home:hover { color: #fff; }

/* ---------- a coming-soon page ---------- */
.soon-page { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--fam-ground); color: var(--fam-ink); font-family: var(--font-body); }
:where(.soon-page) h1, :where(.soon-page) p { margin: 0; }
.soon-page ::selection { background: #B4E495; color: #14164a; }
.soon-page :focus-visible { outline: 2px solid var(--fam-ink); outline-offset: 3px; border-radius: 4px; }
.soon {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center;
  gap: clamp(24px, 5vw, 80px); padding: clamp(32px, 7vh, 96px) var(--fam-m); max-width: 1320px; width: 100%; margin: 0 auto;
}
.soon-name { font-family: var(--font-serif); font-weight: 900; font-size: clamp(3rem, 1.4rem + 6vw, 6rem); line-height: 1.02; letter-spacing: -.02em; }
.soon-line { margin-top: 18px; max-width: 22ch; font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); line-height: 1.25; color: var(--fam-ink); text-wrap: balance; }
.soon-when { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--fam-ink); }
.soon-when i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #28A9AB; }
.soon-next { margin-top: 14px; max-width: 34em; font-size: 1.0625rem; line-height: 1.55; color: var(--fam-pop-quiet); }
.soon-next a { color: var(--fam-ink); font-weight: 700; text-decoration: underline; text-decoration-color: #28A9AB; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.soon-next a:hover { text-decoration-color: var(--fam-ink); }
.soon-art { width: 100%; max-width: 440px; justify-self: center; }
.soon-art svg { width: 100%; height: auto; }
@media (max-width: 759px) {
  .soon { grid-template-columns: 1fr; align-content: start; }
  .soon-art { max-width: 300px; justify-self: start; order: -1; }
}