/* Philippians Academic Advising - shared stylesheet */

/* ---- tokens ---- */
:root {
  --pa-paper:      #f4f7f1;
  --pa-panel:      #ffffff;
  --pa-panel-warm: #fbfaf5;
  --pa-ink:        #14261c;
  --pa-ink-soft:   #4c6154;
  --pa-ink-faint:  #7f9186;
  --pa-rule:       #dde5dc;
  --pa-rule-soft:  #eaefe8;
  --pa-green:      #1b6b45;
  --pa-green-deep: #0e3a26;
  --pa-green-lift: #e2f0e6;
  --pa-red:        #b3382a;
  --pa-red-wash:   #fbe9e6;
  --pa-amber:      #b07d12;
  --pa-amber-wash: #fbf1dc;
  --pa-good:       #2c7d51;
  --pa-good-wash:  #e2f2e7;
  --pa-on-deep:    #edf5ef;
  --pa-on-deep-dim:#a9c6b5;
  /* Used only on the deep green band, which is dark in either theme,
     so this one gold works everywhere. */
  --pa-gold:       #ddbf6e;
  /* The color of the highlight that sweeps across the Guardian Angel
     wordmark. Separate from --pa-gold on purpose, so changing the sheen
     does not change the gold on the Comprehensive and Immersion tiers. */
  --pa-sheen:      #8ed0f2;
  --pa-shadow:     0 1px 2px rgba(20,38,28,.04), 0 10px 30px rgba(20,38,28,.07);
  --pa-shadow-lift:0 2px 4px rgba(20,38,28,.05), 0 18px 44px rgba(20,38,28,.11);
  /* Montserrat carries the whole brand. One family, worked hard across weights. */
  --pa-serif: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pa-sans:  "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pa-mono:  "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The one exception. This is the STUDENT'S Word document, not our brand,
     so it is set in a document face. Change it to var(--pa-sans) if you
     would rather the page be Montserrat with no exceptions at all. */
  --pa-doc:   Georgia, "Times New Roman", serif;
}
/* Dark theme. If your WordPress theme is light only, you can delete
   this whole block and the one after it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pa-paper:      #0d1512;
    --pa-panel:      #15201b;
    --pa-panel-warm: #192421;
    --pa-ink:        #e8efe9;
    --pa-ink-soft:   #a8bcb0;
    --pa-ink-faint:  #7d9086;
    --pa-rule:       #2a3a32;
    --pa-rule-soft:  #1e2b25;
    --pa-green:      #63c08d;
    --pa-green-deep: #0b2a1c;
    --pa-green-lift: #173223;
    --pa-red:        #e2907f;
    --pa-red-wash:   #331f1b;
    --pa-amber:      #d9a94f;
    --pa-amber-wash: #302614;
    --pa-good:       #6cc494;
    --pa-good-wash:  #19301f;
    --pa-on-deep:    #e8efe9;
    --pa-on-deep-dim:#9ab8a7;
    --pa-shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    --pa-shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --pa-paper:#0d1512; --pa-panel:#15201b; --pa-panel-warm:#192421;
  --pa-ink:#e8efe9; --pa-ink-soft:#a8bcb0; --pa-ink-faint:#7d9086;
  --pa-rule:#2a3a32; --pa-rule-soft:#1e2b25;
  --pa-green:#63c08d; --pa-green-deep:#0b2a1c; --pa-green-lift:#173223;
  --pa-red:#e2907f; --pa-red-wash:#331f1b;
  --pa-amber:#d9a94f; --pa-amber-wash:#302614;
  --pa-good:#6cc494; --pa-good-wash:#19301f;
  --pa-on-deep:#e8efe9; --pa-on-deep-dim:#9ab8a7;
  --pa-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --pa-shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.45);
}

/* ---- base ---- */
body { background: var(--pa-paper); margin: 0; }

.pa { box-sizing: border-box; }
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }

.pa-band {
  background: var(--pa-paper);
  color: var(--pa-ink);
  font-family: var(--pa-sans);
  font-size: 16.5px;   /* Montserrat runs large, so this sits a half-step down */
  line-height: 1.68;   /* and wide, so the lines need more air */
  -webkit-font-smoothing: antialiased;
  padding: 0 20px;
}
.pa-band > .pa-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 76px;
}
.pa-band--deep { background: var(--pa-green-deep); color: var(--pa-on-deep); position: relative; overflow: hidden; }
.pa-band--deep > .pa-inner { position: relative; z-index: 1; }
/* Ambient light behind the flagship band. Decorative only. */
.pa-glow {
  position: absolute; top: -320px; right: -200px;
  width: 760px; height: 760px; max-width: 140vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(109,200,150,.20), rgba(109,200,150,0) 66%);
  pointer-events: none; z-index: 0;
  animation: pa-drift 22s ease-in-out infinite alternate;
}
@keyframes pa-drift { to { transform: translate3d(-70px, 60px, 0) scale(1.14); } }

/* The wordmark. Painted solid, with a slow highlight passing across it,
   so it is fully legible at rest and never animates in from nothing. */
.pa-wordmark {
  font-family: var(--pa-serif);
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  font-weight: 800; letter-spacing: -.045em;
  /* The gradient is clipped to the text, and the paint area is this box.
     A tight line-height pushes the descender on "g" outside it and the tail
     disappears, so leave room below the baseline. */
  line-height: 1.08;
  padding-bottom: .1em;
  margin: 0 0 10px; color: var(--pa-on-deep);
  background-image: linear-gradient(100deg,
    var(--pa-on-deep) 0%, var(--pa-on-deep) 38%,
    var(--pa-sheen) 50%,
    var(--pa-on-deep) 62%, var(--pa-on-deep) 100%);
  background-size: 320% 100%;
  background-position: 120% 0;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pa-wordmark {
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pa-sheen 8s ease-in-out infinite;
  }
}
@keyframes pa-sheen { 0%, 100% { background-position: 120% 0; } 55% { background-position: -25% 0; } }
.pa-wordmark-sub {
  font-family: var(--pa-serif); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.25; letter-spacing: -.022em;
  margin: 0; max-width: 24ch; color: var(--pa-on-deep);
}
.pa-band--warm { background: var(--pa-panel-warm); }

.pa-eyebrow {
  font-family: var(--pa-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;   /* Montserrat is built for this treatment */
  text-transform: uppercase;
  color: var(--pa-green);
  margin: 0 0 18px;
  line-height: 1.6;       /* so a long eyebrow wraps cleanly on a phone */
}
.pa-band--deep .pa-eyebrow { color: var(--pa-on-deep-dim); }

.pa-h1 {
  font-family: var(--pa-serif);
  font-weight: 800;                        /* geometric sans needs weight to carry a hero */
  font-size: clamp(1.95rem, 5.3vw, 3.5rem);/* wider face, so a step down from the serif */
  line-height: 1.07;
  letter-spacing: -.032em;                 /* Montserrat sets loose by default. Tighten it. */
  margin: 0;
  text-wrap: balance;
  max-width: 17ch;
}
.pa-h2 {
  font-family: var(--pa-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.6vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -.026em;
  margin: 0 0 16px;
  text-wrap: balance;
  max-width: 22ch;
}
.pa-lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--pa-ink-soft);
  max-width: 56ch;
  margin: 22px 0 0;
}
.pa-band--deep .pa-lede { color: var(--pa-on-deep-dim); }

/* ---- buttons ---- */
.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 32px; }
.pa-btn {
  display: inline-block;
  font-family: var(--pa-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.pa-btn--primary { background: var(--pa-green); color: #fff; box-shadow: var(--pa-shadow); }
:root[data-theme="dark"] .pa-btn--primary { color: #08170f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pa-btn--primary { color: #08170f; } }
.pa-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--pa-shadow-lift); }
.pa-btn--ghost { color: var(--pa-ink); border: 1px solid var(--pa-rule); background: var(--pa-panel); }
.pa-btn--ghost:hover { border-color: var(--pa-green); color: var(--pa-green); }
.pa-band--deep .pa-btn--primary { background: var(--pa-on-deep); color: var(--pa-green-deep); }
.pa-band--deep .pa-btn--ghost { background: transparent; border-color: rgba(255,255,255,.28); color: var(--pa-on-deep); }
.pa-band--deep .pa-btn--ghost:hover { border-color: var(--pa-on-deep); color: #fff; }
.pa-btn:focus-visible, .pa-card:focus-visible, .pa-field input:focus-visible {
  outline: 3px solid var(--pa-green); outline-offset: 3px;
}

/* ---- hero ---- */
.pa-hero-inner { display: grid; grid-template-columns: 1fr; gap: 52px; align-items: center; }
@media (min-width: 900px) {
  .pa-hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 64px; }
}

/* ---- the annotated document ---- */
.pa-doc {
  background: var(--pa-panel);
  border: 1px solid var(--pa-rule);
  border-radius: 14px;
  box-shadow: var(--pa-shadow-lift);
  overflow: hidden;
  max-width: 100%;
}
.pa-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--pa-rule-soft);
  background: var(--pa-panel-warm);
}
.pa-doc-bar .pa-file {
  font-family: var(--pa-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--pa-ink-faint);
  letter-spacing: .01em;
}
.pa-legend { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.pa-key {
  font-family: var(--pa-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pa-key--red   { background: var(--pa-red-wash);   color: var(--pa-red); }
.pa-key--amber { background: var(--pa-amber-wash); color: var(--pa-amber); }
.pa-key--good  { background: var(--pa-good-wash);  color: var(--pa-good); }

.pa-doc-body { padding: 24px 20px 8px; }
.pa-doc-body p {
  font-family: var(--pa-doc);
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--pa-ink);
  margin: 0 0 4px;
}
.pa-mark { border-radius: 3px; padding: 1px 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pa-mark--red   { background: var(--pa-red-wash);   border-bottom: 2px solid var(--pa-red); }
.pa-mark--amber { background: var(--pa-amber-wash); border-bottom: 2px solid var(--pa-amber); }
.pa-mark--good  { background: var(--pa-good-wash);  border-bottom: 2px solid var(--pa-good); }

.pa-note {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 12px;
  margin: 14px 0;
  padding-block: 2px;
}
.pa-note span { grid-column: 2; font-size: .855rem; line-height: 1.5; color: var(--pa-ink-soft); }
.pa-note b {
  grid-column: 2;
  font-family: var(--pa-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.pa-note::before { content: ""; grid-row: 1 / -1; border-radius: 2px; }
.pa-note--red::before   { background: var(--pa-red); }
.pa-note--red b         { color: var(--pa-red); }
.pa-note--amber::before { background: var(--pa-amber); }
.pa-note--amber b       { color: var(--pa-amber); }
.pa-note--good::before  { background: var(--pa-good); }
.pa-note--good b        { color: var(--pa-good); }

.pa-doc-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--pa-rule-soft);
  font-size: .74rem;
  color: var(--pa-ink-faint);
  font-family: var(--pa-mono);
  font-weight: 500;
  letter-spacing: .01em;
}

/* ---- selector cards ---- */
/* Five cards, so the featured one spans two tracks and every row fills. */
.pa-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 640px) {
  .pa-grid { grid-template-columns: repeat(2, 1fr); }
  /* The in-season card is always pulled to the front and given two tracks,
     so whichever month it is, the rows still fill with no gaps. */
  .pa-card--now { grid-column: span 2; order: -1; }
}
@media (min-width: 920px) { .pa-grid { grid-template-columns: repeat(3, 1fr); } }
.pa-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--pa-panel);
  border: 1px solid var(--pa-rule);
  border-radius: 14px;
  padding: 24px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pa-card:hover { transform: translateY(-3px); box-shadow: var(--pa-shadow-lift); border-color: var(--pa-green); }
.pa-card--now { border-color: var(--pa-green); background: var(--pa-green-lift); }
.pa-now-pill {
  align-self: flex-start;
  font-family: var(--pa-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pa-green);
  padding: 4px 9px;
  border-radius: 999px;
}
:root[data-theme="dark"] .pa-now-pill { color: #08170f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pa-now-pill { color: #08170f; } }
.pa-card .pa-q {
  font-family: var(--pa-serif);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.42;
  letter-spacing: -.018em;
  color: var(--pa-ink);
}
.pa-card .pa-route {
  margin-top: auto;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pa-green);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pa-card .pa-route small { font-weight: 400; color: var(--pa-ink-faint); }
.pa-card .pa-arrow { transition: transform .18s ease; }
.pa-card:hover .pa-arrow { transform: translateX(4px); }

/* ---- guardian angel tier list ---- */
.pa-tiers { display: flex; flex-direction: column; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.14); }
.pa-tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  text-decoration: none;
  color: inherit;
  transition: padding-left .18s ease;
}
.pa-tier:hover { padding-left: 10px; }
.pa-tier .pa-tier-name { font-weight: 600; font-size: 1.06rem; color: var(--pa-on-deep); }
.pa-tier .pa-tier-price {
  font-family: var(--pa-mono);
  font-size: .95rem;
  font-weight: 700;
  color: var(--pa-on-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pa-tier .pa-tier-desc { grid-column: 1 / -1; font-size: .9rem; color: var(--pa-on-deep-dim); max-width: 62ch; }
@media (min-width: 700px) { .pa-tier .pa-tier-desc { grid-column: 1; } }

/* The tiers get progressively richer as they climb, so the visual weight
   matches the price without anyone having to read the numbers first. */
.pa-tier--2 { background: rgba(255,255,255,.025); }
.pa-tier--3 { background: rgba(255,255,255,.05); }
.pa-tier--4 {
  background: linear-gradient(100deg, rgba(221,191,110,.09), rgba(255,255,255,.04));
  border-bottom-color: rgba(221,191,110,.22);
}
.pa-tier--2, .pa-tier--3, .pa-tier--4 { padding-inline: 16px; border-radius: 10px; }
.pa-tier--4 .pa-tier-price { color: var(--pa-gold); }
.pa-tier--5 {
  margin-top: 10px; padding: 24px 20px; border-radius: 14px;
  border: 1px solid rgba(221,191,110,.42);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(221,191,110,.20), rgba(221,191,110,0) 58%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.pa-tier--5 .pa-tier-name { font-size: 1.24rem; letter-spacing: -.02em; }
.pa-tier--5 .pa-tier-price { color: var(--pa-gold); font-size: 1.1rem; }
.pa-tier--5 .pa-tier-desc { color: rgba(255,255,255,.78); }
.pa-tier-flag {
  grid-column: 1 / -1;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pa-gold); margin-bottom: 2px;
}

.pa-disclose {
  margin-top: 34px;
  padding: 22px 24px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border-left: 3px solid var(--pa-on-deep-dim);
}
.pa-disclose p { margin: 0; font-size: .95rem; line-height: 1.62; color: var(--pa-on-deep-dim); max-width: 66ch; }
.pa-disclose strong { color: var(--pa-on-deep); }

/* The closing claim of the Guardian Angel band. Set apart so it reads as a
   statement rather than another sentence of body copy. */
.pa-claim {
  margin: 34px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(221,191,110,.4);
  font-family: var(--pa-serif); font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem); line-height: 1.32; letter-spacing: -.022em;
  color: var(--pa-on-deep); max-width: 28ch; text-wrap: balance;
}

/* ---- price ladder ---- */
.pa-ladder { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.pa-rung {
  font-family: var(--pa-mono);
  font-size: .8rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--pa-panel);
  border: 1px solid var(--pa-rule);
  color: var(--pa-ink-soft);
}
.pa-rung b { color: var(--pa-ink); font-weight: 700; }

/* ---- testimonials ---- */
/* Four quotes sit two by two rather than three plus an orphan. */
.pa-quotes { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
@media (min-width: 720px) { .pa-quotes { grid-template-columns: repeat(2, 1fr); } }
.pa-quote {
  background: var(--pa-panel);
  border: 1px solid var(--pa-rule);
  border-radius: 14px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pa-quote blockquote {
  margin: 0;
  font-family: var(--pa-serif);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1.66;
  letter-spacing: -.008em;
  color: var(--pa-ink);
}
.pa-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 13px; }
/* Photos. To swap one, open Media in WordPress, click the image, copy the
   File URL, and paste it into that person's src below. */
.pa-avatar {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; object-fit: cover; object-position: center top;
  background: var(--pa-green-lift);
  box-shadow: 0 0 0 2px var(--pa-panel), 0 0 0 3px var(--pa-green-lift);
}
.pa-quote .pa-who { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.pa-quote .pa-name { font-weight: 600; font-size: .92rem; }
.pa-quote .pa-stage {
  font-family: var(--pa-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pa-green);
  background: var(--pa-green-lift);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---- email capture ---- */
.pa-capture {
  background: var(--pa-panel);
  border: 1px solid var(--pa-rule);
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: var(--pa-shadow);
}
.pa-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.pa-field { flex: 1 1 240px; min-width: 0; }
.pa-field input {
  width: 100%;
  font-family: var(--pa-sans);
  font-size: 1rem;
  padding: 15px 18px;
  border-radius: 999px;
  border: 1px solid var(--pa-rule);
  background: var(--pa-paper);
  color: var(--pa-ink);
}
.pa-field input::placeholder { color: var(--pa-ink-faint); }
.pa-form button {
  font-family: var(--pa-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  background: var(--pa-green);
  color: #fff;
  cursor: pointer;
}
:root[data-theme="dark"] .pa-form button { color: #08170f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pa-form button { color: #08170f; } }
.pa-fineprint { margin: 14px 0 0; font-size: .82rem; color: var(--pa-ink-faint); }

/* ---- closing cta ---- */
.pa-close { text-align: center; }
.pa-close .pa-h2 { max-width: 20ch; margin-inline: auto; }
.pa-close .pa-lede { margin-inline: auto; }
.pa-close .pa-actions { justify-content: center; }

/* ---- hero demo interaction ----
   Hovering, tapping or tabbing to a marked sentence lights it and grows its
   comment, and dims the other two so the eye goes to one thing. */
.pa-mark { cursor: pointer; transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease; }
.pa-mark:focus { outline: none; }
.pa-doc.is-engaged .pa-mark:not(.is-lit) { opacity: .42; }
.pa-doc.is-engaged .pa-note:not(.is-lit) { opacity: .34; }
.pa-mark--red.is-lit   { background: #f6d4ce; border-bottom-width: 3px; box-shadow: 0 0 0 5px var(--pa-red-wash); }
.pa-mark--amber.is-lit { background: #f7e3bd; border-bottom-width: 3px; box-shadow: 0 0 0 5px var(--pa-amber-wash); }
.pa-mark--good.is-lit  { background: #cfe9d8; border-bottom-width: 3px; box-shadow: 0 0 0 5px var(--pa-good-wash); }
:root[data-theme="dark"] .pa-mark--red.is-lit   { background: #4a2b25; }
:root[data-theme="dark"] .pa-mark--amber.is-lit { background: #46351b; }
:root[data-theme="dark"] .pa-mark--good.is-lit  { background: #22412c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-mark--red.is-lit   { background: #4a2b25; }
  :root:not([data-theme="light"]) .pa-mark--amber.is-lit { background: #46351b; }
  :root:not([data-theme="light"]) .pa-mark--good.is-lit  { background: #22412c; }
}
.pa-note {
  cursor: pointer; transform-origin: left center; border-radius: 4px;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
}
/* Kept modest on purpose: the note grows from its left edge, and anything
   larger than this pushes the last word past the edge of the card. */
.pa-note.is-lit { transform: scale(1.022); }
.pa-note::before { transition: width .22s ease; }
.pa-note.is-lit::before { width: 5px; }
.pa-hint {
  font-size: .72rem; color: var(--pa-ink-faint); margin: 10px 0 0;
  font-weight: 600; letter-spacing: .02em;
}

/* ---- Cosmos band ---- */
.pa-cosmos {
  position: relative; overflow: hidden;
  background: #060e14;
  color: #e9eef2;
}
.pa-cosmos > .pa-inner { position: relative; z-index: 1; }
.pa-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.pa-cosmos .pa-eyebrow { color: #8fb6c9; }
.pa-cosmos .pa-lede { color: #b9c7d1; }
.pa-cosmos-mark {
  font-family: var(--pa-serif); font-weight: 800;
  font-size: clamp(2.3rem, 7vw, 4.25rem); line-height: 1.08; letter-spacing: -.045em;
  padding-bottom: .1em; margin: 0 0 10px; color: #f2f6f8;
  background-image: linear-gradient(100deg, #f2f6f8 0%, #f2f6f8 40%, #ffe6a8 52%, #f2f6f8 64%, #f2f6f8 100%);
  background-size: 320% 100%; background-position: 120% 0;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pa-cosmos-mark {
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: pa-sheen 11s ease-in-out infinite;
  }
}
.pa-cosmos-sub {
  font-family: var(--pa-serif); font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.55rem); line-height: 1.28; letter-spacing: -.022em;
  margin: 0; max-width: 26ch; color: #f2f6f8;
}
.pa-steps { list-style: none; counter-reset: pa-step; margin: 38px 0 0; padding: 0; display: grid; gap: 2px; }
.pa-step {
  counter-increment: pa-step;
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 16px;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.pa-step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.pa-step::before {
  content: counter(pa-step);
  font-size: 11px; font-weight: 700; color: #ffe6a8;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,230,168,.45);
  display: grid; place-items: center; margin-top: 2px;
}
.pa-step b { grid-column: 2; font-size: 1rem; font-weight: 700; color: #f2f6f8; }
.pa-step span { grid-column: 2; font-size: .9rem; color: #b9c7d1; max-width: 60ch; }
.pa-scope {
  margin-top: 30px; padding: 20px 22px; border-radius: 12px;
  background: rgba(255,255,255,.05); border-left: 3px solid rgba(255,230,168,.5);
}
.pa-scope p { margin: 0; font-size: .95rem; color: #b9c7d1; max-width: 64ch; }
.pa-scope strong { color: #f2f6f8; }
.pa-price-line {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.pa-price-line .pa-amount {
  font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: #ffe6a8;
  font-variant-numeric: tabular-nums;
}
.pa-price-line .pa-terms { font-size: .86rem; color: #b9c7d1; }
.pa-cosmos .pa-btn--primary { background: #ffe6a8; color: #0b1620; }
.pa-cosmos .pa-btn--ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #e9eef2; }
.pa-cosmos .pa-btn--ghost:hover { border-color: #ffe6a8; color: #ffe6a8; }

/* ---- site header and mega menu ---- */
.pa-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--pa-paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--pa-rule);
  font-family: var(--pa-sans);
  color: var(--pa-ink);
}
@supports not (backdrop-filter: blur(2px)) { .pa-header { background: var(--pa-paper); } }
.pa-nav {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 10px; min-height: 68px;
}
.pa-logo {
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.03em;
  text-decoration: none; color: var(--pa-ink); margin-right: auto; white-space: nowrap;
  display: flex; align-items: center; min-width: 0;
}
.pa-logo span { color: var(--pa-green); }
/* Logo image. Height is capped so any upload size fits the bar cleanly.
   Raise or lower these two numbers to taste. */
.pa-logo img { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 560px) { .pa-logo img { height: 28px; max-width: 128px; } }
.pa-menu { display: none; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1000px) { .pa-menu { display: flex; } }
.pa-menu > li { position: relative; }
.pa-menu a, .pa-menu button {
  font-family: var(--pa-sans); font-size: .89rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--pa-ink-soft); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px;
}
.pa-menu a:hover, .pa-menu button:hover, .pa-menu button[aria-expanded="true"] { color: var(--pa-green); }
.pa-caret { transition: transform .18s ease; font-size: .62em; }
.pa-menu button[aria-expanded="true"] .pa-caret { transform: rotate(180deg); }
.pa-nav .pa-btn { padding: 11px 20px; font-size: .88rem; }
.pa-nav .pa-btn--primary { box-shadow: none; }

.pa-mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100vw - 40px));
  background: var(--pa-panel); border: 1px solid var(--pa-rule); border-radius: 16px;
  box-shadow: var(--pa-shadow-lift); padding: 26px;
  display: grid; grid-template-columns: repeat(3, 1fr) 1.08fr; gap: 26px;
}
.pa-mega[hidden] { display: none; }
.pa-mega h4 {
  font-family: var(--pa-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pa-green);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--pa-rule-soft);
}
.pa-mega ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-mega ul a {
  display: block; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: inherit;
}
.pa-mega ul a:hover { background: var(--pa-green-lift); }
.pa-mega .pa-item { font-size: .88rem; font-weight: 700; color: var(--pa-ink); display: flex; gap: 8px; align-items: baseline; }
.pa-mega .pa-cost { font-weight: 600; color: var(--pa-ink-faint); font-size: .78rem; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pa-mega .pa-desc { display: block; font-size: .78rem; font-weight: 400; line-height: 1.45; color: var(--pa-ink-soft); margin-top: 2px; }
.pa-feature { background: var(--pa-green-deep); border-radius: 12px; padding: 20px; color: var(--pa-on-deep); display: flex; flex-direction: column; }
.pa-feature-cta {
  margin-top: auto; padding-top: 16px; margin-left: 10px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8rem; font-weight: 700; color: var(--pa-on-deep); text-decoration: none;
}
.pa-feature-cta:hover { color: #fff; }
.pa-feature h4 { color: var(--pa-on-deep-dim); border-bottom-color: rgba(255,255,255,.16); }
.pa-feature ul a:hover { background: rgba(255,255,255,.08); }
.pa-feature .pa-item { color: var(--pa-on-deep); }
.pa-feature .pa-cost { color: var(--pa-on-deep-dim); }
.pa-feature .pa-desc { color: var(--pa-on-deep-dim); }

/* mobile panel */
.pa-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; border: 0; background: none; cursor: pointer;
}
@media (min-width: 1000px) { .pa-burger { display: none; } }
.pa-burger i { display: block; height: 2px; border-radius: 2px; background: var(--pa-ink); transition: transform .2s ease, opacity .2s ease; }
.pa-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pa-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.pa-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.pa-drawer {
  border-top: 1px solid var(--pa-rule); background: var(--pa-paper);
  max-height: calc(100vh - 68px); overflow-y: auto; padding: 8px 20px 28px;
}
.pa-drawer[hidden] { display: none; }
@media (min-width: 1000px) { .pa-drawer { display: none !important; } }
.pa-drawer .pa-mega {
  position: static; transform: none; width: auto; border: 0; box-shadow: none;
  background: none; padding: 0; grid-template-columns: 1fr; gap: 22px; margin-top: 14px;
}
.pa-drawer .pa-feature { background: var(--pa-green-deep); padding: 18px; }
.pa-drawer-links { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--pa-rule); display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pa-drawer-links a { font-size: .92rem; font-weight: 600; color: var(--pa-ink-soft); text-decoration: none; padding: 8px 0; }
.pa-drawer .pa-btn { display: block; width: 100%; text-align: center; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .pa-card, .pa-btn, .pa-tier, .pa-arrow { transition: none !important; }
  .pa-card:hover, .pa-btn:hover { transform: none; }
  .pa-glow, .pa-wordmark, .pa-cosmos-mark { animation: none !important; }
  .pa-note, .pa-note.is-lit { transform: none !important; }
}
@media (max-width: 560px) {
  .pa-band > .pa-inner { padding-block: 54px; }
  .pa-legend { margin-left: 0; width: 100%; }
  .pa-btn { width: 100%; text-align: center; }
  .pa-actions { gap: 12px; }
  /* The header button is the exception. It stays inline next to the logo. */
  .pa-nav .pa-btn { width: auto; padding: 10px 15px; font-size: .8rem; }
}

/* ---- page hero ---- */
.pa-crumb {
  font-size: .8rem; font-weight: 600; color: var(--pa-ink-faint);
  margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.pa-crumb a { color: var(--pa-ink-faint); text-decoration: none; }
.pa-crumb a:hover { color: var(--pa-green); }
.pa-crumb span { opacity: .5; }

.pa-h1-page {
  font-family: var(--pa-serif); font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -.032em;
  margin: 0 0 18px; max-width: 18ch; text-wrap: balance;
}
.pa-page-hero .pa-lede { font-size: 1.12rem; max-width: 58ch; margin-top: 0; }

.pa-at-a-glance {
  display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 32px;
  padding-top: 26px; border-top: 1px solid var(--pa-rule);
}
.pa-fact { display: flex; flex-direction: column; gap: 3px; }
.pa-fact dt {
  font-family: var(--pa-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pa-ink-faint);
}
.pa-fact dd {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--pa-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- plan cards ---- */
.pa-plans {
  display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px;
  align-items: start;
}
@media (min-width: 780px)  { .pa-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pa-plans--3 { grid-template-columns: repeat(3, 1fr); } }
.pa-plan {
  background: var(--pa-panel); border: 1px solid var(--pa-rule); border-radius: 16px;
  padding: 28px 26px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--pa-shadow);
}
.pa-plan--pick { border-color: var(--pa-green); box-shadow: var(--pa-shadow-lift); }
.pa-plan-flag {
  align-self: flex-start; font-family: var(--pa-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--pa-green); color: #fff; padding: 4px 9px; border-radius: 999px;
}
:root[data-theme="dark"] .pa-plan-flag { color: #08170f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pa-plan-flag { color: #08170f; } }
.pa-plan h3 {
  font-family: var(--pa-serif); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -.024em; margin: 0;
}
.pa-plan .pa-plan-price {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--pa-ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pa-plan .pa-plan-price small {
  display: block; font-size: .78rem; font-weight: 600; letter-spacing: 0;
  color: var(--pa-ink-faint); margin-top: 8px;
}
.pa-plan p { margin: 0; font-size: .93rem; color: var(--pa-ink-soft); }
.pa-plan .pa-btn { margin-top: auto; text-align: center; }

/* ---- checklists ----
   The marker is positioned rather than laid out as a grid track. That is
   deliberate: with grid, a list item that mixes an element and loose text,
   like "<strong>Label.</strong> then a sentence", splits into two grid
   items and the sentence drops into the 20px marker column one word per
   line. Absolute positioning keeps the item a single flow of text. */
.pa-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pa-checks li {
  position: relative; padding-left: 21px;
  font-size: .94rem; color: var(--pa-ink-soft); line-height: 1.55;
}
.pa-checks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--pa-green); opacity: .85;
}
.pa-checks strong { color: var(--pa-ink); font-weight: 700; }
.pa-checks--tight li { font-size: .88rem; padding-left: 18px; }
.pa-checks--tight li::before { width: 7px; height: 7px; top: .5em; }

/* ---- rules list, for limits and exclusions ---- */
.pa-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pa-rules li {
  position: relative; padding-left: 22px;
  font-size: .92rem; color: var(--pa-ink-soft); line-height: 1.55;
}
.pa-rules li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--pa-ink-faint);
}

/* ---- FAQ ---- */
.pa-faq { margin-top: 32px; border-top: 1px solid var(--pa-rule); }
.pa-faq details { border-bottom: 1px solid var(--pa-rule-soft); }
.pa-faq summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-size: 1.02rem; font-weight: 700; color: var(--pa-ink);
}
.pa-faq summary::-webkit-details-marker { display: none; }
.pa-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--pa-green); line-height: 1;
}
.pa-faq details[open] summary::after { content: "\2212"; }
.pa-faq summary:focus-visible { outline: 3px solid var(--pa-green); outline-offset: 2px; border-radius: 4px; }
.pa-faq .pa-answer { padding: 0 0 22px; font-size: .95rem; color: var(--pa-ink-soft); max-width: 66ch; }
.pa-faq .pa-answer p { margin: 0 0 12px; }
.pa-faq .pa-answer p:last-child { margin-bottom: 0; }

/* ---- related ---- */
.pa-related { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
@media (min-width: 680px) { .pa-related { grid-template-columns: repeat(2, 1fr); } }
.pa-rel {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: var(--pa-panel); border: 1px solid var(--pa-rule); border-radius: 14px; padding: 22px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pa-rel:hover { transform: translateY(-3px); border-color: var(--pa-green); box-shadow: var(--pa-shadow-lift); }
.pa-rel b { font-size: 1.05rem; font-weight: 700; }
.pa-rel span { font-size: .88rem; color: var(--pa-ink-soft); }
.pa-rel em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--pa-green); margin-top: auto; padding-top: 8px; }

/* ---- callout ---- */
.pa-callout {
  margin-top: 30px; padding: 22px 24px; border-radius: 12px;
  background: var(--pa-green-lift); border-left: 3px solid var(--pa-green);
}
.pa-callout p { margin: 0; font-size: .95rem; color: var(--pa-ink-soft); max-width: 64ch; }
.pa-callout strong { color: var(--pa-ink); }

/* ---- thank-you page ---- */
.pa-receipt {
  background: var(--pa-panel); border: 1px solid var(--pa-rule); border-radius: 16px;
  padding: 28px 26px; box-shadow: var(--pa-shadow); margin-top: 8px;
}
.pa-receipt-top {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--pa-rule-soft);
}
.pa-receipt-top h2 {
  font-family: var(--pa-serif); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.024em; margin: 0;
}
.pa-receipt-top .pa-paid {
  margin-left: auto; font-family: var(--pa-mono); font-size: .95rem; font-weight: 700;
  color: var(--pa-green); font-variant-numeric: tabular-nums;
}
.pa-embed {
  margin-top: 14px; border: 1px solid var(--pa-rule); border-radius: 12px;
  overflow: hidden; background: var(--pa-panel);
}
.pa-embed iframe { display: block; width: 100%; border: 0; }
.pa-placeholder {
  display: grid; place-items: center; text-align: center; gap: 6px;
  min-height: 220px; padding: 28px 22px;
  background: repeating-linear-gradient(45deg, var(--pa-rule-soft) 0 12px, transparent 12px 24px);
  color: var(--pa-ink-soft); font-size: .9rem;
}
.pa-placeholder b { color: var(--pa-ink); font-size: .95rem; }
.pa-steps-plain { list-style: none; counter-reset: pa-ts; margin: 0; padding: 0; }
.pa-steps-plain > li {
  counter-increment: pa-ts; display: grid; grid-template-columns: 30px 1fr; gap: 6px 14px;
  padding: 22px 0; border-bottom: 1px solid var(--pa-rule-soft);
}
.pa-steps-plain > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pa-steps-plain > li::before {
  content: counter(pa-ts); font-family: var(--pa-mono); font-size: 11px; font-weight: 700;
  color: var(--pa-green); border: 1px solid var(--pa-green); border-radius: 50%;
  width: 24px; height: 24px; display: grid; place-items: center; margin-top: 2px;
}
.pa-steps-plain h3 { grid-column: 2; margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.pa-steps-plain .pa-body { grid-column: 2; }
.pa-steps-plain .pa-body p { margin: 0 0 10px; font-size: .93rem; color: var(--pa-ink-soft); max-width: 62ch; }
.pa-steps-plain .pa-body p:last-child { margin-bottom: 0; }

/* ---- coming soon ---- */
.pa-soon-pill {
  display: inline-block; font-family: var(--pa-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(255,255,255,.1); color: var(--pa-on-deep);
  border: 1px solid rgba(255,255,255,.22);
}
.pa-tier--soon { opacity: .96; }
.pa-tier--soon .pa-tier-price { color: var(--pa-on-deep-dim); font-weight: 600; }

/* ---- price table ---- */
.pa-tablewrap {
  overflow-x: auto; border: 1px solid var(--pa-rule); border-radius: 14px;
  background: var(--pa-panel); margin-top: 34px; box-shadow: var(--pa-shadow);
}
.pa-table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 560px; }
.pa-table th, .pa-table td {
  text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--pa-rule-soft);
  vertical-align: top;
}
.pa-table thead th {
  font-family: var(--pa-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pa-ink-faint);
  border-bottom: 1px solid var(--pa-rule); white-space: nowrap;
}
.pa-table tbody tr:last-child td { border-bottom: none; }
.pa-table tbody tr.is-pick { background: var(--pa-green-lift); }
.pa-table .pa-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pa-table .pa-sub { color: var(--pa-ink-faint); font-weight: 500; font-size: .84rem; }
.pa-table td a.pa-buy {
  display: inline-block; white-space: nowrap; font-size: .82rem; font-weight: 700;
  color: var(--pa-green); text-decoration: none; border: 1px solid var(--pa-rule);
  border-radius: 999px; padding: 7px 14px; transition: border-color .16s ease, background-color .16s ease;
}
.pa-table td a.pa-buy:hover { border-color: var(--pa-green); background: var(--pa-green-lift); }
.pa-scroll-hint {
  font-size: .78rem; color: var(--pa-ink-faint); margin: 10px 0 0; font-weight: 600;
}
@media (min-width: 700px) { .pa-scroll-hint { display: none; } }

/* ---- included list, for bundle pages ---- */
.pa-included { margin-top: 34px; border-top: 1px solid var(--pa-rule); }
.pa-inc {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 20px;
  padding: 18px 0; border-bottom: 1px solid var(--pa-rule-soft);
}
.pa-inc b { font-size: 1rem; font-weight: 700; color: var(--pa-ink); }
.pa-inc .pa-alone {
  font-variant-numeric: tabular-nums; font-size: .88rem; font-weight: 600;
  color: var(--pa-ink-faint); white-space: nowrap;
}
.pa-inc span.pa-what { grid-column: 1 / -1; font-size: .9rem; color: var(--pa-ink-soft); max-width: 62ch; }
@media (min-width: 700px) { .pa-inc span.pa-what { grid-column: 1; } }
.pa-inc--total { border-bottom: 0; padding-top: 22px; }
.pa-inc--total b { font-size: 1.05rem; }
.pa-inc--total .pa-alone { color: var(--pa-ink); font-size: 1rem; }


/* logo lockup: emblem left, wordmark right, exact colors from the artwork.
   These selectors carry the .pa-logo prefix on purpose: the older
   `.pa-logo span { color: var(--pa-green) }` rule is more specific than a
   lone class would be, and was repainting the wordmark the wrong green. */
.pa-logo { gap: 11px; }
.pa-logo-mark { flex: 0 0 auto; height: 44px; width: auto; display: block; }
.pa-logo .pa-logo-word { display: flex; flex-direction: column; line-height: 1.02; white-space: nowrap; }
.pa-logo .pa-logo-name { font-weight: 700; font-size: 1.12rem; letter-spacing: .005em; color: #0e4315; }
.pa-logo .pa-logo-sub  { font-weight: 700; font-size: .625rem; letter-spacing: .143em; color: #529745; margin-top: 3px; }
@media (max-width: 560px) {
  .pa-logo { gap: 8px; }
  .pa-logo-mark { height: 34px; }
  .pa-logo-name { font-size: .92rem; }
  .pa-logo-sub  { font-size: .5rem; letter-spacing: .13em; }
  /* the fuller logo needs the room, so the header CTA gives some back */
  .pa-nav .pa-btn { padding: 9px 12px; font-size: .74rem; }
  .pa-nav { gap: 8px; }
}
@media (max-width: 380px) {
  .pa-logo-mark { height: 30px; }
  .pa-logo-name { font-size: .82rem; }
  .pa-logo-sub  { font-size: .45rem; }
  .pa-nav .pa-btn { padding: 8px 10px; font-size: .68rem; }
}
/* the deep green of the wordmark goes invisible on a dark background */
:root[data-theme="dark"] .pa-logo .pa-logo-name { color: #eaf3ec; }
:root[data-theme="dark"] .pa-logo .pa-logo-sub  { color: #6cc06a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-logo .pa-logo-name { color: #eaf3ec; }
  :root:not([data-theme="light"]) .pa-logo .pa-logo-sub  { color: #6cc06a; }
}

/* Mega-menu: trimmed so the whole panel fits a laptop screen without
   scrolling (it needed 660px with the header, which crowds a 13in display),
   and the Guardian Angel card no longer stretches to leave a dead gap. */
.pa-mega { padding: 20px; gap: 20px; }
.pa-mega h4 { margin-bottom: 10px; padding-bottom: 8px; }
.pa-mega ul a { padding: 7px 9px; }
.pa-mega .pa-desc { line-height: 1.38; }
.pa-feature { padding: 18px; align-self: start; }
.pa-feature-cta { padding-top: 14px; }

/* hero: tighten the top now that the redundant company-name eyebrow is gone */
.pa-band > .pa-hero-inner { padding-top: 40px; }
@media (max-width: 560px) { .pa-band > .pa-hero-inner { padding-top: 26px; } }

/* ---------- Cosmos: the whole page under a night sky ----------
   The site is fully tokenised, so the page only has to redefine the tokens
   and every component on it follows. No per-component dark overrides. */
.pa-cosmos-page {
  position: relative; background: #060e14;
  --pa-paper:       transparent;
  --pa-panel:       rgba(255,255,255,.055);
  --pa-panel-warm:  rgba(255,255,255,.028);
  --pa-ink:         #eef4f8;
  --pa-ink-soft:    #b6c6d2;
  --pa-ink-faint:   #8ba0ae;
  --pa-rule:        rgba(255,255,255,.15);
  --pa-rule-soft:   rgba(255,255,255,.09);
  --pa-green:       #7fd8ab;
  --pa-green-lift:  rgba(127,216,171,.13);
  --pa-green-deep:  #08161e;
  --pa-on-deep:     #eef4f8;
  --pa-on-deep-dim: #9fb8c7;
  --pa-shadow:      none;
  --pa-shadow-lift: 0 18px 44px rgba(0,0,0,.5);
}
.pa-cosmos-page > section { position: relative; z-index: 1; }
/* Close the dead space above the breadcrumb. The hero still needs enough
   top padding to clear the transparent header (about 69px), so this trims
   to just past that rather than to zero. */
.pa-cosmos-hero > .pa-inner { padding-top: 30px; }
.pa-cosmos-hero .pa-crumb { margin-bottom: 14px; }
.pa-cosmos-hero .pa-cosmos-sub { margin-top: 40px; margin-bottom: 22px; }
@media (max-width: 560px) { .pa-cosmos-hero > .pa-inner { padding-top: 20px; } }
.pa-cosmos-page .pa-cosmos { background: transparent; }
/* .pa-close centres its heading, lede and buttons, but the price line is a
   flex row that was still starting hard left inside it. */
.pa-close .pa-price-line { justify-content: center; }
/* the light green accent needs dark text on it */
.pa-cosmos-page .pa-btn--primary { color: #08202b; }
.pa-stars--page { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* On Cosmos only, the header sits transparent over the night sky. The nav
   lives outside .pa-cosmos-page, so it gets the same token treatment here
   and every control in it follows without being restyled one by one. */
/* the header sits outside .pa-cosmos-page, so without this it would be
   transparent onto the default light body rather than onto the night sky */
body:has(.pa-cosmos-page) { background: #060e14; }
body:has(.pa-cosmos-page) .pa-header {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  --pa-paper:      transparent;
  --pa-panel:      rgba(255,255,255,.06);
  --pa-ink:        #eef4f8;
  --pa-ink-soft:   #c2d2dd;
  --pa-ink-faint:  #8ba0ae;
  --pa-rule:       rgba(255,255,255,.14);
  --pa-rule-soft:  rgba(255,255,255,.09);
  --pa-green:      #7fd8ab;
  --pa-green-lift: rgba(127,216,171,.14);
}
/* At the top of Cosmos the header is invisible over the stars. The moment
   the page scrolls, it frosts over so headlines cannot run under the logo. */
body:has(.pa-cosmos-page) .pa-header.is-stuck {
  background: rgba(6,14,20,.78);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom-color: rgba(255,255,255,.13);
}
@media (prefers-reduced-motion: reduce) {
  body:has(.pa-cosmos-page) .pa-header { transition: none; }
}
body:has(.pa-cosmos-page) .pa-header .pa-btn--primary { color: #08202b; }
body:has(.pa-cosmos-page) .pa-logo .pa-logo-name { color: #eef4f8; }
body:has(.pa-cosmos-page) .pa-logo .pa-logo-sub  { color: #7fd8ab; }
/* the dropdown and mobile drawer still need a solid ground to stay readable */
body:has(.pa-cosmos-page) .pa-mega,
body:has(.pa-cosmos-page) .pa-drawer { background: #0b1720; border-color: rgba(255,255,255,.16); }

/* the dictionary opening - set like a real entry: headword with the
   syllable dot, pronunciation, italic part of speech, numbered sense.
   The pronunciation and part of speech borrow the document serif on
   purpose, so the quote reads as lifted from a dictionary, not as us. */
.pa-def { margin: 20px 0 22px; padding: 0 0 0 20px; border-left: 2px solid rgba(255,230,168,.5); max-width: 62ch; }
.pa-def-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.pa-def-word {
  font-family: var(--pa-serif); font-weight: 800; font-size: 1.08rem;
  letter-spacing: .01em; color: #ffe6a8;
}
.pa-def-pron { font-family: var(--pa-doc); font-size: .92rem; color: #8fb6c9; white-space: nowrap; }
.pa-def-pos  { font-family: var(--pa-doc); font-style: italic; font-size: .92rem; color: #cfdde6; }
.pa-def blockquote {
  margin: 0; font-family: var(--pa-serif); font-weight: 600;
  font-size: clamp(1.15rem, 2.9vw, 1.72rem); line-height: 1.34; letter-spacing: -.02em;
  color: #f2f6f8; text-wrap: balance;
}
.pa-def-num {
  font-family: var(--pa-doc); font-size: .55em; font-weight: 700; color: #8fb6c9;
  margin-right: .45em; vertical-align: .55em;
}
.pa-def figcaption {
  margin-top: 12px; font-family: var(--pa-doc); font-size: .84rem; font-style: italic; color: #8fb6c9;
}
.pa-def-turn {
  max-width: 44ch; margin: 0; font-weight: 700; color: #f2f6f8;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.38; letter-spacing: -.015em;
  text-wrap: balance;
}

/* the worked example, read two ways */
.pa-two-read { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 820px) { .pa-two-read { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.pa-read { border: 1px solid var(--pa-rule); border-radius: 14px; padding: 20px 22px; background: var(--pa-panel); }
.pa-read p { margin: 0 0 12px; font-size: .96rem; line-height: 1.6; color: var(--pa-ink-soft); }
.pa-read p:last-child { margin-bottom: 0; }
.pa-read-tag {
  display: block; margin-bottom: 12px; font-family: var(--pa-mono); font-size: 10px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--pa-ink-faint);
}
.pa-read--lit { border-color: rgba(255,230,168,.42); background: rgba(255,230,168,.07); }
.pa-read--lit .pa-read-tag { color: #ffe6a8; }
.pa-read--lit p { color: #e4edf3; }

/* ---------- tighten the top of every service and company page ----------
   Same trim as Cosmos: 76px of dead air above the breadcrumb was the single
   biggest gap on every inner page. */
.pa-band > .pa-inner.pa-page-hero-inner { padding-top: 34px; }
.pa-page-hero > .pa-inner { padding-top: 34px; }
@media (max-width: 560px) { .pa-page-hero > .pa-inner { padding-top: 22px; } }

/* ---------- plan cards: a second, quieter highlight ----------
   The green "pick" treatment pulls the eye to the middle column and the
   third one gets skipped, so Interview Plus gets its own accent rather
   than competing with the same green. */
.pa-plan--best {
  border-color: var(--pa-amber);
  box-shadow: var(--pa-shadow-lift);
  background: linear-gradient(180deg, var(--pa-amber-wash) 0%, var(--pa-panel) 46%);
}
.pa-plan-flag--alt { background: var(--pa-amber); color: #fff; }
/* the upsell card's button picks up its own accent instead of staying the
   quietest button in the row */
.pa-plan--best .pa-btn--ghost { border-color: var(--pa-amber); color: var(--pa-amber); }
.pa-plan--best .pa-btn--ghost:hover { background: var(--pa-amber); color: #fff; }
:root[data-theme="dark"] .pa-plan-flag--alt { color: #1d1608; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-plan-flag--alt { color: #1d1608; }
}
.pa-tier-count {
  margin: 6px 0 0; font-family: var(--pa-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pa-gold);
}

/* "comes with the bigger bundles" tag on a checklist item */
.pa-only {
  display: inline-block; margin-right: 8px; vertical-align: 2px;
  font-family: var(--pa-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--pa-green); background: var(--pa-green-lift);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}



/* ---------- founder block ---------- */
.pa-founder { display: grid; gap: 30px; align-items: start; }
@media (min-width: 860px) {
  /* a wider text column so the bio runs fewer lines and the two columns
     finish closer together, instead of a short photo beside a long leg */
  .pa-founder { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 46px; }
}
.pa-founder-card { margin: 0; }
.pa-founder-card img {
  display: block; width: 100%; height: auto; max-width: 340px;
  border-radius: 16px; border: 1px solid var(--pa-rule); box-shadow: var(--pa-shadow-lift);
}
.pa-founder-card figcaption { margin-top: 14px; max-width: 340px; }
.pa-founder-card b {
  display: block; font-family: var(--pa-serif); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -.02em; color: var(--pa-ink);
}
.pa-founder-card span {
  display: block; margin-top: 3px; font-size: .84rem; font-weight: 600;
  color: var(--pa-ink-faint); line-height: 1.4;
}
.pa-founder-bio .pa-h2 { max-width: 24ch; }
.pa-founder-bio p {
  margin: 15px 0 0; font-size: 1rem; line-height: 1.62; color: var(--pa-ink-soft); max-width: none;
}
/* the founder block gets a little more width than the standard measure */
.pa-band > .pa-inner.pa-founder-inner { max-width: 1160px; }
/* a motto reads as a motto when it is centred */
.pa-band > .pa-inner.pa-motto { text-align: center; }
.pa-motto .pa-h1-page { margin-inline: auto; max-width: 22ch; }
.pa-motto .pa-lede { margin-inline: auto; }

/* inline links in body copy: brand green, not browser blue */
.pa-lede a, .pa-answer a, .pa-body a, .pa-rules a, .pa-founder-bio a, .pa-fineprint a {
  color: var(--pa-green); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pa-lede a:hover, .pa-answer a:hover, .pa-body a:hover, .pa-rules a:hover,
.pa-founder-bio a:hover, .pa-fineprint a:hover { text-decoration-thickness: 2px; }

/* email handover block on the thank-you pages */
.pa-handover {
  margin-top: 16px; padding: 18px 20px; border-radius: 12px;
  background: var(--pa-green-lift); border-left: 3px solid var(--pa-green);
}
.pa-handover p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--pa-ink-soft); }
/* admin@philippiansconsulting.com is longer than a narrow phone's text
   column, and it appears all over the site, so let it break anywhere */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.pa-handover strong { color: var(--pa-ink); }

/* ---------- the 60 second quiz ---------- */
.pa-quiz-open { margin: 22px 0 0; font-size: .95rem; color: var(--pa-ink-soft); }
.pa-quiz-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-weight: 700; color: var(--pa-green); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pa-quiz-link:hover { text-decoration-thickness: 2px; }

.pa-quiz {
  margin: 24px 0 0; max-width: 640px; background: var(--pa-panel);
  border: 1px solid var(--pa-rule); border-radius: 16px; padding: 22px 22px 24px;
}
.pa-quiz[hidden] { display: none; }
.pa-quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-quiz-step {
  font-family: var(--pa-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pa-ink-faint);
}
.pa-quiz-close {
  background: none; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1;
  color: var(--pa-ink-faint); padding: 0 2px;
}
.pa-quiz-close:hover { color: var(--pa-ink); }
.pa-quiz-bar { height: 3px; border-radius: 3px; background: var(--pa-rule-soft); margin: 12px 0 20px; overflow: hidden; }
.pa-quiz-bar i { display: block; height: 100%; width: 0; background: var(--pa-green); transition: width .25s ease; }

.pa-quiz-q {
  font-family: var(--pa-serif); font-weight: 700; font-size: 1.22rem; line-height: 1.25;
  letter-spacing: -.02em; margin: 0 0 16px; color: var(--pa-ink); outline: none; text-wrap: balance;
}
.pa-quiz-opts { display: grid; gap: 9px; }
.pa-quiz-opt {
  text-align: left; cursor: pointer; font: inherit; font-size: .97rem; font-weight: 600;
  color: var(--pa-ink); background: var(--pa-paper); border: 1px solid var(--pa-rule);
  border-radius: 11px; padding: 13px 15px; transition: border-color .15s, background .15s, transform .12s;
}
.pa-quiz-opt:hover { border-color: var(--pa-green); background: var(--pa-green-lift); transform: translateX(2px); }
.pa-quiz-back {
  margin-top: 16px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--pa-ink-faint);
}
.pa-quiz-back:hover { color: var(--pa-green); }

.pa-quiz-rec {
  display: block; text-decoration: none; color: inherit; border: 1px solid var(--pa-green);
  border-radius: 13px; padding: 17px 18px; background: var(--pa-green-lift);
}
.pa-quiz-rec-top { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.pa-quiz-rec-top strong { font-size: 1.06rem; color: var(--pa-ink); }
.pa-quiz-rec-top span { font-weight: 700; color: var(--pa-green); white-space: nowrap; }
.pa-quiz-rec-why { display: block; margin-top: 7px; font-size: .94rem; line-height: 1.5; color: var(--pa-ink-soft); }
.pa-quiz-rec-go { display: block; margin-top: 11px; font-weight: 700; font-size: .9rem; color: var(--pa-green); }
.pa-quiz-rec:hover .pa-quiz-rec-go { text-decoration: underline; text-underline-offset: 3px; }

.pa-quiz-note { margin: 14px 0 0; font-size: .93rem; line-height: 1.55; color: var(--pa-ink-soft); }
.pa-quiz-note a { color: var(--pa-green); font-weight: 700; }
.pa-quiz-also {
  margin: 20px 0 8px; font-family: var(--pa-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--pa-ink-faint);
}
.pa-quiz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pa-quiz-list li { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.pa-quiz-list a { color: var(--pa-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--pa-rule); }
.pa-quiz-list a:hover { color: var(--pa-green); border-color: var(--pa-green); }
.pa-quiz-list span { color: var(--pa-ink-faint); white-space: nowrap; }
.pa-quiz-end { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.pa-quiz-fine { margin: 14px 0 0; font-size: .84rem; line-height: 1.5; color: var(--pa-ink-faint); }
@media (max-width: 560px) {
  .pa-quiz { padding: 18px 16px 20px; }
  .pa-quiz-end .pa-btn { width: auto; }
}


/* /services/ landing list */
.pa-svc-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;max-width:74ch}
.pa-svc-list li{margin:0}
.pa-svc-list a{display:block;text-decoration:none;color:inherit;border:1px solid var(--pa-rule);
  border-radius:14px;padding:18px 20px;background:var(--pa-panel);transition:border-color .15s,transform .15s}
.pa-svc-list a:hover{border-color:var(--pa-green);transform:translateY(-2px)}
.pa-svc-list .pa-item{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  font-weight:700;color:var(--pa-ink);font-size:1.05rem}
.pa-svc-list .pa-cost{color:var(--pa-green);font-weight:700;white-space:nowrap}
.pa-svc-list .pa-desc{display:block;margin-top:6px;color:var(--pa-ink-soft);font-size:.95rem;line-height:1.45}


/* ================= Covenant: the sealed document =================
   A covenant is something drawn up, signed and kept, so the page is set
   like an instrument: deep green stock, engraved hairlines, gold rules
   and a struck seal. Same token swap as Cosmos - the page redefines the
   palette and every component on it follows. */
.pa-covenant-page {
  position: relative;
  background:
    /* engraved security-paper hatching, barely there */
    repeating-linear-gradient(68deg, rgba(221,191,110,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-68deg, rgba(255,255,255,.022) 0 1px, transparent 1px 9px),
    radial-gradient(120% 70% at 50% 0%, #11412a 0%, #0b2f1e 55%, #082518 100%);
  --pa-paper:       transparent;
  --pa-panel:       rgba(255,255,255,.05);
  --pa-panel-warm:  rgba(221,191,110,.045);
  --pa-ink:         #f0f6f1;
  --pa-ink-soft:    #bed3c5;
  --pa-ink-faint:   #94ad9c;
  --pa-rule:        rgba(221,191,110,.26);
  --pa-rule-soft:   rgba(255,255,255,.08);
  --pa-green:       #ddbf6e;              /* the accent goes gold on this page */
  --pa-green-lift:  rgba(221,191,110,.12);
  --pa-green-deep:  #07200f;
  --pa-on-deep:     #f0f6f1;
  --pa-on-deep-dim: #b2c9bb;
  --pa-shadow:      none;
  --pa-shadow-lift: 0 18px 44px rgba(0,0,0,.45);
}
/* Covenant Complete: same instrument, struck richer */
.pa-covenant-page--complete {
  background:
    repeating-linear-gradient(68deg, rgba(240,214,140,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-68deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    radial-gradient(120% 70% at 50% 0%, #0d3220 0%, #071f14 55%, #04150d 100%);
  --pa-green:      #f0d68c;
  --pa-rule:       rgba(240,214,140,.32);
  --pa-green-lift: rgba(240,214,140,.13);
}
.pa-covenant-page > section { position: relative; z-index: 1; }
/* gold fill needs dark type on it */
.pa-covenant-page .pa-btn--primary { color: #0b2114; }
.pa-covenant-page .pa-band--deep { background: rgba(0,0,0,.28); }

/* a ruled gold hairline under each section heading, like a clause divider */
.pa-covenant-page .pa-eyebrow { position: relative; padding-bottom: 12px; }
.pa-covenant-page .pa-eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--pa-green), transparent);
}

/* ---- the seal ---- */
.pa-seal { width: 128px; height: 128px; margin: 0 0 26px; color: var(--pa-green); }
.pa-covenant-page--complete .pa-seal { width: 140px; height: 140px; }
.pa-seal-svg { width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.14)) drop-shadow(0 -1px 1px rgba(0,0,0,.5)); }
/* the seal turns with the scroll, driven by --pa-seal-turn from JS */
.pa-seal-svg .pa-seal-wheel {
  transform-box: view-box; transform-origin: 60px 60px;
  transform: rotate(calc(var(--pa-seal-turn, 0) * 1deg));
}
@media (prefers-reduced-motion: reduce) { .pa-seal-svg .pa-seal-wheel { transform: none; } }
.pa-seal-ring-o { fill: none; stroke: currentColor; stroke-width: 2; opacity: .95; }
.pa-seal-ring-i { fill: rgba(221,191,110,.07); stroke: currentColor; stroke-width: 1; opacity: .7; }
.pa-seal-rule   { stroke: currentColor; stroke-width: 1; opacity: .55; }
.pa-seal-t1, .pa-seal-t2 {
  fill: currentColor; font-family: var(--pa-serif); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.pa-seal-t1 { font-size: 11px; }
.pa-seal-t2 { font-size: 11px; }
@media (max-width: 560px) { .pa-seal, .pa-covenant-page--complete .pa-seal { width: 100px; height: 100px; } }

/* the price CTA set as a signing line */
.pa-covenant-page .pa-close .pa-actions { position: relative; padding-top: 26px; }
.pa-covenant-page .pa-close .pa-actions::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(320px, 80%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--pa-green), transparent);
}

/* the header goes transparent over the stock, same as Cosmos */
body:has(.pa-covenant-page) { background: #0b2f1e; }
body:has(.pa-covenant-page) .pa-header {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  --pa-paper: transparent;
  --pa-panel: rgba(255,255,255,.06);
  --pa-ink: #f0f6f1;
  --pa-ink-soft: #c8dace;
  --pa-ink-faint: #94ad9c;
  --pa-rule: rgba(255,255,255,.14);
  --pa-green: #ddbf6e;
  --pa-green-lift: rgba(221,191,110,.14);
}
body:has(.pa-covenant-page) .pa-header.is-stuck {
  background: rgba(8,37,24,.82);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom-color: rgba(221,191,110,.2);
}
body:has(.pa-covenant-page) .pa-header .pa-btn--primary { color: #0b2114; }
body:has(.pa-covenant-page) .pa-logo .pa-logo-name { color: #f0f6f1; }
body:has(.pa-covenant-page) .pa-logo .pa-logo-sub  { color: #ddbf6e; }
body:has(.pa-covenant-page) .pa-mega,
body:has(.pa-covenant-page) .pa-drawer { background: #0c2b1c; border-color: rgba(221,191,110,.2); }
@media (prefers-reduced-motion: reduce) {
  body:has(.pa-covenant-page) .pa-header { transition: none; }
}

/* Covenant Complete: the wordmark breathes gold rather than sweeping.
   The sheen animation is a moving gradient; this is a steady glow that
   swells and settles, which suits an object that is meant to feel struck
   rather than polished. */
.pa-covenant-page--complete .pa-wordmark {
  background-image: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #f4e3b4;
  animation: pa-breathe 5.5s ease-in-out infinite;
}
@keyframes pa-breathe {
  0%, 100% { color: #efdcaa; text-shadow: 0 0 0 rgba(240,214,140,0), 0 0 18px rgba(240,214,140,.14); }
  50%      { color: #fff0c6; text-shadow: 0 0 1px rgba(255,240,198,.5), 0 0 34px rgba(240,214,140,.42); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-covenant-page--complete .pa-wordmark { animation: none; color: #f4e3b4; }
}


/* ===================== site footer ===================== */
.pa-foot {
  background: var(--pa-panel-warm);
  color: var(--pa-ink-soft);
  border-top: 1px solid var(--pa-rule);
  font-family: var(--pa-sans);
  font-size: .9rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding: 0 20px;               /* same gutter every band uses */
}
.pa-foot > .pa-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding-block: 58px 30px;      /* and the same measure, so it lines up */
}
.pa-foot-top {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 2.1fr;
  gap: 44px 56px;
  align-items: start;
}
.pa-foot-brand .pa-logo--foot { margin-bottom: 16px; }
.pa-foot-blurb { margin: 0 0 8px; max-width: 34ch; line-height: 1.55; color: var(--pa-ink-soft); }
.pa-foot-blurb a { color: var(--pa-green); overflow-wrap: anywhere; }

.pa-foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pa-foot-h {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pa-ink-faint); margin: 0 0 14px;
}
.pa-foot-nav ul { list-style: none; margin: 0; padding: 0; }
.pa-foot-nav li { margin-bottom: 9px; line-height: 1.4; }
.pa-foot-nav a { color: var(--pa-ink-soft); text-decoration: none; }
.pa-foot-nav a:hover, .pa-foot-nav a:focus-visible { color: var(--pa-green); text-decoration: underline; }

.pa-foot-legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--pa-rule-soft);
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline;
  justify-content: space-between;
}
.pa-foot-copy { margin: 0; max-width: 60ch; color: var(--pa-ink-faint); font-size: .8rem; line-height: 1.5; }
.pa-foot-legal-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.pa-foot-legal-links a { color: var(--pa-ink-soft); text-decoration: none; font-size: .82rem; }
.pa-foot-legal-links a:hover, .pa-foot-legal-links a:focus-visible { color: var(--pa-green); text-decoration: underline; }

@media (max-width: 900px) {
  .pa-foot-top { grid-template-columns: 1fr; gap: 34px; }
  .pa-foot-nav { gap: 26px 20px; }
}
@media (max-width: 560px) {
  .pa-foot > .pa-inner { padding-block: 42px 26px; }
  .pa-foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-foot-legal { flex-direction: column; gap: 14px; }
}
@media (max-width: 380px) {
  .pa-foot-nav { grid-template-columns: 1fr; }
}

/* the dark pages: the footer sits on the page ground, not on warm paper */
body:has(.pa-cosmos-page) .pa-foot,
body:has(.pa-covenant-page) .pa-foot { background: rgba(0,0,0,.24); }
.pa-cosmos-page + .pa-foot, .pa-covenant-page + .pa-foot { border-top-color: var(--pa-rule); }