/* PAGE: ABOUT (/about) — step 11.10. Source: design/about-preview.html (<style>), unchanged except the founder photo:
   it uses the shared .fv-photo frame (main.css: muted brand style + dashed frame if the file is missing),
   so the preview's img rule became .about-founder__fig .fv-photo (same 640/901 ratio and radius). */

.about-label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-muted)}
[dir=rtl] .about-label{letter-spacing:0;font-size:13px}

/* 1 hero */
.about-hero{padding-block:104px 88px}
.about-hero .fv-h1{margin-block:24px 28px;max-width:15ch}
[dir=rtl] .about-hero .fv-h1{max-width:20ch}
.about-hero .fv-lead{max-width:58ch}

/* 2 story timeline */
.about-story__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px;align-items:start}
.about-story__head{position:sticky;top:calc(var(--fv-header-h) + 48px)}
.about-story .fv-h2{margin-block:22px 20px;max-width:12ch}
[dir=rtl] .about-story .fv-h2{max-width:18ch}
.about-story__list{list-style:none;position:relative}
.about-story__list::before{content:"";position:absolute;inset-inline-start:21px;top:22px;bottom:64px;width:1.5px;background:var(--fv-green)}
.about-ch{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:28px;padding-bottom:48px}
.about-ch:last-child{padding-bottom:0}
.about-ch__node{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:var(--fv-paper);border:1.5px solid var(--fv-green);display:grid;place-items:center;color:var(--fv-green);font-family:var(--fv-font-display);font-size:15px}
[dir=rtl] .about-ch__node{font-family:var(--fv-font-fa)}
.about-ch--key .about-ch__node{background:var(--fv-green);color:var(--fv-white)}
.about-ch--next .about-ch__node{border-style:dashed;border-color:var(--fv-muted);color:var(--fv-muted)}
.about-ch__body{padding-top:6px}
.about-ch__when{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fv-green);margin-bottom:8px}
[dir=rtl] .about-ch__when{letter-spacing:0;font-size:13px}
.about-ch--next .about-ch__when{color:var(--fv-muted)}
.about-ch .fv-h3{margin-bottom:12px}
.about-ch p{max-width:58ch}
.about-ch--key .about-ch__body{background:var(--fv-white);border:1px solid var(--fv-line);border-top:3px solid var(--fv-green);padding:24px 28px 28px;margin-top:-6px}

/* 3 name */
.about-name__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px;align-items:start}
.about-name .fv-h2{margin-top:22px}
.about-name__defs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--fv-ink)}
.about-def{padding:28px 32px 8px 0}
.about-def + .about-def{padding-inline:32px 0;border-inline-start:1px solid var(--fv-line)}
[dir=rtl] .about-def{padding:28px 0 8px 32px}
[dir=rtl] .about-def + .about-def{padding-inline:32px 0}
.about-def__word{font-family:var(--fv-font-display);font-size:34px;font-weight:500;line-height:1.1;margin-bottom:6px}
.about-def .about-label{margin-bottom:14px}
.about-def p{color:var(--fv-muted)}

/* 4 founder */
.about-founder__grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:88px;align-items:center}
.about-founder__fig{margin:0}
.about-founder__fig .fv-photo{aspect-ratio:640/901;border-radius:2px}
.about-founder__fig figcaption{margin-top:16px;font-size:14px;color:var(--fv-on-ink-muted)}
.about-founder__fig figcaption b{display:block;color:var(--fv-on-ink);font-size:16px;font-weight:600}
.about-founder .fv-h2{margin-block:22px 24px;max-width:14ch}
[dir=rtl] .about-founder .fv-h2{max-width:20ch}
.about-founder p{color:var(--fv-on-ink-muted);max-width:56ch}
.about-founder p + p{margin-top:16px}

/* 5 company */
.about-co{scroll-margin-top:calc(var(--fv-header-h) + 16px)}
.about-co__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.about-co .fv-h2{margin-block:22px 20px;max-width:14ch}
.about-co__actions{margin-top:32px}
.about-co__card{padding:8px 36px}
.about-co__dl{display:grid;grid-template-columns:200px minmax(0,1fr)}
.about-co__dl dt,.about-co__dl dd{padding-block:18px;border-bottom:1px solid var(--fv-line)}
.about-co__dl dt{font-size:13.5px;color:var(--fv-muted);padding-inline-end:16px}
.about-co__dl dd{font-size:16px;font-weight:500;overflow-wrap:anywhere}
.about-co__dl dt:last-of-type,.about-co__dl dd:last-of-type{border-bottom:0}
.about-co__dl small{display:block;font-size:13px;font-weight:400;color:var(--fv-muted);margin-top:2px}
.about-co__mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* 6 cta */
.about-cta__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;align-items:end}
.about-cta .fv-h2{margin-block:0 20px;max-width:16ch}
[dir=rtl] .about-cta .fv-h2{max-width:22ch}
.about-cta p{color:var(--fv-on-ink-muted);max-width:52ch}
.about-cta__act{justify-self:end}

@media (max-width:1080px){
  .about-story__grid,.about-name__grid,.about-founder__grid,.about-co__grid,.about-cta__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .about-story__head{position:static}
  .about-founder__fig{max-width:360px}
  .about-cta__act{justify-self:start}
}
@media (max-width:600px){
  .about-hero{padding-block:56px 48px}
  .about-ch{grid-template-columns:36px minmax(0,1fr);column-gap:18px}
  .about-ch__node{width:36px;height:36px;font-size:13px}
  .about-story__list::before{inset-inline-start:17px}
  .about-ch--key .about-ch__body{padding:20px}
  .about-name__defs{grid-template-columns:minmax(0,1fr)}
  .about-def,.about-def + .about-def,[dir=rtl] .about-def,[dir=rtl] .about-def + .about-def{padding:24px 0 16px;border-inline-start:0}
  .about-def + .about-def{border-top:1px solid var(--fv-line)}
  .about-co__card{padding:4px 20px}
  .about-co__dl{grid-template-columns:minmax(0,1fr)}
  .about-co__dl dt{border-bottom:0;padding-bottom:0}
  .about-co__dl dd{padding-top:4px}
  .about-cta__act .fv-btn,.about-co__actions .fv-btn{width:100%}
}