/* ==========================================================================
   AI Foundations
   Design system: WORKSHOP MANUAL v1.0 (2026-07-28)

   Flat everywhere. Sharp corners. 1px ink rules do all the dividing.
   No gradients, no shadows, no texture, no glassmorphism, no rounded corners.
   Brand blue is structural only and stays under ~5% of any screen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SEC 01 - TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Colour */
  --paper:        #fbfbf9;  /* ground */
  --page:         #efeee9;  /* outside the frame */
  --ink:          #15171c;  /* text, borders */
  --ink-hover:    #2a2d34;
  --ink-active:   #000000;
  --bone:         #f1ecdd;  /* zebra rows, callouts, form headers, warm counterweight */
  --muted:        #7a7d84;  /* muted text */
  --blue:         #3d40ff;  /* brand, structural only */
  --blue-hover:   #2f31d6;
  --blue-active:  #262ab8;
  --disabled:     #c9cad1;
  --oxblood:      #8a2b1e;  /* errors only, never alarm red */
  --white:        #ffffff;  /* input fields, open accordion panels */
  --warm-tint:    #f6f3ea;  /* row hover */
  --hairline:     #e4e2da;  /* warm hairline inside panels */

  /* Spacing scale */
  --s-4:  4px;   /* hairline gaps */
  --s-8:  8px;   /* inside compact cells */
  --s-12: 12px;  /* cell padding */
  --s-16: 16px;  /* component padding */
  --s-24: 24px;  /* between components */
  --s-32: 32px;  /* page gutter */
  --s-48: 48px;  /* section padding, proof zones */
  --s-64: 64px;  /* air between proof zones */

  /* Type */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rules and surfaces */
  --rule:      1px solid var(--ink);
  --rule-blue: 3px solid var(--blue);  /* major section dividers only */

  --gutter: var(--s-32);
  --frame:  1160px;
}


/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-body);
  font-size: 16px;          /* body never drops below 16px */
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); text-decoration: underline; }
a:active { color: var(--blue-active); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

p { margin: 0; }
figure { margin: 0; }
h3 { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   FRAME
   -------------------------------------------------------------------------- */

.frame {
  max-width: var(--frame);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  border-left: var(--rule);
  border-right: var(--rule);
  display: flex;
  flex-direction: column;
}

.frame > main { flex: 1; }


/* --------------------------------------------------------------------------
   SEC 02 - TYPE
   -------------------------------------------------------------------------- */

.h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.h1--sm { font-size: clamp(28px, 4.6vw, 40px); letter-spacing: 0; }

.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* A heading sitting directly above its own block */
.h2--gap { margin-bottom: 14px; }

.lead {
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
}

.lead--wide { max-width: 640px; }
.lead--tall { line-height: 1.6; }
.lead--520 { max-width: 520px; }
.lead--500 { max-width: 500px; }
.lead--below { margin-top: 18px; }

/* Blue reference label above a page heading */
.ref {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--blue);
}

.ref--gap { display: block; margin-bottom: 14px; }

/* Small mono note, muted */
.note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.note--13 { font-size: 13px; }
.note--blue { color: var(--blue); }

/* Unconfirmed content marker. Search the pages for [CHECK] before launch. */
.check {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  color: var(--blue);
  background: var(--bone);
  border: 1px solid var(--ink);
  padding: 1px 5px;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   NAV - identical on every page
   -------------------------------------------------------------------------- */

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16) var(--gutter);
  border-bottom: var(--rule);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.site-nav__brand:hover { color: var(--ink); text-decoration: none; }

.site-nav__logo { width: 30px; height: 30px; object-fit: contain; }

.site-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav__link { color: var(--ink); }
.site-nav__link:hover { color: var(--blue); }
.site-nav__link[aria-current="page"] {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
}

.site-nav__cta {
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 7px 12px;
}
.site-nav__cta:hover {
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
}
.site-nav__cta[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
  border-bottom: 1px solid var(--blue);
  padding: 7px 12px;
}


/* --------------------------------------------------------------------------
   FOOTER - identical on every page
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-16);
  padding: 14px var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   HERO - split panel, closed by the 3px blue rule
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  border-bottom: var(--rule-blue);
}

/* Whichever column comes first carries the dividing rule. */
.hero > :first-child { border-right: var(--rule); }

.hero__body {
  flex: 1;
  min-width: 0;
  padding: var(--s-48) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero__figure {
  width: 400px;
  flex: none;
  display: flex;
  flex-direction: column;
}

.hero__figure--narrow { width: 380px; }

.hero__image {
  width: 100%;
  flex: 1;
  min-height: 340px;
  object-fit: cover;
}

.hero__figure--narrow .hero__image { min-height: 380px; }

/* A tall portrait in a box that turns landscape when the hero stacks. Centre
   cropping would cut the top of the head, so bias the crop upward. */
.hero__image--face-top { object-position: center 25%; }

.figure-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-12);
  padding: 10px var(--s-16);
  border-top: var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   SEC 07 - LEAD MAGNET BLOCK / FORMS
   -------------------------------------------------------------------------- */

.signup {
  border: var(--rule);
  max-width: 520px;
  width: 100%;
}

.signup__head {
  padding: 10px 14px;
  border-bottom: var(--rule);
  background: var(--bone);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}

.signup__row { display: flex; }

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-right: var(--rule);
  border-radius: 0;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 16px;          /* 16px stops iOS zooming on focus */
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.signup__input::placeholder { color: var(--muted); opacity: 1; }
.signup__input:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.signup__input:invalid:not(:placeholder-shown) { border-right-color: var(--oxblood); }

.signup__submit {
  flex: none;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.signup__submit:hover { background: var(--blue-hover); }
.signup__submit:active { background: var(--blue-active); }
.signup__submit:disabled { background: var(--disabled); color: var(--paper); cursor: not-allowed; }

.signup__note {
  padding: var(--s-8) 14px;
  border-top: var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}


/* First name sits above the email row, same ruled box */
.signup__field { border-bottom: var(--rule); }

.signup__label {
  display: block;
  padding: 8px 14px 0;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup__field .signup__input {
  width: 100%;
  border-right: 0;
  padding-top: 6px;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__error {
  padding: 10px 14px;
  border-bottom: var(--rule);
  background: var(--bone);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--oxblood);
}

/* Post-submit confirmation, same box, no button */
.signup--done { max-width: 520px; }
.signup--done .signup__head { border-bottom: var(--rule); }


/* --------------------------------------------------------------------------
   SEC 05 - BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--blue); color: var(--white); padding: 11px 18px; }
.btn--primary:hover { background: var(--blue-hover); color: var(--white); }
.btn--primary:active { background: var(--blue-active); color: var(--white); }

.btn--secondary { background: var(--ink); color: var(--white); padding: 12px 22px; }
.btn--secondary:hover { background: var(--ink-hover); color: var(--white); }
.btn--secondary:active { background: var(--ink-active); color: var(--white); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 10px 17px;
}
.btn--outline:hover { background: var(--blue); color: var(--white); }
.btn--outline:active { background: var(--blue-active); border-color: var(--blue-active); color: var(--white); }

.btn:disabled,
.btn--disabled { background: var(--disabled); color: var(--paper); cursor: not-allowed; }


/* --------------------------------------------------------------------------
   SEC 08 - STAT STRIP
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
}

.stat {
  padding: var(--s-16) 20px;
  border-left: var(--rule);
}
.stat:first-child { border-left: none; padding-left: var(--gutter); }

.stat__figure { font-size: 20px; font-weight: 500; }
.stat__meta { color: var(--muted); }


/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.section {
  padding: 40px var(--gutter);
  border-bottom: var(--rule);
}

.section--tall { padding: var(--s-48) var(--gutter) var(--s-32); }

/* Page head, closed by the 3px blue rule instead of the 1px ink one */
.section--blue-end { border-bottom: var(--rule-blue); }

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-16);
  margin-bottom: 14px;
}

.section__head--end { align-items: flex-end; gap: var(--s-16) var(--s-32); }
.section__head--flush { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   SEC 08 - TABLE
   -------------------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  border: var(--rule);
  font-size: 16px;
  text-align: left;
}

.table--narrow { max-width: 760px; }

.table th {
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .02em;
  padding: var(--s-8) 14px;
}
.table thead th:first-child { border-right: 1px solid rgba(255, 255, 255, .4); }

.table td {
  padding: 10px 14px;
  border-top: var(--rule);
  vertical-align: top;
}

.table tbody tr:first-child td { border-top: none; }
.table thead + tbody tr:first-child td { border-top: var(--rule); }

.table__ref {
  width: 70px;
  border-right: var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

.table tbody tr:nth-child(even) { background: var(--bone); }
.table tbody tr:hover { background: var(--warm-tint); }
.table tbody tr:hover .table__ref { color: var(--blue); }


/* --------------------------------------------------------------------------
   SEC 09 - MEMBER OUTPUT
   -------------------------------------------------------------------------- */

.output-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--rule);
}

.output {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: 14px;
  border-left: var(--rule);
}
.output:first-child { border-left: none; }

.output__shot { width: 100%; height: 130px; object-fit: cover; }

.output__caption { font-size: 14px; line-height: 1.5; }

.output__credit {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   PHOTO STRIP
   -------------------------------------------------------------------------- */

.photo-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  border: var(--rule);
}

.photo-strip img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-left: var(--rule);
}
.photo-strip img:first-child { border-left: none; }


/* --------------------------------------------------------------------------
   PRICE ROW
   -------------------------------------------------------------------------- */

.price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-24) var(--s-32);
}

.price-row--boxed { border: var(--rule); padding: var(--s-24); }

.price-row__figure {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  white-space: nowrap;
}

.price-row__unit { font-size: 18px; color: var(--muted); }

.price-row__terms {
  flex: 1;
  min-width: 260px;
  font-size: 15px;
  line-height: 1.55;
}

.price-row .btn { flex: none; }


/* --------------------------------------------------------------------------
   SEC 09 - CARDS / CALLOUT
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border: var(--rule);
  padding: 20px;
}

.card--bone { background: var(--bone); }

.card__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--blue);
  margin-bottom: 10px;
}

.card__body { font-size: 15px; line-height: 1.6; }


/* --------------------------------------------------------------------------
   SEC 08 - ACCORDION
   The only moving part on the site.
   -------------------------------------------------------------------------- */

.accordion { border: var(--rule); }

.module { border-top: var(--rule); }
.module:first-child { border-top: none; }

.module__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
  width: 100%;
  padding: 14px var(--s-16);
  border: 0;
  border-radius: 0;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.module__toggle:hover { background: var(--warm-tint); }
.module__toggle[aria-expanded="true"] { background: var(--bone); }

.module__title { flex: 1; min-width: 0; }

.module__ref {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin-right: 14px;
}
.module__toggle[aria-expanded="true"] .module__ref { color: var(--blue); }

.module__meta {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.module__sign { color: var(--ink); font-size: 15px; }
.module__toggle[aria-expanded="true"] .module__sign { color: var(--blue); }

.module__panel { border-top: var(--rule); }
.module__panel[hidden] { display: none; }

.lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
}

.lesson {
  display: flex;
  gap: 14px;
  padding: 10px var(--s-16) 10px 46px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}
.lesson:first-child { border-top: none; }

.lesson__ref {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* Tablet and below */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: none; padding-left: var(--gutter); }
  .stat:nth-child(n + 3) { border-top: var(--rule); }

  .cards { grid-template-columns: 1fr; gap: var(--s-16); }

  .photo-strip { grid-template-columns: 1fr 1fr; }
  .photo-strip img { height: 240px; }
  .photo-strip img:nth-child(odd) { border-left: none; }
  .photo-strip img:nth-child(n + 3) { border-top: var(--rule); }
}

@media (max-width: 880px) {
  .hero { flex-direction: column; }
  .hero > :first-child { border-right: none; border-bottom: var(--rule); }
  .hero__figure,
  .hero__figure--narrow { width: 100%; }
  .hero__image,
  .hero__figure--narrow .hero__image { min-height: 280px; max-height: 460px; }
}

@media (max-width: 820px) {
  .site-nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav__links { gap: 14px 18px; }
}

@media (max-width: 780px) {
  .output-grid { grid-template-columns: 1fr; }
  .output { border-left: none; }
  .output + .output { border-top: var(--rule); }
  .output__shot { height: 180px; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .section { padding: var(--s-32) var(--gutter); }
  .section--tall { padding: var(--s-32) var(--gutter) var(--s-24); }
  .hero__body { padding: var(--s-32) var(--gutter); }

  .stats { grid-template-columns: 1fr; }
  .stat { border-left: none; padding-left: var(--gutter); }
  .stat + .stat { border-top: var(--rule); }

  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip img { height: 220px; border-left: none; }
  .photo-strip img + img { border-top: var(--rule); }

  .signup__row { flex-direction: column; }
  .signup__input { border-right: 0; border-bottom: var(--rule); }
  .signup__submit { width: 100%; }

  .price-row { flex-direction: column; align-items: flex-start; gap: var(--s-16); }
  .price-row__terms { min-width: 0; }
  .price-row .btn { width: 100%; }

  /* Table copy stays at 16px. Buy the space back from padding, not type size. */
  .table__ref { width: 52px; }
  .table td { padding: 10px var(--s-12); }

  .module__toggle { font-size: 16px; align-items: flex-start; gap: var(--s-12); }
  .module__ref { margin-right: 10px; }
  .module__meta { flex-direction: column; align-items: flex-end; gap: var(--s-4); }
  .lesson { padding-left: var(--s-16); }
}

/* Motion is near zero by design. Nothing animates, but honour the preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   ADMIN
   Same Workshop Manual language: flat, ruled, sharp, mono for every specific.
   Nothing new is introduced; these are compositions of the existing tokens.
   ========================================================================== */

.frame--narrow { max-width: 780px; }

/* Callout: bone fill, 1px ink border. From SEC 09. */
.callout {
  border: var(--rule);
  background: var(--bone);
  padding: 14px var(--s-16);
  font-size: 15px;
  line-height: 1.6;
}

.callout--error {
  background: var(--white);
  border-color: var(--oxblood);
  color: var(--oxblood);
}

.callout__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--blue);
  margin-right: var(--s-8);
}

.note--spaced { margin-top: var(--s-16); }

/* Search / filter row */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  align-items: stretch;
  margin-bottom: var(--s-24);
}

.filter .signup__input {
  flex: 1;
  min-width: 200px;
  border: var(--rule);
}

.filter .signup__submit { flex: none; }

.filter .btn--outline {
  display: inline-flex;
  align-items: center;
}

/* Table cell variants */
.cell-mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

.cell-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.cell-muted { color: var(--muted); }
.cell-empty { color: var(--muted); }

/* Status tag. Flat, ruled, no colour beyond the system. */
.tag {
  display: inline-block;
  border: var(--rule);
  background: var(--bone);
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Volume bar. Solid blue, flat, no gradient, no animation. Width comes from a
   bucket class so no inline style is needed and the CSP stays strict. */
.bar {
  display: block;
  height: 10px;
  background: var(--blue);
  min-width: 2px;
}

.bar--w10  { width: 10%; }
.bar--w20  { width: 20%; }
.bar--w30  { width: 30%; }
.bar--w40  { width: 40%; }
.bar--w50  { width: 50%; }
.bar--w60  { width: 60%; }
.bar--w70  { width: 70%; }
.bar--w80  { width: 80%; }
.bar--w90  { width: 90%; }
.bar--w100 { width: 100%; }

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-24);
  flex-wrap: wrap;
}

.signup--admin { max-width: 520px; }

@media (max-width: 640px) {
  .filter { flex-direction: column; }
  .filter .signup__input { min-width: 0; }
  .filter .signup__submit,
  .filter .btn--outline { width: 100%; text-align: center; }
  .pager .btn { flex: 1; }
}