/* ==========================================================================
   Offer a Service page: interactive sections (js/gig.js).
     .pstory   "Give your work a place to be found": a phone whose scene follows
               the step you are reading (scroll on desktop, tabs elsewhere)
     .pfit     plan finder above the plan cards
     .pa       profile anatomy: point at a part of the profile to light it up
     .avail    availability planner with calendar, auto-renew and same-day switches
     .gmeter   profile meter that fills as you read the three steps
     .skill    "What do you do?" matcher in the Who can join panel
   Text content is plain HTML and readable without JavaScript. Controls that only
   work with JavaScript are hidden until main.js adds .js to <html>.
   ========================================================================== */

.gg-pop-in {
  animation: gg-g-pop 0.45s var(--ease-spring, ease) both;
}

@keyframes gg-g-pop {
  from { scale: 0.6; opacity: 0; }
  to { scale: 1; opacity: 1; }
}

@keyframes gg-g-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes gg-g-ping {
  from { box-shadow: 0 0 0 0 rgba(81, 186, 108, 0.55); }
  to { box-shadow: 0 0 0 14px rgba(81, 186, 108, 0); }
}

/* ==========================================================================
   1. Profile story
   ========================================================================== */
.pstory {
  display: grid;
  gap: var(--space-5);
}

.pstory__steps {
  display: grid;
  gap: var(--space-3);
}

.pstory__step {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 2px solid var(--gg-line);
  border-radius: var(--radius-lg);
  background: var(--gg-white);
  transition: border-color 0.3s ease, box-shadow 0.4s ease;
}

.pstory__step.is-active {
  border-color: var(--gg-green);
  box-shadow: 0 16px 36px rgba(24, 37, 27, 0.1);
}

.pstory__tab {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* the whole card is the button's hit area */
.pstory__tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pstory__num {
  flex: none;
  width: 2.6rem;
  font-size: 1.75rem;
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(24, 37, 27, 0.25);
  transition: -webkit-text-fill-color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

.pstory__step.is-active .pstory__num {
  -webkit-text-fill-color: var(--gg-green);
  -webkit-text-stroke-color: var(--gg-green);
}

.pstory__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heavy);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--gg-text-muted);
  transition: color 0.3s ease;
}

.pstory__step.is-active .pstory__title {
  color: var(--gg-forest);
}

.pstory__step p {
  padding-left: calc(2.6rem + var(--space-3));
  color: var(--gg-text-muted);
}

/* what each step includes */
.pstory__points {
  display: grid;
  gap: 0.55rem;
  margin-top: var(--space-4);
  padding-left: calc(2.6rem + var(--space-3));
}

.pstory__points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--fw-bold);
}

.pstory__points .icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--gg-white);
  box-shadow: inset 0 0 0 1.5px rgba(31, 122, 69, 0.35);
  color: var(--gg-green-deep);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pstory__step.is-active .pstory__points .icon {
  background: var(--gg-green);
  box-shadow: none;
  color: var(--gg-ink);
}

.pstory__points em {
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-green);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* tabs (phones and tablets): only the open step shows its list */
.js .pstory:not(.is-scroll) .pstory__step:not(.is-active) .pstory__points {
  display: none;
}

.has-motion .pstory__step.is-active .pstory__points li {
  animation: gg-g-point 0.5s var(--ease-out) both;
}

.has-motion .pstory__step.is-active .pstory__points li:nth-child(2) { animation-delay: 0.08s; }
.has-motion .pstory__step.is-active .pstory__points li:nth-child(3) { animation-delay: 0.16s; }

@keyframes gg-g-point {
  from { opacity: 0; translate: -10px 0; }
  to { opacity: 1; translate: 0 0; }
}

/* progress of the step (scroll on desktop, timer elsewhere) */
.pstory__bar {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: 0.75rem;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--gg-line);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pstory__bar > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gg-green);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.pstory__step.is-active .pstory__bar {
  opacity: 1;
}

/* tabs picked by hand do not show a timer */
.pstory:not(.is-auto):not(.is-scroll) .pstory__bar {
  opacity: 0;
}

.pstory.is-auto .pstory__step.is-active .pstory__bar > span {
  animation: gg-g-bar var(--pstory-time, 3.6s) linear both;
}

@keyframes gg-g-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- Stage --------------------------------------------------------------- */
.pstory__stage {
  order: -1; /* phones and tablets: the phone comes first, the steps below are its tabs */
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  min-height: 29rem;
  padding: var(--space-7) var(--space-4);
  border-radius: 32px;
  background: var(--gg-green);
}

.pstory__ring {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.pstory__ring--1 {
  width: 24rem;
  height: 24rem;
  right: -9rem;
  top: -8rem;
}

.pstory__ring--2 {
  width: 15rem;
  height: 15rem;
  left: -6rem;
  bottom: -5rem;
  border-color: rgba(24, 37, 27, 0.18);
}

.pstory__mark {
  position: absolute;
  z-index: -1;
  left: 6%;
  top: 8%;
  width: 7rem;
  height: auto;
  opacity: 0.22;
  pointer-events: none;
}

.pstory__float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--gg-white);
  color: var(--gg-forest);
  box-shadow: 0 12px 26px rgba(24, 37, 27, 0.18);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.pstory__float .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gg-green-deep);
}

.pstory__float--1 {
  left: 4%;
  bottom: 18%;
}

.pstory__float--2 {
  right: 4%;
  top: 14%;
  background: var(--gg-forest);
  color: var(--gg-white);
}

.pstory__float--2 .icon {
  color: var(--gg-green);
}

.has-motion .pstory__float--1 {
  animation: gg-g-bob 5s ease-in-out infinite;
}

.has-motion .pstory__float--2 {
  animation: gg-g-bob 6s ease-in-out -2s infinite;
}

/* ---- Phone --------------------------------------------------------------- */
.pphone {
  position: relative;
  z-index: 1;
  width: min(18.5rem, 100%);
  overflow: hidden;
  border: 6px solid var(--gg-forest);
  border-radius: 2rem;
  background: var(--gg-white);
  color: var(--gg-forest);
  box-shadow: 0 34px 60px rgba(24, 37, 27, 0.28);
}

.pphone__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gg-line);
  font-weight: var(--fw-heavy);
}

.pphone__top img {
  width: 1.25rem;
  height: auto;
}

.pphone__dots {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pphone__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gg-line);
}

.pphone__body {
  position: relative;
  height: 20.5rem;
}

.pscene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 18px;
  transition: opacity 0.4s ease, translate 0.5s var(--ease-out, ease), visibility 0s linear 0.5s;
}

.pscene.is-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

/* without JavaScript only the first scene shows */
html:not(.js) .pscene--0 {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.plabel {
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gg-text-muted);
}

/* scene 0: profile */
.pcard {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem;
  border-radius: 14px;
  background: var(--gg-tint);
}

.pcard__av,
.prow__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-green), var(--gg-green-deep));
  color: var(--gg-white);
}

.pcard__av .icon,
.prow__av .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.pcard__lines,
.prow__lines {
  flex: 1;
  display: grid;
  gap: 0.35rem;
}

.pcard__lines i,
.prow__lines i {
  display: block;
  height: 0.5rem;
  border-radius: 99px;
  background: #CDD1D5;
}

.pcard__lines i:last-child,
.prow__lines i:last-child {
  width: 60%;
  background: #E3E6E8;
}

.pcard__live {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--gg-ink);
  color: var(--gg-green);
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pchips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pchips span {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
}

.pchips .pchips__add {
  background: transparent;
  color: var(--gg-green-deep);
  outline: 2px dashed var(--gg-green);
  outline-offset: -2px;
}

.pmeter,
.pkeep {
  display: block;
  height: 0.6rem;
  overflow: hidden;
  border-radius: 99px;
  background: #E3E6E8;
}

.pmeter > span,
.pkeep > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gg-green-dark), var(--gg-green));
  transform-origin: 0 50%;
}

.has-motion .pscene.is-on .pcard { animation: gg-g-pop 0.5s var(--ease-spring) both; }
.has-motion .pscene.is-on .pchips span { animation: gg-g-pop 0.45s var(--ease-spring) both; }
.has-motion .pscene.is-on .pchips span:nth-child(2) { animation-delay: 0.12s; }
.has-motion .pscene.is-on .pchips span:nth-child(3) { animation-delay: 0.24s; }
.has-motion .pscene.is-on .pchips span:nth-child(4) { animation-delay: 0.36s; }
.has-motion .pscene.is-on .pmeter > span { animation: gg-g-grow 1.2s var(--ease-out) 0.3s both; }
.has-motion .pscene.is-on .pkeep > span { animation: gg-g-grow 1.1s var(--ease-out) 0.5s both; }

@keyframes gg-g-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* scene 1: search results, yours rises to the top */
.psearch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border: 2px solid var(--gg-forest);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
}

.psearch .icon {
  width: 1rem;
  height: 1rem;
  color: var(--gg-green-deep);
}

.psearch em {
  margin-left: auto;
  font-size: 0.6875rem;
  font-style: normal;
  color: var(--gg-text-muted);
}

.prows {
  display: grid;
  gap: 0.5rem;
}

.prow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  border: 2px solid var(--gg-line);
  border-radius: 14px;
  background: var(--gg-white);
}

.prow:not(.prow--you) .prow__av {
  background: #CDD1D5;
}

.prow--you {
  border-color: var(--gg-green);
  background: var(--gg-tint);
}

.prow__you {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--gg-green);
  color: var(--gg-ink);
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
}

.has-motion .pscene--1.is-on .prow--you {
  animation: gg-g-rise 0.9s var(--ease-spring) 0.2s both, gg-g-ping 1.4s ease-out 1.1s 2;
}

@keyframes gg-g-rise {
  from { translate: 0 calc(100% + 0.5rem); }
  to { translate: 0 0; }
}

.has-motion .pscene--1.is-on .prow:first-child {
  animation: gg-g-drop 0.9s var(--ease-spring) 0.2s both;
}

@keyframes gg-g-drop {
  from { translate: 0 calc(-100% - 0.5rem); }
  to { translate: 0 0; }
}

.ptap {
  position: absolute;
  right: 5.5rem;
  top: 9.6rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(24, 37, 27, 0.25);
  border: 2px solid var(--gg-white);
  opacity: 0;
}

.has-motion .pscene--1.is-on .ptap {
  animation: gg-g-tap 2.4s ease 1.2s infinite;
}

@keyframes gg-g-tap {
  0% { opacity: 0; scale: 1.6; }
  20% { opacity: 1; scale: 1; }
  35% { scale: 0.8; }
  55%, 100% { opacity: 0; scale: 1; }
}

/* scene 2: the week */
.pweek {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.pday {
  display: grid;
  place-items: center;
  height: 2.6rem;
  border: 2px solid var(--gg-line);
  border-radius: 10px;
  font-size: 0.625rem;
  font-weight: var(--fw-heavy);
  color: var(--gg-text-muted);
}

.pday.is-on {
  border-color: var(--gg-forest);
  background: var(--gg-forest);
  color: var(--gg-green);
}

.has-motion .pscene--2.is-on .pday.is-on {
  animation: gg-g-pop 0.45s var(--ease-spring) both;
  animation-delay: calc(var(--d) * 90ms + 0.15s);
}

.pslots {
  display: grid;
  gap: 0.35rem;
}

.pslots span {
  display: block;
  height: 1.6rem;
  border-radius: 8px;
  background: var(--gg-tint);
  border-left: 4px solid var(--gg-green);
}

.has-motion .pscene--2.is-on .pslots span {
  animation: gg-g-grow 0.7s var(--ease-out) both;
  transform-origin: 0 50%;
  animation-delay: calc(var(--d) * 120ms + 0.7s);
}

.pnote {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.8125rem;
}

.pnote .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gg-green-deep);
}

/* scene 3: you keep it all */
.pscene--3 {
  align-items: center;
  text-align: center;
}

.pdone {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--gg-green);
  color: var(--gg-ink);
}

.pdone .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.has-motion .pscene--3.is-on .pdone {
  animation: gg-g-pop 0.5s var(--ease-spring) both, gg-g-ping 1.4s ease-out 0.5s 2;
}

.pdone__title {
  font-size: 1.125rem;
  font-weight: var(--fw-heavy);
}

.ppay {
  display: grid;
  gap: 0.45rem;
  width: 100%;
}

.ppay div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: #F4F6F5;
  font-size: 0.8125rem;
}

.ppay dd {
  font-weight: var(--fw-heavy);
}

.ppay__you {
  background: var(--gg-forest) !important;
  color: var(--gg-white);
}

.ppay__you dd {
  font-size: 1.25rem;
  color: var(--gg-green);
}

.pkeep {
  width: 100%;
}

/* ---- Desktop: steps are a scroll story, the stage stays in view ------------ */
@media (min-width: 1024px) {
  .pstory {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-7);
    align-items: start;
  }

  .pstory__stage {
    position: sticky;
    top: max(6.5rem, calc(50vh - 16.5rem));
    grid-column: 2;
    grid-row: 1;
    min-height: 33rem;
  }

  .pstory__steps {
    grid-column: 1;
    grid-row: 1;
    gap: 0;
  }

  .pstory.is-scroll .pstory__step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 58vh;
    padding: var(--space-5) 0 var(--space-5) var(--space-6);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .pstory.is-scroll .pstory__step:first-child {
    min-height: 44vh;
    justify-content: flex-start;
    padding-top: var(--space-6);
  }

  .pstory.is-scroll .pstory__step:last-child {
    min-height: 46vh;
  }

  .pstory.is-scroll .pstory__title {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  }

  .pstory.is-scroll .pstory__num {
    width: 3.4rem;
    font-size: 2.5rem;
  }

  .pstory.is-scroll .pstory__step p,
  .pstory.is-scroll .pstory__points {
    padding-left: calc(3.4rem + var(--space-3));
  }

  .pstory.is-scroll .pstory__step p {
    font-size: var(--fs-lead);
  }

  .pstory.is-scroll .pstory__points li {
    font-size: 1.0625rem;
  }

  /* the bar becomes a rail down the left */
  .pstory.is-scroll .pstory__bar {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
    opacity: 1;
  }

  .pstory.is-scroll .pstory__bar > span {
    transform: scaleY(var(--p, 0));
    transform-origin: 50% 0;
  }

  .pstory.is-scroll .pstory__tab::after {
    inset: -0.5rem -0.5rem -0.5rem calc(var(--space-6) * -1);
  }
}

/* ==========================================================================
   2. Plan finder
   ========================================================================== */
.pfit {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--gg-tint);
}

html:not(.js) .pfit {
  display: none;
}

.pfit__q {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lead);
}

.pfit__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pfit__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.5rem 1.05rem;
  border: 2px solid rgba(24, 37, 27, 0.2);
  border-radius: var(--radius-pill);
  background: var(--gg-white);
  color: var(--gg-forest);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, translate 0.3s var(--ease-spring, ease);
}

.pfit__opt .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gg-green-deep);
  transition: color 0.25s ease, rotate 0.4s var(--ease-spring, ease);
}

.pfit__opt:hover {
  border-color: var(--gg-forest);
  translate: 0 -2px;
}

.pfit__opt[aria-pressed="true"] {
  border-color: var(--gg-forest);
  background: var(--gg-forest);
  color: var(--gg-white);
}

.pfit__opt[aria-pressed="true"] .icon {
  color: var(--gg-green);
  rotate: -10deg;
}

.pfit__result {
  min-height: 1.5em;
  margin-top: var(--space-4);
  font-weight: var(--fw-bold);
}

.pfit__result strong {
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--gg-green);
  color: var(--gg-ink);
}

/* cards react to the finder */
.plan {
  position: relative;
  transition: box-shadow 0.35s ease;
}

.plan__fit {
  position: absolute;
  z-index: 2;
  top: -0.95rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  white-space: nowrap;
  translate: -50% 0;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.3s ease, scale 0.45s var(--ease-spring, ease);
  pointer-events: none;
}

.plan__fit .icon {
  width: 1rem;
  height: 1rem;
  color: var(--gg-green);
}

.plan.is-fit {
  box-shadow: 0 0 0 3px var(--gg-forest), 0 22px 44px rgba(24, 37, 27, 0.16);
}

.plan.is-fit .plan__fit {
  opacity: 1;
  scale: 1;
}

.plan__features li {
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.plan__features li.is-hit {
  margin-inline: -0.45rem;
  padding: 0.1rem 0.45rem 0.1rem 2.2rem;
  background: rgba(81, 186, 108, 0.2);
  font-weight: var(--fw-bold);
}

.plan__features li.is-hit::before {
  left: 0.55rem;
}

.plan--featured .plan__features li.is-hit {
  background: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   3. Profile anatomy
   ========================================================================== */
.pa {
  display: grid;
  gap: var(--space-5);
}

.pa .pa__head {
  margin-bottom: 0;
}

.pa .pa__cta {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .pa {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head stage"
      "list stage"
      "cta stage";
    column-gap: var(--space-7);
    align-items: start;
  }

  .pa__head { grid-area: head; }
  .pa-stage { grid-area: stage; }
  .pa-list { grid-area: list; }
  .pa__cta { grid-area: cta; }
}

.pa-item {
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

.pa-item h3 {
  font-size: 1.125rem;
}

.pa-item__btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pa-item__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pa-item.is-active {
  border-color: var(--gg-forest);
  background: var(--gg-forest);
  color: var(--gg-white);
  --color-text-muted: #E0E0E0;
  --color-focus: var(--gg-white);
  box-shadow: 0 16px 34px rgba(24, 37, 27, 0.18);
}

.pa-item.is-active h3::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--gg-green);
  vertical-align: 0.12em;
}

.pa-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  border-radius: 32px;
  background: var(--gg-green);
}

@media (min-width: 1024px) {
  .pa-stage {
    min-height: 32rem;
    padding: var(--space-7) var(--space-4);
  }
}

.pa-stage__ring {
  position: absolute;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  left: -10rem;
  bottom: -11rem;
  border-radius: 50%;
  border: 2px dashed rgba(24, 37, 27, 0.2);
  pointer-events: none;
}

.pa-bubble {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--gg-white);
  color: var(--gg-green-deep);
  box-shadow: 0 12px 26px rgba(24, 37, 27, 0.18);
}

.pa-bubble .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.pa-bubble--star {
  top: 9%;
  right: 8%;
}

.pa-bubble--cam {
  bottom: 9%;
  left: 7%;
  background: var(--gg-forest);
  color: var(--gg-green);
}

@media (max-width: 639.98px) {
  .pa-bubble {
    display: none; /* the profile fills the width on phones */
  }
}

.has-motion .pa-bubble--star { animation: gg-g-bob 5.5s ease-in-out infinite; }
.has-motion .pa-bubble--cam { animation: gg-g-bob 6.5s ease-in-out -3s infinite; }

.pa-mock {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.6rem;
  width: min(21rem, 100%);
  padding: 1rem;
  border-radius: 24px;
  background: var(--gg-white);
  color: var(--gg-forest);
  box-shadow: 0 34px 60px rgba(24, 37, 27, 0.26);
}

.pa-mock__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.4rem;
}

.pa-mock__av {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gg-green), var(--gg-green-deep));
  color: var(--gg-white);
}

.pa-mock__av .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.pa-mock__lines,
.pa-quote {
  flex: 1;
  display: grid;
  gap: 0.35rem;
}

.pa-mock__lines i,
.pa-quote i {
  display: block;
  height: 0.55rem;
  border-radius: 99px;
  background: #CDD1D5;
}

.pa-mock__lines i:last-child,
.pa-quote i:last-child {
  width: 55%;
  background: #E3E6E8;
}

.pa-mock__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--gg-tint);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
}

.pa-mock__pin .icon {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gg-green-deep);
}

.pa-zone {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border: 2px solid transparent;
  border-radius: 14px;
  background: #F4F6F5;
  transition: opacity 0.35s ease, border-color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, scale 0.45s var(--ease-spring, ease);
}

.pa.has-zone .pa-zone {
  opacity: 0.45;
}

.pa.has-zone .pa-zone.is-on {
  opacity: 1;
  border-color: var(--gg-green);
  background: var(--gg-white);
  box-shadow: 0 0 0 5px rgba(81, 186, 108, 0.22), 0 14px 26px rgba(24, 37, 27, 0.12);
  scale: 1.035;
}

.pa-zone__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gg-text-muted);
}

.pa-zone__label em {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-green);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: none;
}

.pa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pa-chips span {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-white);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
}

.pa-stars {
  display: flex;
  gap: 0.2rem;
  color: var(--gg-green-deep);
}

.pa-stars .icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: transparent;
  transition: fill 0.3s ease;
}

.pa-zone.is-on .pa-stars .icon {
  fill: var(--gg-green);
}

.pa-zone.is-on .pa-stars .icon:nth-child(2) { transition-delay: 0.08s; }
.pa-zone.is-on .pa-stars .icon:nth-child(3) { transition-delay: 0.16s; }
.pa-zone.is-on .pa-stars .icon:nth-child(4) { transition-delay: 0.24s; }
.pa-zone.is-on .pa-stars .icon:nth-child(5) { transition-delay: 0.32s; }

.pa-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.pa-tiles span {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gg-green), var(--gg-green-dark));
  color: var(--gg-white);
}

.pa-tiles span:nth-child(2) {
  background: linear-gradient(135deg, #2B3B2F, var(--gg-forest));
  color: var(--gg-green);
}

.pa-tiles span:nth-child(3) {
  background: linear-gradient(135deg, #BFE8CB, #8FD3A3);
  color: var(--gg-forest);
}

.pa-tiles .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.has-motion .pa-zone.is-on .pa-tiles span {
  animation: gg-g-pop 0.45s var(--ease-spring) both;
}

.has-motion .pa-zone.is-on .pa-tiles span:nth-child(2) { animation-delay: 0.1s; }
.has-motion .pa-zone.is-on .pa-tiles span:nth-child(3) { animation-delay: 0.2s; }

.pa-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.pa-days span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid var(--gg-line);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  color: var(--gg-text-muted);
}

.pa-days .is-on {
  border-color: var(--gg-forest);
  background: var(--gg-forest);
  color: var(--gg-green);
}

.has-motion .pa-zone.is-on .pa-days .is-on {
  animation: gg-g-pop 0.4s var(--ease-spring) both;
}

.has-motion .pa-zone.is-on .pa-days span:nth-child(2) { animation-delay: 0.06s; }
.has-motion .pa-zone.is-on .pa-days span:nth-child(3) { animation-delay: 0.12s; }
.has-motion .pa-zone.is-on .pa-days span:nth-child(4) { animation-delay: 0.18s; }
.has-motion .pa-zone.is-on .pa-days span:nth-child(5) { animation-delay: 0.24s; }

/* ==========================================================================
   4. Availability planner
   ========================================================================== */
.avail {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-radius: 32px;
  background: var(--gg-forest);
}

.avail__deco {
  position: absolute;
  z-index: -1;
  width: 30rem;
  height: 30rem;
  right: -12rem;
  top: -14rem;
  border-radius: 50%;
  border: 2px solid rgba(81, 186, 108, 0.3);
  box-shadow: inset 0 0 0 4rem rgba(81, 186, 108, 0.05);
  pointer-events: none;
}

.avail__opts {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.aopt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.aopt--lead {
  grid-template-columns: auto minmax(0, 1fr);
}

.aopt.is-on {
  border-color: rgba(81, 186, 108, 0.6);
  background: rgba(81, 186, 108, 0.14);
}

.aopt__icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gg-green);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.aopt.is-on .aopt__icon {
  background: var(--gg-green);
  color: var(--gg-ink);
}

.aopt__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.aopt h3 {
  font-size: 1.0625rem;
  line-height: 1.25;
}

.aopt__tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(81, 186, 108, 0.18);
  color: var(--gg-green);
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  vertical-align: 0.15em;
  white-space: nowrap;
}

.aopt p {
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: #E0E0E0;
}

.aopt .aopt__hint {
  color: var(--gg-green);
  font-weight: var(--fw-bold);
}

html:not(.js) .aopt__hint,
html:not(.js) .aopt__switch,
html:not(.js) .aplan {
  display: none;
}

/* switch: 44px tall hit area, smaller track */
.aopt__switch {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}

.aopt__switch > span {
  position: relative;
  width: 3.25rem;
  height: 1.9rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.3s ease;
}

.aopt__switch > span::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--gg-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: translate 0.35s var(--ease-spring, ease);
}

.aopt__switch[aria-checked="true"] > span {
  background: var(--gg-green);
}

.aopt__switch[aria-checked="true"] > span::after {
  translate: 1.35rem 0;
}

/* planner */
.aplan {
  position: relative;
  align-self: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--gg-white);
  color: var(--gg-forest);
  --color-focus: var(--gg-ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.aplan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.aplan__title {
  font-size: 1.25rem;
  font-weight: var(--fw-heavy);
}

.aplan__count {
  font-size: var(--fs-small);
  color: var(--gg-text-muted);
}

.aplan__count b {
  font-size: 1.25rem;
  color: var(--gg-forest);
  font-variant-numeric: tabular-nums;
}

/* phones: days run down, the three slots across (the source order is one row per slot;
   flowing by column turns it on its side) */
.aplan__grid {
  display: grid;
  grid-template-rows: repeat(8, auto);
  grid-template-columns: 2.75rem repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 0.4rem;
  align-items: center;
}

.aplan__day,
.aplan__slot-name {
  font-size: 0.75rem;
  font-weight: var(--fw-heavy);
  color: var(--gg-text-muted);
}

.aplan__slot-name {
  text-align: center;
}

.aplan__cell {
  position: relative;
  height: var(--tap);
  padding: 0;
  border: 2px dashed #B9C1BC;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, scale 0.3s var(--ease-spring, ease);
}

.aplan__cell:hover {
  border-color: var(--gg-forest);
}

.aplan__cell.is-on {
  border-style: solid;
  border-color: var(--gg-green);
  background: var(--gg-green);
}

.aplan__cell.is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2.5px solid var(--gg-ink);
  border-bottom: 2.5px solid var(--gg-ink);
  translate: -50% -50%;
  rotate: -45deg;
}

.aplan__cell.is-busy {
  border-style: solid;
  border-color: #D5DAD7;
  background: repeating-linear-gradient(-45deg, #E4E8E5 0 6px, #F4F6F5 6px 12px);
  cursor: not-allowed;
}

.aplan__cell.is-busy::after {
  content: "Busy";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  translate: none;
  rotate: none;
  width: auto;
  height: auto;
  font-size: 0.625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  color: var(--gg-text-muted);
}

.has-motion .aplan__cell.is-pop {
  animation: gg-g-pop 0.35s var(--ease-spring) both;
}

.aplan__next {
  display: grid;
  gap: 0.5rem;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease-out, ease), opacity 0.4s ease, margin-top 0.4s ease;
}

.avail.is-renew .aplan__next {
  max-height: 6rem;
  margin-top: var(--space-4);
  opacity: 1;
}

.aplan__next-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

.aplan__next-label .icon {
  width: 1rem;
  height: 1rem;
  color: var(--gg-green-deep);
}

.has-motion .avail.is-renew .aplan__next-label .icon {
  animation: gg-g-spin 2.4s linear infinite;
}

@keyframes gg-g-spin {
  to { rotate: 360deg; }
}

.aplan__next-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  align-items: end;
  height: 2rem;
}

.aplan__next-days span {
  display: block;
  height: calc(0.3rem + var(--n, 0) * 0.56rem);
  border-radius: 6px;
  background: var(--gg-green);
  opacity: calc(0.35 + var(--n, 0) * 0.22);
  transition: height 0.4s var(--ease-spring, ease), opacity 0.3s ease;
}

/* sits under the week; its space is kept while the same-day switch is on, so nothing jumps */
.aplan__toast {
  position: relative;
  margin-top: var(--space-4);
  display: none;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--gg-ink);
  color: var(--gg-white);
  box-shadow: 0 14px 30px rgba(24, 37, 27, 0.3);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.35s ease, translate 0.45s var(--ease-spring, ease);
}

.avail.is-sameday .aplan__toast {
  display: flex;
}

.aplan__toast.is-show {
  opacity: 1;
  translate: 0 0;
}

.aplan__toast b,
.aplan__toast small {
  display: block;
}

.aplan__toast small {
  font-size: 0.75rem;
  color: #E0E0E0;
}

.aplan__toast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--gg-green);
  color: var(--gg-ink);
}

.has-motion .aplan__toast.is-show .aplan__toast-icon {
  animation: gg-g-ping 1.2s ease-out 2;
}

.aplan__toast-icon .icon {
  width: 1.1rem;
  height: 1.1rem;
}

@media (min-width: 640px) {
  .avail {
    padding: var(--space-6);
  }

  .aplan {
    padding: var(--space-5);
  }

  .aplan__grid {
    grid-template-rows: none;
    grid-template-columns: 5rem repeat(7, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .aplan__day {
    text-align: center;
  }

  .aplan__slot-name {
    text-align: left;
  }

}

@media (min-width: 1024px) {
  .avail {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: var(--space-6);
    padding: var(--space-7);
  }
}

/* ==========================================================================
   5. Profile meter over the three steps
   ========================================================================== */
.gmeter {
  --gp: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--gg-tint);
}

html:not(.js) .gmeter {
  display: none;
}

.gmeter__label {
  font-weight: var(--fw-heavy);
}

.gmeter__track {
  flex: 1 1 12rem;
  height: 0.75rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--gg-white);
}

.gmeter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gg-green-dark), var(--gg-green));
  transform: scaleX(var(--gp));
  transform-origin: 0 50%;
}

.gmeter__value {
  min-width: 4.5ch;
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}

.gmeter__value b {
  font-size: 1.5rem;
}

.gmeter__done {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--gg-forest);
  color: var(--gg-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
}

.gmeter__done .icon {
  width: 1rem;
  height: 1rem;
  color: var(--gg-green);
}

.gmeter.is-done .gmeter__done {
  display: inline-flex;
  animation: gg-g-pop 0.45s var(--ease-spring, ease) both;
}

@media (min-width: 768px) {
  .gmeter {
    border-radius: var(--radius-pill);
  }
}

/* ==========================================================================
   6. Skill matcher
   ========================================================================== */
.skill {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

html:not(.js) .skill {
  display: none;
}

.skill__label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-heavy);
}

.skill__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0 0.4rem 0 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--gg-white);
  color: var(--gg-forest);
  box-shadow: 0 12px 30px rgba(24, 37, 27, 0.16);
}

.skill__field:focus-within {
  outline: 3px solid var(--gg-ink);
  outline-offset: 3px;
}

.skill__field > .icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gg-green-deep);
}

.skill__input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  color: var(--gg-forest);
  font: inherit;
  font-size: 1.0625rem;
}

.skill__input:focus,
.skill__input:focus-visible {
  outline: none;
}

.skill__input::placeholder {
  color: var(--gg-text-muted);
}

.skill__clear {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gg-tint);
  color: var(--gg-forest);
  cursor: pointer;
}

.skill__clear[hidden] {
  display: none;
}

.skill__clear .icon {
  width: 1rem;
  height: 1rem;
}

.skill__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.skill__chips button {
  min-height: var(--tap);
  padding: 0 1rem;
  border: 2px solid rgba(24, 37, 27, 0.4);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--gg-ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.skill__chips button:hover,
.skill__chips button[aria-pressed="true"] {
  border-color: var(--gg-ink);
  background: var(--gg-ink);
  color: var(--gg-white);
}

.skill__result {
  min-height: 1.5em;
  margin-top: var(--space-3);
  font-weight: var(--fw-bold);
}

.skill__result strong {
  white-space: nowrap;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--gg-ink);
  color: var(--gg-white);
}

.who-card {
  transition: box-shadow 0.35s ease, outline-color 0.35s ease;
  outline: 3px solid transparent;
  outline-offset: 4px;
}

.who-card.is-match {
  outline-color: var(--gg-ink);
  box-shadow: 0 22px 44px rgba(24, 37, 27, 0.22);
}

.who-card .icon-badge {
  transition: background-color 0.3s ease, color 0.3s ease, rotate 0.45s var(--ease-spring, ease);
}

.who-card.is-match .icon-badge {
  background: var(--gg-ink);
  color: var(--gg-green);
  rotate: -8deg;
}

.who-card mark {
  padding: 0 0.2em;
  border-radius: 4px;
  background: var(--gg-green);
  color: var(--gg-ink);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pscene,
  .pstory__float,
  .pa-bubble,
  .aplan__toast,
  .aplan__next,
  .pscene *,
  .pstory__points li,
  .pa-zone,
  .pa-zone * {
    animation: none !important;
    transition-duration: 0.01s !important;
  }

  .pstory.is-auto .pstory__step.is-active .pstory__bar > span {
    animation: none;
    transform: scaleX(1);
  }
}