/* About is a presentation-only view. The shared header and existing landscape remain intact. */
.about-page { width: min(1380px, calc(100% - 56px)); padding-bottom: 72px; }
.about-hero { position: relative; display: flex; min-height: 440px; align-items: flex-end; overflow: hidden; border: 1px solid rgba(219,190,137,.3); border-top: 0; border-radius: 0 0 18px 18px; background: #061622 url("./assets/almanac24-hero-autumn.png") center 51% / cover no-repeat; box-shadow: var(--shadow); }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(2,10,18,.9) 0%,rgba(2,10,18,.74) 31%,rgba(2,10,18,.19) 72%),linear-gradient(0deg,rgba(2,10,18,.82),transparent 45%); }
.about-hero-copy { position: relative; z-index: 1; max-width: 760px; padding: 66px 66px 62px; }
.about-eyebrow { margin: 0 0 13px; color: var(--gold); font-size: 11px; font-weight: 650; letter-spacing: .22em; }
.about-hero h1 { margin: 0; color: var(--paper); font: 500 clamp(54px,5.8vw,78px)/1.03 var(--serif); letter-spacing: -.055em; text-wrap: balance; }
.about-hero h2 { margin: 22px 0 0; color: #f5e8ce; font: 500 clamp(20px,2vw,26px)/1.3 var(--serif); }
.about-hero-copy > p:last-child { max-width: 580px; margin: 13px 0 0; color: #d2ddda; font-size: 15px; line-height: 1.65; }
.about-hero-seal { position: absolute; right: 38px; bottom: 35px; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(230,190,123,.65); border-radius: 50%; background: rgba(4,17,25,.5); color: var(--gold); font: 500 23px var(--serif); }
.about-body { display: grid; gap: 22px; max-width: 1180px; margin: 31px auto 0; }
.about-panel { border: 1px solid rgba(180,205,200,.18); border-radius: 18px; background: linear-gradient(145deg,rgba(9,32,43,.86),rgba(4,17,26,.91)); box-shadow: 0 16px 44px rgba(0,0,0,.17); }
.about-section-number { color: var(--gold); font: 500 14px var(--serif); letter-spacing: .08em; }
.about-page h2 { margin: 0; color: var(--paper); font: 500 clamp(29px,3vw,37px)/1.15 var(--serif); letter-spacing: -.035em; }
.about-page p { text-wrap: pretty; }
.about-intro { position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr) 130px; gap: 18px; align-items: start; min-height: 197px; padding: 36px 40px; }
.about-intro p, .about-foundations p { max-width: 810px; margin: 13px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.about-intro-mark { align-self: center; justify-self: center; color: rgba(227,190,126,.32); font: 500 42px/1.2 var(--serif); letter-spacing: .2em; text-align: center; writing-mode: vertical-rl; }
.about-process { padding: 21px 0 0; }
.about-section-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
.about-section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.about-stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.about-stage { position: relative; min-height: 205px; padding: 29px 26px; border: 1px solid rgba(205,193,167,.22); border-radius: 16px; background: linear-gradient(160deg,rgba(11,37,48,.88),rgba(5,19,29,.89)); }
.about-stage:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -20px; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(229,191,125,.39); border-radius: 50%; background: #0a1e29; color: var(--gold); font: 15px var(--serif); transform: translateY(-50%); }
.about-stage-index { display: block; width: 36px; padding-bottom: 10px; border-bottom: 1px solid rgba(226,186,121,.45); color: var(--gold); font: 500 17px var(--serif); }
.about-stage h3 { margin: 17px 0 8px; color: var(--paper); font: 500 24px/1.2 var(--serif); }
.about-stage p { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.about-ai-note { display: flex; align-items: center; gap: 11px; margin: 18px 0 0; padding: 14px 20px; border-left: 2px solid rgba(101,208,193,.7); border-radius: 0 10px 10px 0; background: rgba(32,91,87,.15); color: var(--jade-soft); font-size: 13px; }
.about-ai-note span { color: var(--jade); }
.about-explore { padding: 35px 39px 31px; }
.about-use-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.about-use-cases button { display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 70px; padding: 11px 14px; border: 1px solid rgba(193,216,209,.18); border-radius: 12px; background: rgba(4,19,29,.61); text-align: left; transition: border-color .18s var(--ease),background .18s var(--ease); }
.about-use-cases button:hover { border-color: rgba(113,209,193,.54); background: rgba(18,61,63,.47); }
.about-use-icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(109,211,195,.37); border-radius: 50%; color: var(--jade); }
.about-use-icon svg { width: 18px; height: 18px; }
.about-use-cases strong { flex: 1; font-size: 14px; font-weight: 550; }
.about-use-cases .chevron { width: 16px; color: var(--gold); }
.about-ctas { display: flex; justify-content: flex-end; gap: 11px; margin-top: 24px; }
.about-cta { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; border: 1px solid rgba(230,190,123,.56); border-radius: 999px; font-size: 13px; font-weight: 600; }
.about-cta.secondary { background: rgba(6,23,33,.76); color: var(--paper); }
.about-cta.primary { background: var(--gold); color: #132026; }
.about-cta .chevron { width: 17px; }
.about-bottom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.about-foundations { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 18px; padding: 31px 33px; }
.about-foundations p { font-size: 13px; }
.about-note { padding: 31px 33px; border: 1px solid rgba(229,190,124,.24); border-radius: 18px; background: rgba(47,40,33,.25); }
.about-note h2 { color: var(--gold); font-size: 25px; }
.about-note p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) {
  .about-hero { min-height: 410px; }.about-hero-copy { padding: 55px 43px; }
  .about-body { margin-top: 22px; }.about-intro { grid-template-columns: 32px minmax(0,1fr) 70px; }
  .about-stages { gap: 10px; }.about-stage { padding: 24px 19px; }.about-stage h3 { font-size: 21px; }
}
@media (max-width: 640px) {
  .mobile-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .today-v4 { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .about-page { width: 100%; padding: 0 14px calc(102px + env(safe-area-inset-bottom)); }
  .about-hero { min-height: 420px; margin: 0 -14px; border: 0; border-radius: 0 0 15px 15px; background-position: 61% center; }
  .about-hero::before { background: linear-gradient(0deg,rgba(2,10,18,.94),rgba(2,10,18,.4) 67%,rgba(2,10,18,.4)),linear-gradient(90deg,rgba(2,10,18,.38),transparent 80%); }
  .about-hero-copy { padding: 122px 23px 31px; }.about-eyebrow { font-size: 9px; }
  .about-hero h1 { font-size: clamp(43px,11vw,54px); }.about-hero h2 { margin-top: 15px; font-size: 21px; }.about-hero-copy > p:last-child { font-size: 13px; }
  .about-hero-seal { right: 18px; bottom: 20px; width: 31px; height: 31px; font-size: 16px; opacity: .7; }
  .about-body { gap: 18px; margin-top: 17px; }.about-page h2 { font-size: 29px; }
  .about-intro { grid-template-columns: 25px minmax(0,1fr); gap: 12px; min-height: 0; padding: 25px 18px; }
  .about-intro p { font-size: 13px; }.about-intro-mark { display: none; }
  .about-process { padding-top: 4px; }.about-section-heading { gap: 12px; margin-bottom: 14px; }.about-section-heading p { font-size: 12px; }
  .about-stages { grid-template-columns: 1fr; gap: 13px; }.about-stage { min-height: 0; padding: 20px 20px 21px; }.about-stage:not(:last-child)::after { top: auto; right: 50%; bottom: -20px; transform: translateX(50%) rotate(90deg); }
  .about-stage h3 { margin-top: 11px; font-size: 22px; }.about-stage p { font-size: 12px; }.about-ai-note { font-size: 12px; }
  .about-explore { padding: 24px 18px; }.about-use-cases { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .about-use-cases button { min-height: 62px; gap: 8px; padding: 8px; }.about-use-icon { flex-basis: 29px; width: 29px; height: 29px; }.about-use-icon svg { width: 15px; height: 15px; }.about-use-cases strong { font-size: 11px; }.about-use-cases .chevron { width: 12px; }
  .about-ctas { justify-content: stretch; gap: 8px; }.about-cta { flex: 1; min-width: 0; min-height: 44px; gap: 6px; padding: 0 9px; font-size: 11px; }
  .about-bottom { grid-template-columns: 1fr; gap: 12px; }.about-foundations { grid-template-columns: 25px minmax(0,1fr); gap: 12px; padding: 24px 18px; }.about-foundations p { font-size: 12px; }.about-note { padding: 22px 20px; }.about-note h2 { font-size: 23px; }.about-note p { font-size: 12px; }
}