/* ============================================================
   About page. Loaded after quill.css, motion.css and pages.css.
   A company page: the same chrome, type and rhythm as the product
   pages, with the homepage's brand moments (dawn sky, a scroll-lit
   serif statement, the morning plate, the light record wall) carrying
   the story and the team.
   ============================================================ */

.hero--page .lede strong { font-weight: 600; color: var(--ink-900); }

/* ---- About us: the statement, then the institutions as big-type rows ----
   The section is a .statement (so its first paragraph lights up as you read)
   with the normal section padding. Every other paragraph in it is body text. */
.about-story .supported { margin-top: 80px; }
.about-story .supported p { font-family: var(--font); font-weight: 450; letter-spacing: 0; max-width: none; }
.about-story .supported-intro { font-size: 1.125rem; line-height: 1.55; color: var(--ink-700); margin-bottom: 28px; }
.credentials .problem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; padding: 26px 0; }
.credentials .problem h3 { text-wrap: balance; }
.about-story .credentials .problem p { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-600); }
.about-story .supported-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; margin-top: 56px; }
.about-story .supported-after p { grid-column: 2; font-size: 1.125rem; line-height: 1.55; color: var(--ink-700); }
@media (max-width: 900px) {
    .about-story .supported { margin-top: 64px; }
    .credentials .problem { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 22px 0; }
    .credentials .problem h3, .about-story .credentials .problem p { grid-column: 1; }
    .about-story .supported-after { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
    .about-story .supported-after p { grid-column: 1; }
}

/* ---- Team: each person on the morning plate, bio beside them ----
   The portrait stands on the plate's lower edge, as the product console
   does on the homepage, and rises into place (motion.css: .person img). */
#team .section-head { margin-bottom: 72px; }
.members { display: grid; gap: 96px; }
.member { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.member-plate { display: flex; justify-content: center; align-items: flex-end; padding: 72px 32px 0; background: #EFE9F4 url(art/plate.jpg) center / cover no-repeat; border-radius: var(--r-modal); overflow: hidden; }
.person.member img { width: 300px; max-width: 100%; aspect-ratio: 324 / 400; height: auto; border-radius: var(--r-card) var(--r-card) 0 0; filter: saturate(0.9); box-shadow: 0 30px 80px rgba(46, 36, 80, 0.16); }
.member-body { padding-top: 4px; }
.person.member h3 { margin-top: 0; font-family: var(--serif); font-weight: 450; font-size: clamp(1.5rem, 1.95vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); }
.member h3 a { display: inline-flex; align-items: center; gap: 12px; transition: color .15s ease; }
.member h3 a:hover { color: var(--lavender-700); }
.member .li-mark { width: 16px; height: 16px; flex: none; color: var(--ink-400); transition: color .15s ease; }
.member h3 a:hover .li-mark { color: var(--lavender-600); }
.member-role { margin-top: 6px; font-size: 0.9375rem; font-weight: 500; color: var(--lavender-700); }
.person.member .member-rows { margin-top: 28px; display: block; border-top: 1px solid var(--line); }
.person.member .member-rows li { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.55; color: var(--ink-700); }
.member-rows strong { font-weight: 600; color: var(--ink-900); }
.member-rows a { color: var(--lavender-700); border-bottom: 1px solid var(--lavender-200); transition: border-color .15s ease; }
.member-rows a:hover { border-color: var(--lavender-700); }
@media (max-width: 900px) {
    .members { gap: 72px; }
    .member { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .member-plate { padding-top: 48px; }
    .person.member img { width: 240px; }
}

/* ---- How we operate: the .why layout, lede above the list ---- */
.operate-lede { margin-bottom: 40px; }

/* ---- Security: the homepage's columns, with the live page's practices
   as a quiet list under the lede ---- */
.sec-practices { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-600); }
@media (max-width: 480px) { .sec-practices { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Compact About (v18): the "previously supported" section fits one
   screen, and the team portraits are small and sharp beside each name.
   ============================================================ */
.about-story.section { padding: 112px 0 104px; }
.about-story > .container > p { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.3; max-width: 34ch; }
.about-story .supported { margin-top: 56px; }
.about-story .supported-intro { font-size: 0.8125rem; font-weight: 500; color: var(--lavender-600); margin-bottom: 16px; }
.problems.credentials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; border-top: 0; }
.credentials .problem { display: block; padding: 20px 0 0; border-top: 1px solid var(--ink-900); border-bottom: 0; }
.credentials .problem h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.about-story .credentials .problem p { margin-top: 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-600); }
.about-story .supported-after { display: block; margin-top: 48px; }
.about-story .supported-after p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-700); max-width: 64ch; }
@media (max-width: 1000px) { .problems.credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } }
@media (max-width: 560px) { .problems.credentials { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Team: two people side by side, a small portrait beside each name */
.members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.member { display: block; }
.member-head { display: flex; align-items: center; gap: 20px; }
.member-photo { flex: none; display: block; width: 104px; }
.person.member .member-photo img { width: 104px; height: 128px; aspect-ratio: auto; object-fit: cover; border-radius: var(--r-card); box-shadow: none; filter: saturate(0.9); clip-path: none; }
.person.member .member-rows { margin-top: 24px; }
.person.member .member-rows li { font-size: 0.9375rem; }
@media (max-width: 900px) { .members { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

/* ---- "Previously supported", refined: two by two with room to breathe.
   One fine rule per entry (it draws in on reveal), names and descriptions
   aligned across each row, and the closing line set a little apart. ---- */
.about-story .supported { margin-top: 72px; }
.about-story .supported-intro { margin-bottom: 8px; }
.problems.credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 96px; row-gap: 0; }
.credentials .problem { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 2; row-gap: 10px; padding: 28px 0 32px; border-top: 0; }
.credentials .problem::after { top: 0; bottom: auto; background: var(--ink-200); }
html.js .credentials .problem { border-bottom-color: transparent; }
.credentials .problem h3 { font-size: 1.375rem; line-height: 1.25; }
.about-story .credentials .problem p { margin-top: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-600); max-width: 44ch; }
html.js .problem.is-shown:hover h3 { transform: none; }
.about-story .supported-after { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ink-200); }
.about-story .supported-after p { font-size: 1.0625rem; max-width: 60ch; color: var(--ink-700); }
@media (max-width: 760px) {
    .problems.credentials { grid-template-columns: minmax(0, 1fr); }
    .credentials .problem { padding: 22px 0 24px; }
}

/* ============================================================
   About, calmer (v18): structure from spacing and shape, not rules.
   ============================================================ */
/* Previously supported: a 2x2 grid of names and descriptions, no lines */
.problems.credentials { row-gap: 40px; margin-top: 24px; }
.credentials .problem { padding: 0; }
.credentials .problem::after { display: none; }
.about-story .supported-intro { margin-bottom: 0; }
.about-story .supported-after { margin-top: 64px; padding-top: 0; border-top: 0; }

/* Team: each person on a white card; bio lines are spaced, not ruled */
.member { background: #fff; border-radius: var(--r-modal); padding: 36px 36px 32px; box-shadow: 0 1px 2px rgba(30, 35, 48, 0.04), 0 18px 40px rgba(46, 36, 80, 0.06); }
.person.member .member-rows { margin-top: 28px; border-top: 0; display: grid; gap: 14px; }
.person.member .member-rows li { padding: 0; border: 0; }
.members { gap: 24px; }

/* How we operate: heading and intro on one row, two principles below */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.principles h3 { font-family: var(--serif); font-weight: 450; font-size: clamp(1.5rem, 1.95vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-900); }
.principles p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-600); max-width: 48ch; }

@media (max-width: 900px) {
    .member { padding: 28px 24px 24px; }
    .principles { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Security & compliance: one two-column grid. Heading on the left; intro,
   the three certifications and the actions share the right column's edge. */
.about-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.about-certs { display: grid; gap: 28px; margin-top: 44px; }
.about-certs h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.about-certs p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink-600); }
.about-sec .sec-actions { margin-top: 44px; }
@media (max-width: 900px) { .about-sec { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Team, skimmable: the companies read first, the full bio sits quieter */
.member-orgs { margin-top: 10px; font-family: var(--serif); font-weight: 450; font-size: 1.125rem; letter-spacing: -0.005em; color: var(--ink-900); }
.member-orgs i { font-style: normal; color: var(--lavender-400); margin: 0 4px; }
.person.member .member-rows { margin-top: 24px; gap: 10px; }
.person.member .member-rows li { font-size: 0.875rem; line-height: 1.55; color: var(--ink-500); }
.member-rows strong { font-weight: 600; color: var(--ink-800); }

/* Team, back to the ruled version (Madhura preferred it): no cards, a line
   between each bio sentence, normal-strength text. Only the LinkedIn mark
   reacts on hover; the name stays ink. */
.member { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.members { gap: 64px; }
.person.member .member-rows { margin-top: 24px; display: block; border-top: 1px solid var(--line); }
.person.member .member-rows li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-700); }
.member-rows strong { font-weight: 600; color: var(--ink-900); }
.member h3 a:hover { color: var(--ink-900); }
.member h3 a:hover .li-mark { color: var(--lavender-600); }
@media (max-width: 900px) { .member { padding: 0; } }

/* Security: the standard section head (wider heading column so the heading
   sits on two lines), then the three certifications in a row, then actions */
.sec-head--wide { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 72px; }
.cert-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.cert-row h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.cert-row p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--ink-600); max-width: 36ch; }
#security .sec-actions { margin-top: 48px; }
@media (max-width: 900px) { .sec-head--wide { grid-template-columns: 1fr; gap: 20px; } .cert-row { grid-template-columns: 1fr; gap: 28px; } }