/* story.css: page-scoped styles for the story pages (timeline, compare, see-it-working). CHG-0033 lane 3, v5.76.
   Holds the one approved new component (chart-exp), the About-page founder block, and small layout fixes
   for existing components. Uses only existing site tokens. */

/* Existing components, small fixes */
.ag-section-head p + p{margin-top:.8rem}
.tl2-row > .tl2-txt:only-child{grid-column:1/-1}
.tl2-txt > .tl2-badge:first-child{margin:0 0 .5rem!important}
.tl2-txt h3 .fn{margin-left:.2rem;font-size:.7rem;vertical-align:super;color:var(--primary)}
.tl2-diff a{color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.tl2 + .px-head{margin-top:2.5rem}
.cmp-src a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.comparison-table td .fn{margin-left:.2rem;font-size:.7rem;vertical-align:super;color:var(--primary)}
.ag-panel h3{font-size:1.1rem;color:var(--dark);margin-bottom:.8rem}
.tl2-row > .px-art{width:100%;max-width:300px;justify-self:end}
@media(max-width:768px){.tl2-row{grid-template-columns:1fr}.tl2-row > .px-art{justify-self:start}}

/* Compare page: the shared comparison table with two columns, Ai1 in the last column */
#compare-grid .comparison-table{min-width:640px}
#compare-grid .comparison-table thead th:nth-child(2){background:var(--dark)}
#compare-grid .comparison-table thead th:nth-child(3){background:var(--primary)}
#compare-grid .comparison-table thead th:nth-child(n+2){width:42%}
#compare-grid .comparison-table td:nth-of-type(1){border-left:0;border-right:0;font-weight:400;color:var(--grey-300)}
#compare-grid .comparison-table td:nth-of-type(2){border-left:2px solid var(--primary);border-right:2px solid var(--primary)}
#compare-grid .comparison-table tbody td,#compare-grid .comparison-table tbody th{background:transparent}
#compare-grid .comparison-table tbody tr:last-child td:nth-of-type(1){border-bottom:0}
#compare-grid .comparison-table tbody tr:last-child td:nth-of-type(2){border-bottom:2px solid var(--primary)}
@media(max-width:768px){
  #compare-grid .comparison-table-wrap{overflow:visible}
  #compare-grid .comparison-table{min-width:0;display:block;font-size:.85rem}
  #compare-grid .comparison-table thead,#compare-grid .comparison-table tbody{display:block}
  #compare-grid .comparison-table tr{display:grid;grid-template-columns:1fr 1fr}
  #compare-grid .comparison-table thead th:first-child{display:none}
  #compare-grid .comparison-table thead th:nth-child(n+2){width:auto;padding:.6rem .75rem}
  #compare-grid .comparison-table tbody th{grid-column:1/-1;position:static;min-width:0;padding:.7rem .75rem .1rem;border-bottom:0}
  #compare-grid .comparison-table td{padding:.4rem .75rem .7rem}
  #compare-grid .comparison-table tbody th{background:var(--white)}
}

/* chart-exp: the head-start chart (approved new component) */
.chart-exp{margin:0;padding:1.5rem;border-radius:var(--radius-xl);background:var(--white);border:1px solid var(--grey-200);box-shadow:var(--shadow-card)}
.chart-exp-key{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0 0 1rem;padding:0;list-style:none;color:var(--dark);font:600 .9rem/1.4 var(--font-heading)}
.chart-exp-key li{display:inline-flex;align-items:center;gap:.5rem}
.chart-exp-key li::before{content:"";display:inline-block;width:28px;height:0;border-top:4px solid var(--primary)}
.chart-exp-key .chart-exp-key-b::before{border-top:4px dashed var(--dark)}
.chart-exp-plot{position:relative;max-width:780px;margin:0 auto}
.chart-exp-svg{display:block;width:100%;height:auto;overflow:visible}
.chart-exp-grid{stroke:var(--grey-200);stroke-width:1}
.chart-exp-tick{fill:var(--grey-300);font:600 14px var(--font-heading)}
.chart-exp-gap{fill:rgba(51,97,255,.12);stroke:none}
.chart-exp-a{fill:none;stroke:var(--primary);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.chart-exp-b{fill:none;stroke:var(--dark);stroke-width:3;stroke-dasharray:9 7;stroke-linejoin:round}
.chart-exp-mark,.chart-exp-gapline{stroke:var(--dark);stroke-width:2}
.chart-exp-gapline{stroke-dasharray:3 4}
.chart-exp-note{fill:var(--dark);font:700 14px var(--font-heading)}
.chart-exp-dot-a{fill:var(--primary);stroke:var(--white);stroke-width:2}
.chart-exp-dot-b{fill:var(--dark);stroke:var(--white);stroke-width:2}
.chart-exp-end{font:800 16px var(--font-heading)}
.chart-exp-end-a{fill:var(--primary)}
.chart-exp-end-b{fill:var(--dark)}
.chart-exp-axis{margin:.4rem 0 0;text-align:center;color:var(--grey-300);font:600 .85rem/1.4 var(--font-heading)}
.chart-exp figcaption{margin:1rem 0 0;color:var(--dark);font-size:.95rem;line-height:1.6}
.chart-exp-data{margin:1rem 0 0}
.chart-exp-data summary{cursor:pointer;color:var(--primary);font:600 .9rem/1.6 var(--font-heading)}
.chart-exp-data summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.chart-exp-table{width:100%;margin:.75rem 0 0;border-collapse:collapse;font-size:.9rem;color:var(--dark)}
.chart-exp-table caption{text-align:left;margin-bottom:.4rem;color:var(--grey-300);font-size:.85rem}
.chart-exp-table th,.chart-exp-table td{padding:.5rem .6rem;border-bottom:1px solid var(--grey-200);text-align:right}
.chart-exp-table th:first-child,.chart-exp-table thead th:first-child{text-align:left}
.chart-exp-table thead th{font:700 .82rem/1.3 var(--font-heading)}
@media(max-width:480px){.chart-exp{padding:1rem}.chart-exp-tick,.chart-exp-note{font-size:24px}.chart-exp-end{font-size:26px}}

/* founder-*: the About-page founder photo and quote design, reused */
.founder-section{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.founder-photo{width:100%;border-radius:16px}
.founder-bio h2{font-family:var(--font-heading);font-weight:700;font-size:1.8rem;margin-bottom:.25rem;color:var(--dark)}
.founder-bio .founder-role{color:var(--primary);font-weight:600;font-size:.95rem;margin-bottom:1.25rem}
.founder-bio p{color:var(--grey-300);line-height:1.75;margin-bottom:1rem}
.founder-bio .founder-quote{border-left:3px solid var(--primary);padding-left:1.25rem;margin:1.5rem 0}
.founder-bio .founder-quote p{font-style:italic;color:var(--dark);line-height:1.75;margin:0}
.founder-link{display:inline-flex;align-items:center;gap:.5rem;background:rgba(51,97,255,.06);border:1px solid rgba(51,97,255,.15);border-radius:2rem;padding:.5rem 1rem;font-size:.85rem;color:var(--primary);font-weight:500}
.founder-link:hover{background:rgba(51,97,255,.12)}
@media(max-width:768px){
  .founder-section{grid-template-columns:1fr}
  .founder-section > div:last-child{order:-1}
  .founder-photo{max-width:340px;margin:0 auto}
  .founder-bio .founder-quote{text-align:left}
}

/* Panels with text and checklists (compare, see-it-working) */
.ag-panel .ag-checklist{grid-template-columns:1fr}
.ag-panel p + p,.ag-panel p + .ag-checklist,.ag-panel .ag-checklist + p{margin-top:.9rem}
.ah-grid + .tl2-diff{margin-top:1.25rem!important}

/* Startups list: the pricing page's info lightbox design, on a native <dialog> (focus, Esc and backdrop come with it) */
.founder-bio button[aria-controls]{padding:0;border:0;background:none;font:inherit;color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.founder-bio button[aria-controls]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
.info-lightbox-modal{position:fixed;inset:0;margin:auto;height:fit-content;border:0;background:var(--white);border-radius:var(--radius-xl);padding:2.5rem;max-width:640px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);color:var(--dark)}
.info-lightbox-modal::backdrop{background:rgba(0,0,0,.5)}
.info-lightbox-modal h3{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--dark);margin-bottom:1rem;padding-right:2rem}
.info-lightbox-modal p{font-size:.9rem;color:var(--grey-300);line-height:1.6;margin:.75rem 0 0}
.info-lightbox-modal .tier-breakdown{margin:1rem 0}
.info-lightbox-modal .tier-row{display:flex;gap:.75rem;padding:.6rem 0;border-bottom:1px dashed rgba(51,97,255,.15);font-size:.9rem}
.info-lightbox-modal .tier-row:last-child{border-bottom:none}
.info-lightbox-modal .tier-label{font-weight:700;color:var(--primary);min-width:120px;flex-shrink:0;line-height:1.4}
.info-lightbox-modal .tier-label small{font-weight:500;color:var(--grey-300)}
.info-lightbox-modal .tier-desc{color:var(--dark);line-height:1.6}
.info-lightbox-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;background:none;border:none;cursor:pointer;color:var(--grey-300);font-size:1.5rem;line-height:1}
.info-lightbox-close:hover{color:var(--dark)}
.info-lightbox-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
@media(max-width:480px){.info-lightbox-modal{padding:1.5rem;max-height:90vh}.info-lightbox-modal .tier-row{flex-direction:column;gap:.25rem}}
.info-lightbox-modal .info-link{display:inline-block;margin-top:.25rem;font-size:.9rem;color:var(--primary);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* CHG-0033 Phase H: Our history page (scoped to #hist) */
#hist .tl2 .founder-quote{margin:.9rem 0 0;padding:.6rem 1rem;background:var(--pf-indigo-50);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
#hist .tl2 .founder-quote p{font-size:.95rem;line-height:1.55}
#hist .tl2-row:has(figure) .tl2-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#hist .tl2-row:has(figure) .tl2-stats li{min-width:0}
#hist .px-gallery{margin-top:1.5rem}
#hist .px-gallery img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
#hist .px-gallery:has(img[src*="2019-eas"]) img{aspect-ratio:849/1200;object-fit:contain}
#hist .ag-checklist{grid-template-columns:1fr 1fr}
@media (max-width:768px){#hist .ag-checklist{grid-template-columns:1fr}}
#hist .ah-grid .ac-desc{display:block;overflow:visible;-webkit-line-clamp:unset}
@media (max-width:600px){#hist .tl2-row:has(figure) .tl2-stats b{font-size:1.45rem}}
#hist .tl2-txt .tl2-stats li{background:var(--pf-indigo-50);border:1px solid var(--grey-200);box-shadow:none}
/* H-r3: collapsible year cards (native details/summary, .ag-faq pattern) */
#hist .tl2-row::before{top:1.6rem}
#hist #year-2020-pivot .tl2-stats{margin-bottom:1.5rem}
/* H-r4 design pass: even stat tiles, one heading rhythm, the 2020 chapter, the Ai1 finale card */
#hist .tl2-stats{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
#hist .tl2-stats:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
#hist .tl2-stats:has(>li:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
#hist .tl2-stats li{min-width:0}
#hist .ag-hero .tl2-stats{max-width:46rem}
#hist .tl2-txt .tl2-stats{margin:1rem 0}
@media (max-width:900px){#hist .tl2-stats:has(>li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#hist .tl2-stats{grid-template-columns:1fr}#hist .tl2-stats:has(>li:nth-child(2):last-child),#hist .tl2-stats:has(>li:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
#hist .px-head{margin-bottom:2rem}
#hist .ag-section-head>p+p{margin-top:.75rem}
#hist #year-2020-pivot .tl2-stats{margin:0 0 2rem}
#hist #year-2020-pivot .tl2-stats li{background:var(--white)}
#hist #year-2020-pivot .founder-bio{max-width:46rem;margin:2.5rem auto 0;padding:1.75rem 2rem;background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
#hist #year-2020-pivot .founder-quote{margin:0 0 1rem}
#hist #year-2020-pivot .founder-quote p{font-size:1.15rem}
#hist #year-2020-pivot .founder-role{margin:0}
@media (max-width:600px){#hist #year-2020-pivot .founder-bio{padding:1.25rem}#hist #year-2020-pivot .founder-quote p{font-size:1.02rem}}
#hist .ah-grid:has(>li:nth-child(7):last-child)>li:last-child{grid-column:1/-1}
#hist .px-gallery{align-items:stretch}
#hist .px-gallery:has(img[src*="2019-eas"]){max-width:46rem;margin-inline:auto}
@media (min-width:560px) and (max-width:768px){#hist .px-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){#hist .px-gallery:has(>:nth-child(2):last-child),#hist .px-gallery:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}#hist .px-gallery figcaption{font-size:.8rem}}

/* H-r5: highlight rows that open lightboxes (info-lightbox pattern) */
#hist .tl2-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 1.25rem;align-items:center;gap:1rem;padding:1rem 1.2rem;transition:border-color .15s,box-shadow .15s}
#hist .tl2-row::after{grid-column:3;grid-row:1;justify-self:end;content:'+';font-size:1.5rem;line-height:1;color:var(--primary);font-weight:600}
#hist .tl2-row>div{grid-column:1;grid-row:1;min-width:0}
#hist .tl2-row>img{grid-column:2;grid-row:1;width:72px;height:54px;object-fit:cover;border-radius:var(--radius-lg);background:var(--blue-light,#eef2ff)}
#hist .tl2-row h3{margin:.35rem 0 .3rem;font-size:1.12rem}
#hist .tl2-row h3 button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
#hist .tl2-row h3 button::after{content:'';position:absolute;inset:0;border-radius:var(--radius-xl)}
#hist .tl2-row h3 button:focus-visible{outline:none}
#hist .tl2-row h3 button:focus-visible::after{outline:3px solid var(--primary);outline-offset:2px}
#hist .tl2-row:hover{border-color:var(--primary);box-shadow:var(--pf-shadow-lift)}
#hist .tl2-row p:not(.tl2-badge){margin:.2rem 0 0;color:var(--dark);font-size:.92rem;line-height:1.5}
@media (max-width:480px){#hist .tl2-row{grid-template-columns:minmax(0,1fr) 56px 1.25rem;gap:.6rem;padding:.9rem 1rem}#hist .tl2-row>img{width:56px;height:42px}}
#hist .ag-section-head~.ag-section-head{margin-top:3.5rem}
#hist .info-lightbox-modal{max-width:960px;width:92vw;max-height:90vh;padding:2.25rem 2.75rem 2rem}
#hist .info-lightbox-close{position:sticky;top:0;float:right;margin:-1rem -1.75rem 0 .5rem;background:var(--white);border-radius:50%;z-index:1}
#hist .info-lightbox-modal h2{font-size:1.75rem;margin:.6rem 0 .3rem;outline:none}
#hist .info-lightbox-modal h3{font-size:1.08rem;margin:1.6rem 0 .35rem;padding:0}
#hist .info-lightbox-modal .tl2-txt{max-width:46rem}
#hist .info-lightbox-modal p,#hist .info-lightbox-modal .tl2-txt p{color:var(--dark);font-size:1rem;line-height:1.65;margin:.5rem 0 0}
#hist .info-lightbox-modal>.tl2-diff{font-size:1rem!important;margin:.25rem 0 0!important}
#hist .info-lightbox-modal .tl2-badge{margin:0!important}
#hist .info-lightbox-modal .founder-quote{margin:1.5rem 0 0;padding:.8rem 1.1rem;background:var(--pf-indigo-50);border-left:4px solid var(--primary);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
#hist .info-lightbox-modal .founder-quote p{margin:0;font-size:1.05rem}
#hist .info-lightbox-modal .tl2-stats{margin:1.1rem 0 0;padding:0;list-style:none}
#hist .info-lightbox-modal .tl2-stats li{background:var(--pf-indigo-50);border:1px solid var(--grey-200);box-shadow:none}
#hist .info-lightbox-modal .px-gallery{margin-top:1.75rem}
#hist .info-lightbox-modal nav{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--grey-200)}
#hist .info-lightbox-modal nav .btn{max-width:100%;white-space:normal;text-align:left}
@media (max-width:600px){#hist .info-lightbox-modal{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0;padding:1rem 1.1rem 1.5rem}#hist .info-lightbox-close{margin:-.5rem -.6rem 0 .5rem}#hist .info-lightbox-modal h2{font-size:1.4rem}#hist .info-lightbox-modal nav .btn{width:100%;justify-content:center;text-align:center}}
@media (max-width:559px){#hist .info-lightbox-modal .px-gallery:has(>:nth-child(2):last-child),#hist .info-lightbox-modal .px-gallery:has(>:nth-child(4):last-child),#hist .info-lightbox-modal .px-gallery:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* H-r5 P2: photos beside the text, even cards, roomier stat tiles */
#hist .tl2-row{grid-template-columns:minmax(0,1fr) 96px 1.25rem}
#hist .tl2-row>img{width:96px;height:72px}
@media (min-width:768px){#hist ol.tl2{display:grid;grid-auto-rows:1fr;row-gap:1rem}#hist ol.tl2>.tl2-row{margin-bottom:0}}
#hist .info-lightbox-modal{max-width:1140px}
#hist .info-lightbox-close{box-shadow:0 0 0 1px var(--grey-200),0 2px 8px rgba(15,23,42,.08)}
#hist .info-lightbox-modal .tl2-txt{max-width:70ch;display:flow-root}
#hist .info-lightbox-modal .tl2-txt>figure{margin:1.6rem 0 0;max-width:28rem}
#hist .info-lightbox-modal .tl2-txt>figure img{max-height:28rem;object-fit:contain}
#hist .info-lightbox-modal .tl2-txt>figure+h3{margin-top:1.25rem}
#hist .info-lightbox-modal .tl2-txt .tl2-stats:has(>li){grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
#hist .info-lightbox-modal .tl2-stats li{padding:1rem 1.2rem}
#hist .info-lightbox-modal .tl2-stats b{font-size:1.75rem;line-height:1.1}
#hist .info-lightbox-modal .tl2-stats span{margin-top:.5rem;font-size:.88rem;font-weight:500;line-height:1.5}
#hist .info-lightbox-modal .tl2-txt~h3{margin-top:2rem}
#hist .info-lightbox-modal .tl2-txt~.px-gallery{margin-top:.75rem}
@media (min-width:1024px){
#hist .info-lightbox-modal .tl2-txt{max-width:none;padding-right:calc(300px + 2.75rem)}
#hist .info-lightbox-modal .tl2-txt>:not(figure){max-width:70ch}
#hist .info-lightbox-modal .tl2-txt>figure{float:right;clear:right;width:300px;max-width:none;margin:1.6rem calc(-300px - 2.75rem) .75rem 0}
#hist .info-lightbox-modal .tl2-txt>figure+h3{margin-top:1.6rem}
#hist .info-lightbox-modal .tl2-txt>figure:first-child{margin-top:1.4rem}
}
@media (max-width:600px){#hist .info-lightbox-modal .tl2-txt>figure{max-width:none}}
#hist .info-lightbox-modal .tl2-txt>figure img[src*="2019-eas"]{max-height:20rem}
@media (max-width:600px){#hist .info-lightbox-modal .tl2-txt~.px-gallery:has(>figure){grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#hist .info-lightbox-modal .tl2-txt~.px-gallery figcaption{font-size:.78rem;padding:.5rem .6rem .6rem}}
@media (max-width:600px){#hist .tl2-row{grid-template-columns:minmax(0,1fr) 1.25rem}#hist .tl2-row::after{grid-column:2}#hist .tl2-row>img{grid-column:auto;grid-row:auto;position:absolute;top:.9rem;right:2.6rem;width:64px;height:48px;max-width:none;pointer-events:none}#hist .tl2-row:has(>img) h3{padding-right:4.5rem}}