/* Zeal Publishers — the Authority Readiness Score (Job 7).
 * The emerald compass with the amber needle: hero (idle sway), one-question cards on a soft stack
 * with a dotted trail, the frosted gate, then the reveal (ring segments tally, the needle springs,
 * the archetype card turns over, the tier ribbon drops). Motion is transform/opacity (plus SVG
 * stroke); everything lands in its final state under reduced motion. */

.zs-as { --as-paper: #FBF8F1; --as-spring: cubic-bezier(.34, 1.45, .64, 1); --as-ease: cubic-bezier(.22, .9, .3, 1); }

/* ---------- Hero ---------- */
.as-hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.as-hero__grid { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: center; padding-top: clamp(1rem, .6rem + 2vw, 2.5rem); }
.as-hero__title { margin-top: .9rem; font-size: clamp(2.3rem, 1.3rem + 4vw, 4.6rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.as-hero__title em { color: var(--z-amber-ink); }
.as-hero__lede { margin-top: 1rem; max-width: 36rem; }
.as-hero__dial { display: flex; justify-content: center; }
.as-hero__dial .as-compass { width: min(62vw, 300px); }
@media (min-width: 900px) {
  .as-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .as-hero__dial .as-compass { width: min(100%, 340px); }
}

/* ---------- The compass ---------- */
.as-compass { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 22px 34px rgba(2, 29, 19, .28)); }
.as-compass__needle { transform-box: view-box; transform-origin: 120px 120px; }
.as-compass.is-idle .as-compass__needle { animation: as-sway 5.5s ease-in-out infinite; }
@keyframes as-sway { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
.as-compass__tick { stroke: rgba(250, 249, 245, .42); stroke-width: 1.4; }
.as-compass__tick--major { stroke: rgba(250, 249, 245, .8); stroke-width: 2; }
.as-compass__lbl { fill: rgba(250, 249, 245, .7); font: 600 9.5px var(--z-font-body); letter-spacing: .04em; }
.as-compass__track { fill: none; stroke: rgba(250, 249, 245, .12); stroke-width: 10; stroke-linecap: round; }
.as-compass__seg { fill: none; stroke: var(--z-amber); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .45s var(--as-ease); }
.as-compass__seg.is-weak { stroke: #F8C35A; }
.as-compass__num { fill: var(--z-cream); font: 600 30px var(--z-font-display); letter-spacing: -.02em; }

/* ---------- Start (role) ---------- */
.as-start { margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--z-r-lg); background: var(--as-paper); box-shadow: var(--z-shadow-2), inset 0 0 0 1px rgba(40, 40, 40, .07); }
.as-start__q { font-size: var(--z-fs-lg); font-weight: 500; }
.as-roles { display: grid; gap: .65rem; margin-top: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .as-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .as-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-role {
  min-height: 56px; padding: .85rem 1.1rem; border-radius: var(--z-r-md); text-align: left;
  border: 1.5px solid rgba(6, 69, 48, .18); background: var(--z-cream); color: var(--z-green);
  font: 600 1rem/1.3 var(--z-font-body); cursor: pointer;
  transition: transform .2s var(--as-ease), box-shadow .2s, border-color .2s, background .2s;
}
.as-role:hover { transform: translateY(-2px); border-color: var(--z-amber); box-shadow: var(--z-shadow-2); }
.as-role:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.as-role.is-picked { background: var(--z-green); color: var(--z-cream); border-color: var(--z-green); }
.as-role--route { font-weight: 500; color: var(--z-ink-muted); border-style: dashed; }
.as-route { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--z-r-md); background: var(--z-amber-tint); }
.as-route p { margin-bottom: .8rem; }
.as-resume { margin-top: 1rem; font-size: var(--z-fs-sm); color: var(--z-ink-muted); }
.as-linkbtn { padding: 0; border: 0; background: none; color: var(--z-green); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.as-noscript { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--z-amber); border-radius: 6px; background: var(--z-amber-tint); }

/* ---------- The questions ---------- */
.as-tool { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem); }
.as-tool__in { max-width: 46rem; }
.as-trail { position: relative; height: 26px; margin-bottom: .9rem; }
.as-trail__dots { position: absolute; inset: 11px 0 auto; display: flex; justify-content: space-between; }
.as-trail__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(6, 69, 48, .18); transition: background .3s, transform .3s; }
.as-trail__dots i.is-done { background: var(--z-amber); }
.as-trail__dots::before { content: ""; position: absolute; inset: 2px 3px auto; border-top: 2px dotted rgba(6, 69, 48, .2); z-index: -1; }
.as-trail__marker { position: absolute; top: 0; left: 0; width: 26px; height: 26px; margin-left: -10px; transition: left .5s var(--as-spring); }
.as-trail__marker svg { width: 100%; height: 100%; transition: transform .6s var(--as-spring); }
.as-tool__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.as-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .8rem 0 .5rem; border: 0; border-radius: var(--z-r-sm); background: none; color: var(--z-green); font: 600 .95rem var(--z-font-body); cursor: pointer; }
.as-back:hover { background: rgba(6, 69, 48, .06); }
.as-back:disabled { visibility: hidden; }
.as-back__icon { width: 18px; height: 18px; transform: scaleX(-1); }
.as-count { font-size: var(--z-fs-sm); color: var(--z-ink-muted); font-weight: 600; }
.as-hint { margin-top: 1rem; text-align: center; font-size: var(--z-fs-xs); color: var(--z-ink-muted); }
@media (hover: none) { .as-hint { display: none; } }

.as-stage { position: relative; display: grid; }
.as-stage::before, .as-stage::after {
  content: ""; grid-area: 1 / 1; border-radius: var(--z-r-lg); background: var(--as-paper);
  box-shadow: var(--z-shadow-1), inset 0 0 0 1px rgba(40, 40, 40, .06);
}
.as-stage::before { transform: translateY(14px) scale(.94); opacity: .55; }
.as-stage::after { transform: translateY(7px) scale(.97); opacity: .8; }
.as-card {
  grid-area: 1 / 1; position: relative; z-index: 1; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border-radius: var(--z-r-lg); background: var(--as-paper);
  box-shadow: var(--z-shadow-2), inset 0 0 0 1px rgba(40, 40, 40, .07);
}
.as-card.is-enter { animation: as-card-in .42s var(--as-ease) both; }
.as-card.is-enter-back { animation: as-card-in-back .42s var(--as-ease) both; }
.as-card.is-leave { animation: as-card-out .3s ease-in both; pointer-events: none; }
.as-card.is-leave-back { animation: as-card-out-back .3s ease-in both; pointer-events: none; }
@keyframes as-card-in { from { opacity: 0; transform: translateX(46px) rotate(1.2deg); } to { opacity: 1; transform: none; } }
@keyframes as-card-in-back { from { opacity: 0; transform: translateX(-46px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
@keyframes as-card-out { to { opacity: 0; transform: translateX(-60px) rotate(-2deg); } }
@keyframes as-card-out-back { to { opacity: 0; transform: translateX(60px) rotate(2deg); } }
.as-card__k { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--z-amber-ink); }
.as-card__q { margin-top: .5rem; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.as-card__q:focus { outline: none; }
.as-opts { display: grid; gap: .6rem; margin-top: 1.25rem; }
.as-opt {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 56px; padding: .7rem 1rem;
  border: 1.5px solid rgba(6, 69, 48, .16); border-radius: var(--z-r-md); background: var(--z-cream);
  color: var(--z-charcoal); font: 500 1.0625rem/1.35 var(--z-font-body); text-align: left; cursor: pointer;
  transition: transform .18s var(--as-ease), border-color .18s, background .18s, color .18s, box-shadow .18s;
}
.as-opt:hover { border-color: var(--z-amber); box-shadow: var(--z-shadow-1); }
.as-opt:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.as-opt:active { transform: scale(.985); }
.as-opt__key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(6, 69, 48, .08); color: var(--z-green); font-size: .85rem; font-weight: 700; }
.as-opt[aria-checked="true"] { background: var(--z-green); border-color: var(--z-green); color: var(--z-cream); }
.as-opt[aria-checked="true"] .as-opt__key { background: var(--z-amber); color: var(--z-green-950); }
.as-opt.is-pressed { animation: as-press .26s var(--as-ease); }
@keyframes as-press { 40% { transform: scale(.97); } }

/* ---------- The gate ---------- */
.as-gate { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem); }
.as-gate__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .as-gate__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.as-gate__dial { position: relative; justify-self: center; width: min(44vw, 180px); }
@media (min-width: 900px) { .as-gate__dial { width: min(100%, 320px); } }
.as-gate__dial .as-compass { filter: drop-shadow(0 22px 34px rgba(2, 29, 19, .28)) blur(5px); transition: filter .9s var(--as-ease); }
.as-gate__dial .as-compass .as-compass__needle { animation: as-drift 3.2s ease-in-out infinite; }
@keyframes as-drift { 0%, 100% { transform: rotate(-70deg); } 50% { transform: rotate(60deg); } }
.as-frost {
  position: absolute; inset: -4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(250, 249, 245, .55), rgba(250, 249, 245, .25) 60%, rgba(250, 249, 245, 0) 72%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform .9s var(--as-ease), opacity .9s var(--as-ease);
}
.as-gate.is-clearing .as-compass { filter: drop-shadow(0 22px 34px rgba(2, 29, 19, .28)) blur(0); }
.as-gate.is-clearing .as-frost { transform: scale(1.6); opacity: 0; }
.as-h2 { font-size: var(--z-fs-xl); font-weight: 500; line-height: 1.15; }
.as-h2 em { color: var(--z-amber-ink); }
.as-h2--sm { font-size: var(--z-fs-lg); margin-bottom: 1rem; }
.as-h2:focus { outline: none; }
.as-gate__text { margin-top: .75rem; max-width: 34rem; }
.as-form { margin-top: 1.25rem; max-width: 30rem; }
.as-err { min-height: 1.4em; margin-top: .6rem; color: var(--z-red-ink); font-weight: 600; font-size: var(--z-fs-sm); }

/* ---------- The result board ---------- */
.as-result { padding-block: clamp(2rem, 1.5rem + 2vw, 4rem) 0; }
.as-board { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .as-board { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.as-board__dial { position: relative; justify-self: center; width: min(78vw, 360px); }
.as-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; margin-top: 1rem; text-align: center; }
.as-legend li { opacity: .35; transition: opacity .3s; }
.as-legend li.is-on { opacity: 1; }
.as-legend b { display: block; font: 600 1.25rem var(--z-font-display); color: var(--z-green); }
.as-legend span { display: block; font-size: .72rem; font-weight: 600; line-height: 1.2; color: var(--z-ink-muted); }
.as-skip { position: absolute; top: 0; right: -.25rem; min-height: 36px; padding: 0 .8rem; border: 1px solid rgba(6, 69, 48, .2); border-radius: var(--z-r-pill); background: var(--z-cream); color: var(--z-green); font: 600 .85rem var(--z-font-body); cursor: pointer; }
.as-skip[hidden] { display: none; }
.as-res__title { margin-top: .6rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.as-res__title:focus { outline: none; }
.as-res__title b { font-weight: 600; color: var(--z-green); font-variant-numeric: tabular-nums; }
.as-res__title small { font-size: .45em; color: var(--z-ink-muted); letter-spacing: 0; }
.as-ribbon {
  position: relative; display: inline-block; margin-top: 1rem; padding: .55rem 1.6rem .5rem 1.1rem;
  background: var(--z-amber); color: var(--z-green-950); font: 700 .85rem var(--z-font-body); letter-spacing: var(--z-track-caps); text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  transform-origin: top center; opacity: 0; transform: translateY(-18px) rotateX(70deg);
  transition: transform .55s var(--as-spring), opacity .3s;
}
.as-ribbon.is-in { opacity: 1; transform: none; }
.as-tier-line { margin-top: .9rem; max-width: 34rem; font-size: var(--z-fs-md); }

.as-arch { margin-top: 1.4rem; perspective: 900px; max-width: 30rem; }
.as-arch__card { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s var(--as-ease); }
.as-arch.is-flipped .as-arch__card { transform: rotateY(180deg); }
.as-arch__face {
  grid-area: 1 / 1; padding: 1.2rem 1.35rem; border-radius: var(--z-r-md); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.as-arch__face--front { display: flex; align-items: center; gap: .8rem; background: var(--z-green); color: var(--z-amber); font: 600 1rem var(--z-font-body); }
.as-arch__face--front svg { width: 40px; height: 40px; }
.as-arch__face--front span { color: var(--z-green-200); }
.as-arch__face--back { transform: rotateY(180deg); background: var(--as-paper); box-shadow: var(--z-shadow-2), inset 0 0 0 1.5px var(--z-amber); }
.as-arch__k { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--z-amber-ink); }
.as-arch__name { margin-top: .2rem; font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.1 var(--z-font-display); color: var(--z-green); }
.as-arch__line { margin-top: .45rem; }

.as-share { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.as-share .z-btn { min-height: 44px; padding-inline: 1rem; font-size: .9rem; }
.as-share__done { flex-basis: 100%; min-height: 1.3em; font-size: var(--z-fs-sm); color: var(--z-green); font-weight: 600; }

/* ---------- After the board ---------- */
.as-after { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 3vw, 5rem); }
.as-h3 { font-size: var(--z-fs-lg); font-weight: 500; margin-bottom: 1rem; }
.as-bars { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .as-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; } }
.as-bar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.as-bar__label { font-weight: 700; color: var(--z-green); }
.as-bar__tag { margin-left: .5rem; padding: .1rem .5rem; border-radius: var(--z-r-pill); background: var(--z-amber-tint); color: var(--z-amber-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.as-bar__num { font: 600 1.15rem var(--z-font-display); color: var(--z-green); font-variant-numeric: tabular-nums; }
.as-bar__num small { font-size: .75em; color: var(--z-ink-muted); }
.as-bar__track { display: block; height: 10px; margin-top: .4rem; border-radius: var(--z-r-pill); background: rgba(6, 69, 48, .1); overflow: hidden; }
.as-bar__fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--z-green), var(--z-sage)); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--as-ease); }
.as-bar.is-weak .as-bar__fill { background: linear-gradient(90deg, var(--z-amber-press), var(--z-amber)); }
.as-bar.is-in .as-bar__fill { transform: scaleX(1); }
.as-bar__read { margin-top: .45rem; color: var(--z-ink-muted); font-size: var(--z-fs-sm); }
.as-plan { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.as-steps { display: grid; gap: .8rem; counter-reset: as-step; }
@media (min-width: 900px) { .as-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.as-steps li { position: relative; padding: 1.1rem 1.2rem 1.2rem 3.4rem; border-radius: var(--z-r-md); background: var(--as-paper); box-shadow: var(--z-shadow-1), inset 0 0 0 1px rgba(40, 40, 40, .06); counter-increment: as-step; }
.as-steps li::before { content: counter(as-step); position: absolute; left: 1.05rem; top: 1rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--z-green); color: var(--z-amber); font: 600 .95rem var(--z-font-display); }
.as-steps small { display: block; margin-bottom: .2rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--z-amber-ink); }
.as-cta { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: var(--z-r-lg); }
.as-cta__h { font-size: var(--z-fs-xl); font-weight: 500; line-height: 1.15; color: var(--z-cream); }
.as-cta__p { margin-top: .7rem; max-width: 40rem; color: var(--z-green-200); }
.as-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.as-cta__btns .z-btn { white-space: normal; text-align: center; line-height: 1.2; }
.as-cta__btns .z-btn[hidden] { display: none; }
.as-cta__done { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--z-r-sm); background: rgba(250, 249, 245, .1); color: var(--z-cream); font-weight: 600; }
.as-cta__or { margin-top: 1rem; color: var(--z-green-200); font-size: var(--z-fs-sm); }
.as-cta__or a { color: var(--z-amber); }
.as-quote { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.as-retake { margin-top: 2rem; text-align: center; }

/* ---------- A shared result ---------- */
.as-hero--shared { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.as-board--shared .as-tier-line { margin-bottom: 1.4rem; }
.as-shared__fine { margin-top: .7rem; font-size: var(--z-fs-sm); color: var(--z-ink-muted); }
.as-bars--shared { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- How it works + FAQ ---------- */
.as-how__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (min-width: 900px) { .as-how__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.as-how__grid p { margin-top: .9rem; }
.as-how__areas { display: grid; gap: .45rem; margin-top: 1rem; padding-left: 1.1rem; list-style: disc; }
.as-how__areas span { color: var(--z-ink-muted); }
.as-faq__item { border-bottom: 1px solid rgba(6, 69, 48, .15); padding: .9rem 0; }
.as-faq__item summary { cursor: pointer; font-weight: 700; color: var(--z-green); min-height: 28px; }
.as-faq__item p { margin-top: .5rem; }

/* ---------- Reduced motion: final states, no sway, spring or flips ---------- */
@media (prefers-reduced-motion: reduce) {
  .as-compass.is-idle .as-compass__needle, .as-gate__dial .as-compass .as-compass__needle { animation: none; }
  .as-card.is-enter, .as-card.is-enter-back, .as-card.is-leave, .as-card.is-leave-back, .as-opt.is-pressed { animation: none; }
  .as-ribbon, .as-arch__card, .as-bar__fill, .as-compass__seg, .as-trail__marker, .as-trail__marker svg,
  .as-gate__dial .as-compass, .as-frost, .as-role { transition: none; }
  .as-arch__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .as-arch.is-flipped .as-arch__card { transform: none; }
  .as-arch.is-flipped .as-arch__face--front { display: none; }
  .as-arch.is-flipped .as-arch__face--back { transform: none; }
}

/* ---------- Print: the result only ---------- */
@media print {
  .as-hero, .as-tool, .as-gate, .as-how, .as-share, .as-skip, .as-cta__btns, .as-retake { display: none !important; }
  .as-bar__fill { transform: none !important; }
}
.as-gate__back { margin-top: 1rem; font-size: var(--z-fs-sm); }