/* ==========================================================
   PAIML site stylesheet
   Unified from landing_html.j2 / pricing_html.j2 / base_html.j2 /
   course-landing-page.html.
   Bootstrap, Bootstrap Icons (framework), and bootstrap-icons webfont
   dependencies removed except where noted.

   Color tokens are hardcoded literals, not build-time variables —
   deliberately: there's one theme, not several running in parallel,
   and this file is a static asset the build never passes through
   Jinja anyway. To change the palette, edit the values below once;
   no template needs to know about it.
   ========================================================== */

/* ---------- tokens ---------- */
:root{
  --pai-paper:        oklch(97.3% 0.006 75);
  --pai-paper-2:      oklch(94.5% 0.008 75);
  --pai-surface:      oklch(99% 0.003 75);

  --pai-ink:          oklch(21% 0.008 75);
  --pai-ink-2:        oklch(42% 0.008 75);
  --pai-ink-3:        oklch(56% 0.008 75);

  --pai-ink-inverse:    #fff;
  --pai-ink-inverse-2:  #cfc9bd;  /* footer nav links */
  --pai-ink-inverse-3:  #b8b2a7;  /* footer tagline / secondary copy */
  --pai-ink-inverse-4:  #8d877c;  /* footer copyright row */
  --pai-line-inverse:   #3a3631;

  --pai-line:         oklch(87% 0.008 75);
  --pai-line-strong:  oklch(76% 0.008 75);

  --pai-accent:       oklch(47% 0.15 300);
  --pai-accent-deep:  oklch(37% 0.15 300);
  --pai-accent-soft:  oklch(93% 0.05 300);  /* estimated — no literal source used this token; eyeball against the badge/savings-highlight components and adjust if it reads off */

  --pai-success:      #1a7f4e;

  --pai-serif: "Newsreader", Georgia, serif;
  --pai-sans: "IBM Plex Sans", system-ui, sans-serif;
  --pai-mono: "IBM Plex Mono", ui-monospace, monospace;

  --pai-maxw: 1180px;
  --pai-gut: clamp(20px, 5vw, 80px);

  --pai-radius-sm: 2px;
  --pai-radius-md: 3px;
  --pai-radius-lg: 8px;

  --pai-shadow-sm: 0 1px 2px rgba(29,30,38,.04), 0 12px 30px -18px rgba(29,30,38,.18);
  --pai-shadow-lg: 0 20px 50px -20px rgba(29,30,38,.28);
}

/* Breakpoint scale used throughout this file: 480 / 640 / 760 / 860 / 960 */

/* ---------- reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--pai-paper);
  color:var(--pai-ink);
  font-family:var(--pai-sans);
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--pai-accent);color:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;}
hr{border:0;border-top:1px solid var(--pai-line);}

/* ---------- type ---------- */
.serif{font-family:var(--pai-serif);font-weight:500;letter-spacing:-.01em;line-height:1.08;}
h1,h2,h3{font-family:var(--pai-serif);font-weight:500;letter-spacing:-.015em;margin:0;}
p{margin:0;text-wrap:pretty;}
.lead{font-size:clamp(19px,1.6vw,22px);color:var(--pai-ink-2);max-width:60ch;}
.eyebrow{
  font-family:var(--pai-mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pai-accent-deep);
  font-weight:500;
  margin:0;
}
.muted{color:var(--pai-ink-2);}
.small{font-size:.875em;}
.text-center{text-align:center;}

/* ---------- layout ---------- */
.wrap{max-width:var(--pai-maxw);margin:0 auto;padding-inline:var(--pai-gut);}
.section{padding-block:clamp(72px,10vw,140px);}
.snum{
  font-family:var(--pai-mono);font-size:13px;letter-spacing:.1em;color:var(--pai-ink-3);
  display:flex;align-items:center;gap:14px;margin-bottom:34px;
}
.snum::after{content:"";flex:1;height:1px;background:var(--pai-line);}

/* Grid utilities — replaces Bootstrap's .row/.col-*. Mobile-first. */
.grid{display:grid;gap:clamp(24px,3vw,32px);}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
@media(min-width:640px){
  .grid--2{grid-template-columns:1fr 1fr;}
}
@media(min-width:960px){
  .grid--3{grid-template-columns:repeat(3,1fr);}
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--pai-sans);font-size:15.5px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.btn .arw{transition:transform .25s ease;}
.btn:hover .arw{transform:translateX(4px);}
.btn-primary{background:var(--pai-accent);color:#fff;}
.btn-primary:hover{background:var(--pai-accent-deep);}
.btn-ghost{border-color:var(--pai-line-strong);color:var(--pai-ink);}
.btn-ghost:hover{border-color:var(--pai-ink);background:var(--pai-ink);color:var(--pai-paper);}
.btn-lg{padding:16px 28px;font-size:17px;}
.btn-block{width:100%;}
.icon-btn{
  background:none;border:0;cursor:pointer;color:var(--pai-ink-3);
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px;border-radius:var(--pai-radius-sm);
  transition:color .2s ease, background .2s ease;
}
.icon-btn:hover{color:var(--pai-ink);}

/* ---------- icons ----------
   Bootstrap Icons webfont (bootstrap-icons.css) is kept as an icon
   source — it's an independent icon-font package, not the Bootstrap
   CSS/JS framework, so it doesn't reintroduce the Bootstrap dependency
   this migration removes. Referenced directly as <i class="bi bi-*">. */
.icon-box{
  width:3rem;height:3rem;border-radius:var(--pai-radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--pai-accent);color:#fff;font-size:1.25rem;
}
.icon-box--lg{width:4rem;height:4rem;font-size:1.75rem;}

/* ---------- cards ---------- */
.card{
  background:var(--pai-surface);
  border-radius:var(--pai-radius-lg);
  padding:32px;
}
.card--elevated{box-shadow:var(--pai-shadow-lg);}
.card--bordered{border:1px solid var(--pai-line-strong);}
.card--accent-border{border:2px solid var(--pai-accent);position:relative;}

/* ---------- pricing bits ---------- */
.badge-popular{
  position:absolute;top:-25px;left:50%;transform:translateX(-50%);
  background:var(--pai-accent-soft);color:var(--pai-accent-deep);
  padding:8px 20px;border-radius:20px;
  font-size:.85rem;font-weight:700;
  box-shadow:0 2px 10px rgb(from var(--pai-accent-deep) r g b / .25);
}
.savings-highlight{
  background:var(--pai-accent-soft);border:2px solid var(--pai-accent-deep);
  border-radius:var(--pai-radius-md);padding:8px 12px;text-align:center;
}
.price-strike{text-decoration:line-through;color:var(--pai-ink-3);font-size:.9rem;}
.check-list{list-style:none;margin:0 0 24px;padding:0;text-align:left;color:var(--pai-ink-2);}
.check-list li{display:flex;gap:8px;margin-bottom:8px;}
.check-list li::before{content:"✓";color:var(--pai-success);flex:none;}

/* "+ feature" row — generalized from .price-card's row/dot pattern so
   it can be used anywhere a plus-prefixed list appears (not just
   inside a price card). */
.dot-list{margin:0;padding:0;}
.dot-list .row{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--pai-ink-2);}
.dot-list .row + .row{margin-top:12px;}
.dot-list .row .dot{color:var(--pai-accent);font-family:var(--pai-mono);flex:none;}

/* Inline arrow link — generalized from .learners .contact so any
   section can use a "Label →" link in the accent color. */
.link-inline{display:inline-flex;align-items:center;gap:12px;font-weight:500;color:var(--pai-accent-deep);}
.link-inline:hover{text-decoration:underline;text-underline-offset:4px;}
.link-inline .arw{transition:transform .25s ease;}
.link-inline:hover .arw{transform:translateX(4px);}

/* plan-card: the 3-tier grid on the pricing page */
.plan-card{
  background:var(--pai-surface);border-radius:var(--pai-radius-lg);
  box-shadow:var(--pai-shadow-sm);padding:32px;text-align:center;
  display:flex;flex-direction:column;height:100%;
}
.plan-card__price{font-family:var(--pai-serif);font-size:clamp(34px,4.5vw,44px);font-weight:700;color:var(--pai-accent);}
.plan-card__period{font-size:1rem;color:var(--pai-ink-2);}
.plan-card .btn{margin-top:auto;width:100%;}

/* price-card: the single "individual access" card on the landing page */
.price-card{
  border:1px solid var(--pai-line-strong);background:var(--pai-surface);padding:40px;border-radius:var(--pai-radius-md);
  box-shadow:var(--pai-shadow-sm);
}
.price-card .amt{display:flex;align-items:baseline;gap:8px;}
.price-card .amt .num{font-family:var(--pai-serif);font-size:64px;line-height:1;letter-spacing:-.03em;}
.price-card .amt .per{font-family:var(--pai-mono);font-size:14px;color:var(--pai-ink-3);}
.price-card .sub{color:var(--pai-ink-2);font-size:16px;margin-top:10px;}
.price-card hr{margin:26px 0;}
.price-card .row{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--pai-ink-2);}
.price-card .row + .row{margin-top:12px;}
.price-card .row .dot{color:var(--pai-accent);font-family:var(--pai-mono);}
.price-card .btn{width:100%;justify-content:center;margin-top:28px;}
.free-note{font-size:15px;color:var(--pai-ink-2);margin-top:18px;}
.free-note a{color:var(--pai-accent-deep);text-decoration:underline;text-underline-offset:3px;}

/* ---------- banner ---------- */
.banner{
  position:relative;background:var(--pai-accent);color:#fff;overflow:hidden;
  animation:banner-drop 1.85s cubic-bezier(.2,.8,.2,1) both;
}
.banner.is-hidden{display:none;}
.banner-in{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;padding:12px var(--pai-gut);min-height:20px;}
.banner-msg{font-size:14.5px;line-height:1.5;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.banner-msg b{font-weight:600;}
.banner-link{font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px;flex:none;transition:opacity .2s ease;}
.banner-link:hover{opacity:.82;}
.banner-close{
  position:absolute;right:calc(var(--pai-gut) - 6px);top:50%;transform:translateY(-50%);
  color:#fff;opacity:.75;
}
.banner-close:hover{opacity:1;background:rgba(255,255,255,.14);}
@keyframes banner-drop{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media(prefers-reduced-motion:reduce){.banner{animation:none;}}
@media(max-width:640px){.banner-in{padding-block:14px;padding-right:44px;}.banner-close{right:10px;}}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--pai-paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.nav.scrolled{border-color:var(--pai-line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand img{height:34px;width:auto;}
.brand .wm{font-family:var(--pai-serif);font-size:21px;font-weight:600;letter-spacing:-.02em;}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  width:40px;height:40px;align-items:center;justify-content:center;
}
.nav-toggle .bar{display:block;width:22px;height:2px;background:var(--pai-ink);position:relative;transition:background .2s ease;}
.nav-toggle .bar::before,.nav-toggle .bar::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--pai-ink);
  transition:transform .25s ease,top .25s ease;
}
.nav-toggle .bar::before{top:-7px;}
.nav-toggle .bar::after{top:7px;}
.nav-toggle[aria-expanded="true"] .bar{background:transparent;}
.nav-toggle[aria-expanded="true"] .bar::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bar::after{top:0;transform:rotate(-45deg);}

.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;color:var(--pai-ink-2);position:relative;padding:4px 0;transition:color .2s ease;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:var(--pai-accent);transition:width .28s cubic-bezier(.2,.7,.2,1);}
.nav-links a:hover{color:var(--pai-ink);}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:20px;}
.nav-cta .login-link{font-size:15px;color:var(--pai-ink-2);transition:color .2s ease;}
.nav-cta .login-link:hover{color:var(--pai-ink);}

@media(max-width:960px){
  .nav-toggle{display:inline-flex;}
  .nav-cta .login-link{display:none;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--pai-paper);border-bottom:1px solid var(--pai-line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links.is-open{max-height:60vh;overflow-y:auto;}
  .nav-links a{padding:16px var(--pai-gut);border-bottom:1px solid var(--pai-line);}
  .nav-links a::after{display:none;}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;}
.hero-in{padding-top:clamp(56px,9vw,110px);padding-bottom:clamp(64px,9vw,120px);}
.hero h1{font-size:clamp(44px,7.2vw,98px);line-height:.98;letter-spacing:-.03em;margin:22px 0 0;}
.hero h1 em{font-style:italic;color:var(--pai-accent);font-weight:400;}
.hero-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);align-items:end;margin-top:clamp(34px,4vw,52px);}
.hero-body .copy p + p{margin-top:18px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.hero-aside{border-left:1px solid var(--pai-line-strong);padding-left:28px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;}
.hero-aside .stat .n{font-family:var(--pai-serif);font-size:34px;line-height:1;letter-spacing:-.02em;}
.hero-aside .stat .l{font-family:var(--pai-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--pai-ink-3);margin-top:6px;}
@media(max-width:780px){
  .hero-body{grid-template-columns:1fr;}
  .hero-aside{border-left:0;border-top:1px solid var(--pai-line-strong);padding-left:0;padding-top:24px;flex-direction:row;flex-wrap:wrap;gap:36px;}
}

/* ---------- split (belief / how-we-teach / learners) ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,6vw,90px);align-items:start;}
.split h2{font-size:clamp(30px,4vw,50px);}
.split .body p{font-size:clamp(18px,1.4vw,21px);color:var(--pai-ink-2);}
.split .body p + p{margin-top:22px;}
.split .body .pull{color:var(--pai-ink);font-family:var(--pai-serif);font-size:clamp(22px,2.2vw,30px);line-height:1.25;letter-spacing:-.01em;}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:18px;}}

.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--pai-line);border:1px solid var(--pai-line);margin-top:54px;}
.outcome{background:var(--pai-surface);padding:34px 30px 38px;transition:background .3s ease;}
.outcome:hover{background:var(--pai-paper-2);}
.outcome .k{font-family:var(--pai-mono);font-size:12px;letter-spacing:.14em;color:var(--pai-accent-deep);text-transform:uppercase;}
.outcome h3{font-size:24px;margin:16px 0 10px;line-height:1.12;}
.outcome p{font-size:16px;color:var(--pai-ink-2);}
.outcomes--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:860px){.outcomes--4{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.outcomes{grid-template-columns:1fr;}}

/* ---------- instructors ---------- */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);margin-top:50px;}
.person{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;}
.person img{width:132px;height:132px;object-fit:cover;border:1px solid var(--pai-line-strong);}
.person .name{font-family:var(--pai-serif);font-size:27px;font-weight:600;letter-spacing:-.01em;}
.person .role{font-family:var(--pai-mono);font-size:12.5px;letter-spacing:.08em;color:var(--pai-accent-deep);text-transform:uppercase;margin:6px 0 14px;}
.person .bio{font-size:16.5px;color:var(--pai-ink-2);}
.people-foot{margin-top:46px;border-top:1px solid var(--pai-line);padding-top:30px;}
.people-foot .serif{font-size:clamp(24px,2.6vw,34px);line-height:1.18;max-width:24ch;}
@media(max-width:860px){.people{grid-template-columns:1fr;}}
@media(max-width:480px){.person{grid-template-columns:1fr;}.person img{width:108px;height:108px;}}

/* ---------- courses ---------- */
.courses-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.courses-head h2{font-size:clamp(30px,4vw,50px);}
.course-list{margin-top:46px;border-top:1px solid var(--pai-line-strong);}
.course{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:28px;padding:24px 8px;border-bottom:1px solid var(--pai-line);transition:padding-left .3s cubic-bezier(.2,.7,.2,1), background .3s ease;position:relative;}
.course::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pai-accent);transform:scaleY(0);transform-origin:top;transition:transform .3s ease;}
.course:hover{padding-left:22px;background:var(--pai-paper-2);}
.course:hover::before{transform:scaleY(1);}
.course .tag{font-family:var(--pai-mono);font-size:12px;letter-spacing:.1em;color:var(--pai-ink-3);text-transform:uppercase;}
.course .title{font-family:var(--pai-serif);font-size:clamp(22px,2.2vw,29px);font-weight:500;letter-spacing:-.01em;}
.course .dur{font-family:var(--pai-mono);font-size:13px;color:var(--pai-ink-2);display:flex;align-items:center;gap:14px;}
.course .dur .arw{opacity:0;transform:translateX(-6px);transition:.3s ease;color:var(--pai-accent-deep);}
.course:hover .dur .arw{opacity:1;transform:none;}
@media(max-width:640px){
  .course{grid-template-columns:1fr auto;gap:6px 16px;}
  .course .tag{grid-column:1;}
  .course .title{grid-column:1 / -1;order:3;}
  .course .dur{grid-column:2;grid-row:1;}
}

/* ---------- learners ---------- */
.learners{background:var(--pai-paper-2);}
.learners .split h2{font-size:clamp(30px,4vw,50px);}
.learners .body p + p{margin-top:20px;}
.learners .callout{
  font-family:var(--pai-serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);
  color:var(--pai-ink);line-height:1.2;border-left:3px solid var(--pai-accent);padding-left:22px;margin:30px 0;
}
.learners .contact{display:inline-flex;align-items:center;gap:12px;margin-top:8px;font-weight:500;color:var(--pai-accent-deep);}
.learners .contact:hover{text-decoration:underline;text-underline-offset:4px;}
.learners .mono-mail{font-family:var(--pai-mono);font-size:15px;color:var(--pai-ink-2);margin-top:14px;}
.learners .institution-block{margin-top:38px;padding-top:30px;border-top:1px solid var(--pai-line);}

/* ---------- pricing (landing "individual access" section) ---------- */
.price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,80px);align-items:center;}
.price-grid h2{font-size:clamp(34px,4.6vw,58px);}
@media(max-width:760px){.price-grid{grid-template-columns:1fr;}}

/* ---------- modal ----------
   Native <dialog> instead of a hand-rolled overlay: focus trap,
   Escape-to-close, ::backdrop, and inert background come for free.
   Markup: <dialog class="modal">…</dialog>, controlled via
   modal.showModal() / modal.close(). */
.modal{
  border:0;border-radius:var(--pai-radius-lg);padding:0;
  width:min(90vw, 600px);
  background:var(--pai-surface);
  box-shadow:var(--pai-shadow-lg);
}
.modal::backdrop{background:rgba(0,0,0,.5);}
.modal__body{padding:20px;position:relative;}
.modal__close{
  position:absolute;right:20px;top:10px;
  font-size:2rem;font-weight:bold;line-height:1;
  color:var(--pai-ink-3);background:none;border:none;cursor:pointer;
}
.modal__close:hover{color:var(--pai-ink);}
@media(max-width:480px){
  .modal{width:100vw;height:100%;max-height:100%;border-radius:0;}
}

/* ---------- footer ----------
   One component covers both shapes seen across the templates:
   landing's brand + single link list, and base's brand + "Quick
   Links" + "Resources" columns. Each labeled column is a .ft-group;
   an unlabeled single list uses .links directly. Column count and
   labels are template/content concerns — this only fixes sizing and
   wrapping so N groups lay out consistently at every width. */
footer.ft{background:var(--pai-ink);color:var(--pai-paper);padding-block:clamp(56px,7vw,84px);}
footer.ft .wrap{display:flex;flex-direction:column;gap:44px;}
footer.ft .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
footer.ft .ftbrand{flex:1 1 260px;max-width:360px;}
footer.ft .ftbrand .wm{font-family:var(--pai-serif);font-size:24px;font-weight:600;}
footer.ft .ftbrand p{color:var(--pai-ink-inverse-3);font-size:15px;margin-top:10px;max-width:42ch;}

footer.ft .groups{display:flex;gap:48px;flex-wrap:wrap;flex:2 1 320px;}
footer.ft .ft-group{flex:1 1 140px;min-width:140px;}
footer.ft .ft-group h5{font-family:var(--pai-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pai-ink-inverse);margin:0 0 14px;}
footer.ft .ft-group ul{list-style:none;margin:0;padding:0;}
footer.ft .ft-group li + li{margin-top:10px;}

footer.ft .links{display:flex;gap:28px;flex-wrap:wrap;}
footer.ft .links a,footer.ft .ft-group a{font-family:var(--pai-mono);font-size:13px;letter-spacing:.06em;color:var(--pai-ink-inverse-2);transition:color .2s ease;}
footer.ft .links a:hover,footer.ft .ft-group a:hover{color:var(--pai-ink-inverse);}

footer.ft .base{border-top:1px solid var(--pai-line-inverse);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--pai-ink-inverse-4);font-family:var(--pai-mono);font-size:12.5px;letter-spacing:.05em;}

@media(max-width:640px){
  footer.ft .top{flex-direction:column;gap:32px;}
  footer.ft .ftbrand{max-width:none;}
  footer.ft .groups{flex-direction:column;gap:28px;}
}

/* ---------- reveal animation ---------- */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
.js .reveal{opacity:0;transform:translateY(18px);}
.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}