/* ===========================================================================
   ILO FLOW — About Finotech
   ===========================================================================
   Scoped entirely under .about-fin. Nothing here can reach another screen.

   DESIGN POSITION
   ---------------
   Two identities have to coexist without either being diluted. ILO FLOW is a
   dark ledger world in ink, parchment, owe-teal and entrust-gold. Finotech is
   indigo and cream — a corporate mark with its own weight.

   The resolution is a REGISTER SHIFT rather than a theme swap. The page keeps
   ILO FLOW's dark ground, spacing scale, type pairing and hairline-rule panel
   language, and introduces Finotech's indigo as a second surface tone layered
   on top. The learner does not leave ILO FLOW; they step behind it, and the
   company's own colour rises through the floor as they go.

   The one structural quotation is deliberate: Finotech's dual nature
   (businesses / professionals) is set in the same centre-ruled two-column
   form as ILO FLOW's Owe/Entrust spine. That form is the product's signature
   argument — two true things at once — and it happens to be exactly the shape
   of the company's proposition. Reusing it is the strongest available way to
   say the product came out of the company.

   Brand values sampled directly from the supplied logo, not invented:
     #363062 indigo · #221D47 deep indigo · #F5E8C7 cream-gold · #D0DDFF plate
   =========================================================================== */

.about-fin {
  --fin-indigo: #363062;
  --fin-indigo-deep: #221D47;
  --fin-cream: #F5E8C7;
  --fin-plate: #D0DDFF;
  --fin-surface: #16162B;
  --fin-surface-2: #1C1B36;
  --fin-rule: #2E2C4E;
  --fin-text: var(--parchment);
  --fin-dim: #A5A2BC;

  position: relative;
  padding-bottom: var(--sp-8);
}

/* A single indigo wash behind the whole page. This is the "company" register
   arriving underneath the ILO FLOW ground — present everywhere, asserted
   nowhere. */
.about-fin::before {
  content: "";
  position: absolute;
  inset: -40px -50vw 0;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(54, 48, 98, .55), transparent 68%),
    radial-gradient(760px 460px at 88% 34%, rgba(245, 232, 199, .045), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.about-fin > * { position: relative; z-index: 1; }

/* --- shared section furniture ------------------------------------------- */
.fin-section { padding: var(--sp-8) 0; border-top: 1px solid var(--fin-rule); }
.fin-section:first-of-type { border-top: 0; }

.fin-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fin-cream);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.fin-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--fin-cream);
  opacity: .7;
  flex: 0 0 auto;
}

.fin-section h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.12;
  margin: 0 0 var(--sp-3);
  color: var(--fin-text);
}
.fin-section h2 em { font-style: italic; color: var(--fin-cream); }

.fin-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fin-dim);
  max-width: 62ch;
  margin: 0 0 var(--sp-5);
}

/* --- 1. Threshold -------------------------------------------------------- */
.fin-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-8) 0 var(--sp-7);
}

.fin-lineage {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  line-height: 2.1;
  margin-bottom: var(--sp-5);
}
.fin-lineage b { color: var(--entrust); font-weight: 600; }
.fin-lineage i {
  font-style: normal;
  display: block;
  color: var(--fin-dim);
  opacity: .8;
}
.fin-lineage strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--fin-cream);
  font-weight: 600;
}

.fin-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.06;
  margin: 0 0 var(--sp-4);
  letter-spacing: -.015em;
}
.fin-hero h1 em { font-style: italic; color: var(--fin-cream); }

.fin-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fin-dim);
  margin: var(--sp-5) 0 0;
}
.fin-tagline b { color: var(--fin-text); font-weight: 600; }

/* The logo keeps its own pale plate rather than being knocked out or
   recoloured onto the dark ground. The mark is navy-on-pale by design and
   would lose all contrast if forced into this palette — and a supplied
   corporate mark is not ours to re-cut. Giving it a plate also reads
   correctly: a company's identity card, set down inside the product. */
.fin-plate {
  background: var(--fin-plate);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  place-items: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 232, 199, .18);
}
.fin-plate img { width: 168px; height: auto; display: block; }

/* --- 2. Why Finotech exists --------------------------------------------- */
.fin-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.fin-pillar {
  background: var(--fin-surface);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.fin-pillar h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--fin-cream);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .01em;
}
.fin-pillar p { font-size: 13.5px; line-height: 1.6; color: var(--fin-dim); margin: 0; }
.fin-pillar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--fin-cream);
  opacity: .55;
  display: block;
  margin-bottom: 10px;
}

/* --- 3. The two sides (spine quotation) ---------------------------------- */
.fin-spine {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fin-surface);
  margin-top: var(--sp-5);
}
.fin-spine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fin-rule) 12%, var(--fin-rule) 88%, transparent);
  z-index: 1;
}
.fin-spine-side { flex: 1; padding: var(--sp-6); position: relative; }
.fin-spine-side.is-business { background: linear-gradient(135deg, rgba(54, 48, 98, .55) 0%, transparent 62%); }
.fin-spine-side.is-people   { background: linear-gradient(225deg, rgba(245, 232, 199, .09) 0%, transparent 62%); }
.fin-spine-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
}
.fin-spine-side.is-business .fin-spine-tag { color: #9C93E8; }
.fin-spine-side.is-people   .fin-spine-tag { color: var(--fin-cream); }
.fin-spine-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fin-spine-side h3 { font-family: var(--font-display); font-size: 21px; margin: 0 0 8px; }
.fin-spine-side p { font-size: 14px; line-height: 1.62; color: var(--fin-dim); margin: 0; }
.fin-spine-and {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fin-cream);
  padding: var(--sp-4) 0 0;
}

/* --- 4. Capability groups ------------------------------------------------ */
.fin-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.fin-cap {
  background: linear-gradient(180deg, var(--fin-surface-2), var(--fin-surface));
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.fin-cap:hover { border-color: rgba(245, 232, 199, .38); transform: translateY(-2px); }
.fin-cap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-3); }
.fin-cap h3 { font-family: var(--font-display); font-size: 18px; margin: 0; color: var(--fin-text); }
.fin-cap-index { font-family: var(--font-mono); font-size: 11px; color: var(--fin-cream); opacity: .6; }
.fin-cap > p { font-size: 13px; line-height: 1.6; color: var(--fin-dim); margin: 0 0 var(--sp-4); }
.fin-cap ul { list-style: none; margin: 0; padding: 0; }
.fin-cap li {
  font-size: 13.5px;
  color: var(--fin-text);
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--fin-rule);
  position: relative;
  line-height: 1.45;
}
.fin-cap li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 7px;
  height: 1px;
  background: var(--fin-cream);
  opacity: .75;
}

/* --- 5. Training catalogue ----------------------------------------------- */
.fin-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.fin-course {
  background: var(--fin-surface);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.fin-course-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }

/* The programme images come from Finotech's own course material and were
   produced for light marketing layouts, so their brightness varies a lot —
   the QuickBooks shot is on white, the modelling one is near-black. Dropped
   straight onto a dark card they would read as a row of mismatched
   rectangles.

   Two things settle them: a fixed 16:9 window so every card has the same
   silhouette regardless of the source crop, and a scrim that darkens the
   lower edge into the card and takes a little saturation out on rest. Hover
   returns the image to full strength, which gives the grid somewhere to go
   without any of it moving. */
.fin-course-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--fin-surface-2);
  border-bottom: 1px solid var(--fin-rule);
}
.fin-course-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.88) brightness(.94);
  transition: filter .3s var(--ease), transform .4s var(--ease);
}
.fin-course:hover .fin-course-media img { filter: none; transform: scale(1.02); }
.fin-course-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22, 22, 43, .18) 0%, transparent 38%, rgba(22, 22, 43, .55) 100%);
  pointer-events: none;
}
.fin-course:hover { border-color: rgba(245, 232, 199, .4); transform: translateY(-2px); }
.fin-course h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; line-height: 1.25; }
.fin-course > p { font-size: 12.5px; line-height: 1.55; color: var(--fin-dim); margin: 0 0 var(--sp-4); }
.fin-tiers { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.fin-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--fin-rule);
  font-size: 13px;
}
.fin-tier-name { color: var(--fin-text); }
.fin-tier-name small { display: block; color: var(--fin-dim); font-size: 11px; margin-top: 2px; }
/* Prices are money in columns — same reasoning as the ledger figures
   elsewhere in the product. */
.fin-tier-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fin-cream);
  font-weight: 600;
  white-space: nowrap;
  font-size: 13px;
}
.fin-course-foot { margin-top: auto; }

.fin-more-media {
  position: relative;
  aspect-ratio: 21 / 6;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--fin-rule);
}
.fin-more-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }

.fin-more-training {
  margin-top: var(--sp-5);
  background: var(--fin-surface);
  border: 1px dashed var(--fin-rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.fin-more-training h3 { font-size: 14px; margin: 0 0 10px; font-family: var(--font-body); font-weight: 700; color: var(--fin-cream); }
.fin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fin-chips li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--fin-text);
  border: 1px solid var(--fin-rule);
  border-radius: 999px;
  padding: 7px 13px;
}

/* --- 6. Sectors ---------------------------------------------------------- */
.fin-sectors { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.fin-sectors li {
  font-size: 13px;
  color: var(--fin-text);
  background: var(--fin-surface);
  border: 1px solid var(--fin-rule);
  border-radius: 999px;
  padding: 10px 17px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.fin-sectors li:hover { border-color: rgba(245, 232, 199, .42); }

/* --- 7. Why ILO FLOW exists ---------------------------------------------- */
.fin-product {
  background: linear-gradient(135deg, rgba(54, 48, 98, .5), transparent 70%), var(--fin-surface);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: center;
  margin-top: var(--sp-5);
}
.fin-product img { width: 74px; height: auto; display: block; }
.fin-product h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 10px; }
.fin-product p { font-size: 14px; line-height: 1.65; color: var(--fin-dim); margin: 0 0 var(--sp-4); }

/* --- 8. Capabilities / trust --------------------------------------------- */
.fin-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.fin-trust-item { padding: var(--sp-5); border-left: 2px solid var(--fin-cream); background: rgba(54, 48, 98, .22); border-radius: 0 var(--radius) var(--radius) 0; }
.fin-trust-item h3 { font-size: 15px; margin: 0 0 8px; font-family: var(--font-body); font-weight: 700; color: var(--fin-text); }
.fin-trust-item p { font-size: 13.5px; line-height: 1.6; color: var(--fin-dim); margin: 0; }

/* --- 9. Contact ---------------------------------------------------------- */
.fin-contact {
  background: linear-gradient(150deg, var(--fin-indigo-deep), var(--fin-surface) 68%);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
  padding: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-5);
}
.fin-contact h2 { margin-bottom: var(--sp-3); }
.fin-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.fin-contact-item { border-top: 1px solid var(--fin-rule); padding-top: var(--sp-3); }
.fin-contact-item span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fin-dim);
  margin-bottom: 7px;
}
.fin-contact-item a, .fin-contact-item b {
  color: var(--fin-text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.45;
  display: block;
}
.fin-contact-item a:hover { color: var(--fin-cream); text-decoration: underline; text-underline-offset: 3px; }

.fin-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.fin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  text-decoration: none;
  border: 1px solid var(--fin-rule);
  color: var(--fin-text);
  background: transparent;
  cursor: pointer;
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.fin-btn:hover { border-color: rgba(245, 232, 199, .5); background: rgba(245, 232, 199, .07); }
.fin-btn:active { transform: translateY(1px); }
.fin-btn-primary { background: var(--fin-cream); color: var(--fin-indigo-deep); border-color: var(--fin-cream); }
.fin-btn-primary:hover { background: #fff3d8; border-color: #fff3d8; color: var(--fin-indigo-deep); }

.fin-footnote {
  margin-top: var(--sp-6);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--parchment-dim);
  opacity: .8;
  max-width: 70ch;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .fin-hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .fin-plate { justify-self: start; }
  .fin-plate img { width: 132px; }
  .fin-spine { flex-direction: column; }
  .fin-spine::before { display: none; }
  .fin-spine-side + .fin-spine-side { border-top: 1px solid var(--fin-rule); }
  .fin-product { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fin-section { padding: var(--sp-6) 0; }
  .fin-contact { padding: var(--sp-6) var(--sp-4); }
  .fin-actions .fin-btn { width: 100%; justify-content: center; }
}

/* Motion is opt-in to the user's preference — the plate rotation and card
   lifts are the only movement here and both are safe to drop entirely. */
@media (prefers-reduced-motion: reduce) {
  .fin-cap:hover, .fin-course:hover { transform: none; }
}

/* Printing a company profile is a plausible thing to do — a prospective
   client saving the capability list, or Finotech handing it over in a
   meeting. css/polish.css already inverts the app to ink-on-paper; these
   rules stop the indigo wash and the logo plate fighting that. */
@media print {
  .about-fin::before { display: none !important; }
  .fin-plate { background: #fff !important; box-shadow: none !important; }
  .fin-section, .fin-cap, .fin-course, .fin-spine, .fin-contact, .fin-product, .fin-trust-item {
    background: #fff !important;
    border-color: #999 !important;
  }
  .fin-eyebrow, .fin-tier-price, .fin-cap-index { color: #111 !important; }
  .fin-actions { display: none !important; }
  .fin-course, .fin-cap { break-inside: avoid; }
}


/* --- enquiry composer ----------------------------------------------------
   Revealed by the "Email Finotech" button. See the comment above the markup
   in app.js for why this exists rather than a bare mailto: link. */
.fin-enquiry {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: rgba(22, 22, 43, .72);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius);
}
.fin-enquiry[hidden] { display: none; }
.fin-enquiry-step { margin-bottom: var(--sp-5); }
.fin-enquiry-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fin-dim);
  margin-bottom: var(--sp-3);
}
.fin-enquiry-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-topic {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fin-text);
  background: transparent;
  border: 1px solid var(--fin-rule);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.fin-topic:hover { border-color: rgba(245, 232, 199, .45); }
/* Selection is carried by border, background AND weight rather than colour
   alone, so it survives greyscale and colour-blindness — same reasoning as
   the balanced/unbalanced states elsewhere in the product. */
.fin-topic.is-active {
  background: rgba(245, 232, 199, .13);
  border-color: var(--fin-cream);
  color: var(--fin-cream);
  font-weight: 700;
}

.fin-enquiry-address { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-enquiry-address input {
  flex: 1;
  min-width: 210px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fin-text);
  background: var(--fin-surface);
  border: 1px solid var(--fin-rule);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.fin-enquiry-address input:focus-visible { outline: 2px solid var(--fin-cream); outline-offset: 2px; }

.fin-enquiry-note {
  margin: var(--sp-4) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fin-dim);
}
.fin-enquiry-note.is-ok { color: var(--fin-cream); }

@media (prefers-reduced-motion: reduce) {
  .fin-course:hover .fin-course-media img { transform: none; }
}
@media print {
  .fin-enquiry { display: none !important; }
  .fin-course-media, .fin-more-media { display: none !important; }
}

/* ===== ABOUT PANE =========================================================
   Company mission first, product second. The order is the argument: read the
   other way round it becomes a feature list with a company bolted on, and the
   reason the product exists disappears.

   Built from the vocabulary already on this screen — eyebrow, article cards,
   the owe/entrust rule colours — so it reads as another room in the same
   building rather than a landing page that wandered in. */

.about-pane{display:grid;gap:34px;padding-top:4px}

.about-hero h2{margin:8px 0 0;font:600 clamp(1.5rem,3.4vw,2.15rem)/1.15 var(--font-display);color:var(--parchment)}
.about-lead{margin:14px 0 0;max-width:62ch;font-size:.94rem;line-height:1.7;color:var(--parchment-dim)}
.about-lead-quiet{margin-top:10px;color:var(--entrust);font-weight:500}

/* The fog statement. One border on the owe side, because this is the debt the
   product is trying to settle with the learner. */
.about-fog{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--rule);border-left:3px solid var(--owe);border-radius:14px;background:var(--ledger-2)}
.about-fog-mark{flex:none;width:34px;height:34px;color:var(--entrust);opacity:.9}
.about-fog b{display:block;font:600 1.05rem var(--font-display);color:var(--parchment)}
.about-fog p{margin:8px 0 0;font-size:.9rem;line-height:1.7;color:var(--parchment-dim)}

/* The claim. Deliberately the largest type on the page — it is the sentence
   the whole product is accountable to. */
.about-claim{text-align:center;padding:30px 20px;border:1px solid var(--rule);border-radius:16px;background:linear-gradient(180deg,var(--ledger-2),transparent)}
.about-claim-lead{margin:0;font-size:.9rem;color:var(--parchment-dim)}
.about-claim-main{margin:6px 0 0;font:600 clamp(1.25rem,3vw,1.75rem)/1.3 var(--font-display);color:var(--parchment)}
.about-shift{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:20px;font-size:.86rem}
.about-shift-from{color:var(--parchment-dim);text-decoration:line-through;text-decoration-color:var(--owe);text-decoration-thickness:1px}
.about-shift-arrow{color:var(--entrust);font-weight:700}
.about-shift-to{color:var(--parchment);font-weight:600}

.about-section-head .eyebrow{margin-bottom:6px}
.about-section-head h3{margin:0;font:600 1.15rem var(--font-display);color:var(--parchment)}

.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px}
.about-grid article{padding:16px 18px;border:1px solid var(--rule);border-radius:13px;background:var(--ledger-2)}
.about-grid article b{display:block;font-size:.92rem;color:var(--parchment)}
.about-grid article p{margin:7px 0 0;font-size:.83rem;line-height:1.65;color:var(--parchment-dim)}

/* The journey. A numbered run rather than a diagram: nine steps drawn as a
   flow chart becomes decoration at this width, and the order is the content. */
.about-journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px;counter-reset:none}
.about-journey li{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--rule);border-radius:11px;background:var(--ledger-2)}
.about-journey li span{font:700 .62rem var(--font-mono);color:var(--entrust);letter-spacing:.06em}
.about-journey li b{font-size:.84rem;font-weight:500;color:var(--parchment)}
/* "Make mistakes" and "Understand the mistake" are the point, not the price. */
.about-journey li:nth-child(5),.about-journey li:nth-child(6){border-color:rgba(217,164,65,.35)}

.about-vision{padding:22px;border:1px solid var(--rule);border-radius:14px;background:var(--ledger-2)}
.about-vision p{margin:8px 0 0;max-width:64ch;font-size:.92rem;line-height:1.75;color:var(--parchment-dim)}

.about-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.about-team article{padding:16px 18px;border:1px solid var(--rule);border-radius:13px;background:var(--ledger-2)}
.about-team article b{display:block;font-size:.9rem;color:var(--parchment)}
.about-team article span{display:block;margin-top:5px;font:600 .68rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--parchment-dim)}

.about-site{display:inline-block;font-size:.88rem;color:var(--entrust);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s var(--ease)}
.about-site:hover,.about-site:focus-visible{border-bottom-color:var(--entrust)}

.about-close{text-align:center;padding:26px 18px;border-top:1px solid var(--rule)}
.about-close p{margin:0;font-size:.92rem;color:var(--parchment-dim)}
.about-close b{display:block;margin-top:10px;font:600 clamp(1.05rem,2.6vw,1.4rem) var(--font-display);color:var(--parchment)}

.about-copyright{margin:0;text-align:center;font-size:.74rem;color:var(--parchment-dim);opacity:.75}

@media (max-width:620px){
  .about-fog{flex-direction:column;gap:12px}
  .about-shift{gap:8px}
  .about-shift-arrow{transform:rotate(90deg)}
}