.about-page { background: var(--color-background); }
.about-page main { overflow: clip; }
.about-page main a { text-underline-offset: .22em; }
.about-hero { position: relative; border-bottom: 1px solid var(--color-border); background: radial-gradient(ellipse at 83% 22%, rgb(52 214 255 / .09), transparent 38rem), var(--color-background); }
.about-hero > .container { padding-block: var(--space-6) clamp(var(--space-20), 10vw, 9rem); }
.about-breadcrumb ol { margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-3); list-style: none; color: var(--color-text-secondary); font-size: var(--text-sm); }
.about-breadcrumb li + li::before { content: '/'; margin-inline-end: var(--space-3); color: var(--color-dark-text-secondary); }
.about-breadcrumb a { color: var(--color-cyan); text-decoration: none; }
.about-breadcrumb a:hover { color: var(--color-mint); }
.about-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); gap: clamp(var(--space-12), 7vw, var(--space-24)); align-items: end; margin-top: clamp(var(--space-16), 8vw, var(--space-30)); }
.about-hero h1 { max-width: 16ch; font-size: clamp(2.8rem, 5.7vw, 5.6rem); line-height: 1.06; letter-spacing: -.035em; }
.about-hero__layout > div > p { max-width: 56ch; margin-top: var(--space-8); color: var(--color-text-secondary); font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); line-height: 1.6; }
.about-button { min-height: 3.25rem; width: max-content; max-width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-3) var(--space-6); border: 1px solid var(--color-mint); border-radius: var(--radius-md); background: var(--brand-gradient); color: var(--color-background); font-weight: var(--font-weight-semibold); text-decoration: none; }
.about-button:hover { color: var(--color-background); transform: translateY(-2px); }
.about-hero .about-button { margin-top: var(--space-8); }
.about-hero__note { padding-block: var(--space-6); border-top: 1px solid var(--color-mint); }
.about-hero__note strong { color: var(--color-mint); font-family: var(--font-display); font-size: var(--text-sm); }
.about-hero__note p { margin-block: var(--space-3) var(--space-6); color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.5; }
.about-hero__note a { color: var(--color-cyan); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.about-section { padding-block: clamp(var(--space-16), 7vw, var(--space-30)); scroll-margin-top: 5rem; }
.about-section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.about-section--limits { background: linear-gradient(125deg, rgb(255 216 77 / .055), transparent 55%), var(--color-background); border-block: 1px solid var(--color-border); }
.about-section--trust { background: var(--color-surface); border-top: 1px solid var(--color-border); }
.about-reading-layout { display: grid; grid-template-columns: minmax(13rem, 22rem) minmax(0, 44rem); justify-content: space-between; gap: clamp(var(--space-8), 7vw, var(--space-20)); align-items: start; }
.about-reading-layout > h2 { font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.16; }
.about-copy { min-width: 0; color: var(--color-text-secondary); font-size: var(--text-lg); line-height: 1.7; }
.about-copy > * + * { margin-top: var(--space-6); }
.about-copy a { color: var(--color-cyan); }
.about-copy a:hover { color: var(--color-mint); }
.about-copy .about-lead { color: var(--color-text); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.5; }
.about-problem-list { padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.about-problem-list li { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--space-6); max-width: none; padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.about-problem-list strong { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-base); line-height: 1.4; }
.about-problem-list span { font-size: var(--text-base); line-height: 1.6; }
.about-section-intro { display: flex; justify-content: space-between; gap: var(--space-12); align-items: end; margin-bottom: var(--space-12); }
.about-section-intro h2 { font-size: clamp(2rem, 3.2vw, 3.25rem); }
.about-section-intro p { max-width: 45ch; color: var(--color-text-secondary); font-size: var(--text-lg); }
.about-tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.about-tool-list a { position: relative; min-height: 8.5rem; display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-6); align-content: center; padding: var(--space-6); border-bottom: 1px solid var(--color-border); text-decoration: none; }
.about-tool-list a:nth-child(odd) { border-right: 1px solid var(--color-border); padding-left: 0; }
.about-tool-list a:nth-child(even) { padding-right: 0; }
.about-tool-list a:hover { background: rgb(52 214 255 / .035); }
.about-tool-list h3 { font-size: var(--text-xl); }
.about-tool-list p { grid-column: 1; margin-top: var(--space-2); color: var(--color-text-secondary); font-size: var(--text-sm); }
.about-tool-list a > span { grid-column: 2; grid-row: 1 / span 2; color: var(--color-cyan); font-size: var(--text-xl); }
.about-principles { border-top: 1px solid var(--color-border); }
.about-principles > div { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.about-principles dt { color: var(--color-text); font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-weight-bold); line-height: 1.4; }
.about-principles dd { margin: 0; font-size: var(--text-base); line-height: 1.6; }
.about-plain-list { padding-left: 1.3rem; }
.about-plain-list li { padding-left: var(--space-2); }
.about-plain-list li + li { margin-top: var(--space-3); }
.about-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.about-trust-grid a { position: relative; min-height: 11rem; display: flex; flex-direction: column; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated); text-decoration: none; }
.about-trust-grid a:hover { border-color: var(--color-cyan); transform: translateY(-2px); }
.about-trust-grid h3 { max-width: calc(100% - 2rem); font-size: var(--text-lg); }
.about-trust-grid p { margin-top: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.about-trust-grid a > span { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--color-cyan); }
.about-final { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); border-top: 1px solid var(--color-border); background: radial-gradient(ellipse at 85% 30%, rgb(57 255 182 / .1), transparent 40rem), var(--color-background); }
.about-final__inner { display: flex; align-items: end; justify-content: space-between; gap: var(--space-12); }
.about-final h2 { font-size: clamp(2.3rem, 4vw, 4rem); }
.about-final p { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-lg); }
.about-final__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.about-final__actions > a:last-child { color: var(--color-cyan); font-size: var(--text-sm); }
@media (max-width: 62rem) { .about-reading-layout { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); } .about-hero__layout { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--space-8); } }
@media (max-width: 48rem) { .about-hero__layout, .about-reading-layout { grid-template-columns: 1fr; } .about-hero__layout { align-items: start; } .about-hero__note { max-width: 32rem; } .about-section-intro, .about-final__inner { align-items: flex-start; flex-direction: column; gap: var(--space-6); } .about-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .about-hero > .container { padding-bottom: var(--space-16); } .about-hero__layout { margin-top: var(--space-12); } .about-hero h1 { font-size: clamp(2.25rem, 9vw, 3.2rem); } .about-section { padding-block: var(--space-16); } .about-problem-list li, .about-principles > div { grid-template-columns: 1fr; gap: var(--space-2); } .about-tool-list, .about-trust-grid { grid-template-columns: 1fr; } .about-tool-list a:nth-child(odd) { border-right: 0; } .about-tool-list a, .about-tool-list a:nth-child(odd), .about-tool-list a:nth-child(even) { padding-inline: var(--space-2); } .about-trust-grid a { min-height: 9rem; } }
@media (prefers-reduced-motion: reduce) { .about-button:hover, .about-trust-grid a:hover { transform: none; } }