/* Glimpse presentation: the accepted Kumi hierarchy, scoped to this page.
   Product screens, source citations, font families and research behavior stay intact. */
.gl-page .gl{
  --gl-small:13px;
  --gl-body:14px;
  --gl-heading:18px;
  --gl-section:32px;
  --gl-display:40px;
  --gl-rule:#d5d5d9;
}
.gl-page .gl p{font-size:var(--gl-body);line-height:1.6;letter-spacing:0}
.gl-page .gl :is(h1,h2,h3){text-wrap:pretty}
.gl-page .gl .cm-head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-bottom:0}
.gl-page .gl .cm-crumb{margin-bottom:18px;padding:0;border:0;font:500 var(--gl-body)/1.5 var(--cm-text);letter-spacing:0;text-transform:none}
.gl-page .gl .cm-crumb span{font-size:var(--gl-small);color:var(--cm-mute)}
.gl-page .gl .cm-head h1{margin:0;font-size:var(--gl-display);font-weight:600;line-height:1.08;letter-spacing:-.03em}
.gl-page .gl .cm-lede{margin:0;color:#404044;max-width:none}
.gl-page .gl .cm-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin:12px 0 0;padding:22px 0;border-top:1px solid var(--gl-rule)}
.gl-page .gl .cm-facts div{padding:0;min-width:0}
.gl-page .gl .cm-facts dt{font:500 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}
.gl-page .gl .cm-facts dd{margin:7px 0 0;font-size:var(--gl-small);line-height:1.5}

/* One structural divider per section, with headings attached to their content. */
.gl-page .gl .cm-section{margin-top:90px;padding-top:32px;border-top:1px solid var(--gl-rule)}
.gl-page .gl .cm-section-head{margin-bottom:28px;padding:0;border:0}
.gl-page .gl .cm-section-head h2,.gl-page .gl .gl-brief h2{font-size:var(--gl-section);font-weight:550;line-height:1.2;letter-spacing:-.025em}
.gl-page .gl .cm-sub{max-width:none;margin-top:48px}
.gl-page .gl .cm-section-head+.cm-sub{margin-top:0}
.gl-page .gl .cm-sub h3{margin:0 0 12px;font-size:var(--gl-heading);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.gl-page .gl .cm-sub p{max-width:none;color:#404044}
.gl-page .gl .cm-intro{margin:0 0 28px}
.gl-page .gl .gl-brief{margin-top:64px;padding-top:32px;border-color:var(--gl-rule)}
.gl-page .gl .gl-problems{gap:32px;margin-top:28px}
.gl-page .gl .gl-problems li{font-size:var(--gl-body);line-height:1.6;border-color:var(--gl-rule)}
.gl-page .gl :is(.gl-problems span,.gl-flow>li>span,.cm-notes>li>span){font:450 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0;color:#5c5c62}
.gl-page .gl .cm-notes{gap:32px}
.gl-page .gl .cm-notes li{border-color:var(--gl-rule)}
.gl-page .gl :is(.cm-notes b,.gl-flow b,.gl-evo b){font-size:var(--gl-heading);line-height:1.25;letter-spacing:-.02em}
.gl-page .gl :is(#research .cm-notes b,.gl-flow b){font-weight:500}
.gl-page .gl .gl-flow{gap:24px}
.gl-page .gl .gl-flow p{font-size:var(--gl-small);line-height:1.5}

/* Original glimpse.css owns all screenshot panels and the two-column exploration grid. */
.gl-page .gl .gl-evo p{max-width:none}
.gl-page .gl .gl-shot figcaption{font:450 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;color:#5c5c62}

/* Research labels remain legible without competing with the actual findings. */
.gl-page .gl :is(.gl-stat-k,.gl-stat-more,.gl-q b){font:500 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0;text-transform:none}
.gl-page .gl .gl-q p{font-size:var(--gl-body)}
.gl-page .gl .gl-ev li{font-size:var(--gl-body);line-height:1.6}
.gl-page .gl .gl-ev cite{font:500 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0}
.gl-page .gl .gl-stat small{font-size:var(--gl-small);line-height:1.5}
.gl-page .gl .gl-sources li{font-size:var(--gl-small);line-height:1.5}
.gl-page .gl .cm-end{font:450 var(--gl-body)/1.5 var(--cm-text);letter-spacing:0;text-transform:none;border-color:var(--gl-rule)}

@media(max-width:760px){
  .gl-page .gl{--gl-display:34px;--gl-section:28px}
  .gl-page .gl .cm-crumb{margin-bottom:8px}
  .gl-page .gl .cm-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:8px}
  .gl-page .gl .cm-section{margin-top:64px;padding-top:25px}
  .gl-page .gl .cm-section-head{margin-bottom:24px}
  .gl-page .gl .cm-sub{margin-top:40px}
  .gl-page .gl .gl-brief{margin-top:40px;padding-top:25px}
  .gl-page .gl .gl-problems{gap:24px}
}

/* Keep each solution story distinct around the restored screenshot panels. */
.gl-page .gl #solution .cm-sub{margin-top:64px}
@media(max-width:760px){
  .gl-page .gl #solution .cm-sub{margin-top:48px}
}

/* Compact the two project-facts rows without changing the page typography. */
.gl-page .gl .cm-facts{row-gap:8px}
.gl-page .gl .cm-facts dd{margin:0}

/* Research has one leading finding; supporting evidence remains available on demand. */
.gl-page .gl #research>.cm-sub:not(:first-of-type){margin-top:80px}
.gl-page .gl .gl-research-findings{margin-top:32px}
.gl-page .gl .gl-stat-primary{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:8px 32px;
  width:100%;
  padding:28px 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--gl-rule);
  border-bottom:1px solid var(--gl-rule);
}
.gl-page .gl .gl-stat-primary .gl-stat-k{grid-column:1;grid-row:1}
.gl-page .gl .gl-stat-primary b{grid-column:1;grid-row:2;margin:0;font-size:52px;font-weight:500;line-height:1.05;letter-spacing:-.03em}
.gl-page .gl .gl-stat-primary small{grid-column:2;grid-row:2;align-self:center;margin:0;max-width:38ch;font-size:var(--gl-body);line-height:1.6;color:#404044}
.gl-page .gl .gl-stat-primary .gl-stat-more{grid-column:2;grid-row:3;margin:0}
.gl-page .gl .gl-stat-primary:after{content:none}
.gl-page .gl .gl-stat-primary:focus-visible{outline:2px solid var(--cm-ink);outline-offset:5px}
.gl-page .gl .gl-research-details{margin-top:20px}
.gl-page .gl .gl-research-details>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;cursor:pointer;list-style:none;font:500 var(--gl-body)/1.5 var(--cm-text);color:#404044}
.gl-page .gl .gl-research-details>summary::-webkit-details-marker{display:none}
.gl-page .gl .gl-research-details>summary:after{content:'+';font-size:20px;line-height:1}
.gl-page .gl .gl-research-details[open]>summary:after{content:'−'}
.gl-page .gl .gl-research-details>summary:focus-visible{outline:2px solid var(--cm-ink);outline-offset:4px}
.gl-page .gl .gl-research-details>.cm-grid{margin-top:16px}
.gl-page .gl .gl-research-details .gl-stat{padding:20px 16px}
.gl-page .gl .gl-research-details .gl-stat b{font-size:24px}
.gl-page .gl .gl-app-comparison{margin-top:16px}
.gl-page .gl .gl-research-goals{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
.gl-page .gl .gl-research-goals li{display:grid;grid-template-columns:24px 210px minmax(0,1fr);gap:20px;padding:24px 0}
.gl-page .gl .gl-research-goals :is(span,b,p){margin:0}
.gl-page .gl .gl-research-goals span{padding-top:3px}
@media(max-width:760px){
  .gl-page .gl #research>.cm-sub:not(:first-of-type){margin-top:56px}
  .gl-page .gl .gl-stat-primary{grid-template-columns:150px minmax(0,1fr);column-gap:20px}
  .gl-page .gl .gl-stat-primary b{font-size:40px}
  .gl-page .gl .gl-research-goals li{grid-template-columns:24px minmax(0,1fr);gap:8px 16px}
  .gl-page .gl .gl-research-goals p{grid-column:2}
}
@media(max-width:440px){
  .gl-page .gl .gl-stat-primary{grid-template-columns:minmax(0,1fr)}
  .gl-page .gl .gl-stat-primary small{grid-column:1;grid-row:3;margin-top:8px}
  .gl-page .gl .gl-stat-primary .gl-stat-more{grid-column:1;grid-row:4;margin-top:8px}
}

/* Simple proportional graphics use the supplied numbers; qualitative findings stay text. */
.gl-page .gl .gl-photo-chart{display:block;grid-column:1/-1;grid-row:4;width:100%;margin-top:20px}
.gl-page .gl .gl-photo-chart-bar{display:flex;width:100%;height:24px;overflow:hidden}
.gl-page .gl .gl-photo-chart-unseen{width:70%;background:#34343a}
.gl-page .gl .gl-photo-chart-other{width:30%;background:#dedee3}
.gl-page .gl .gl-photo-chart-labels,.gl-page .gl .gl-pressure-chart-axis{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:450 var(--gl-small)/1.5 var(--cm-text);color:#5c5c62}
.gl-page .gl .gl-research-details>.cm-grid{grid-template-columns:minmax(0,1fr);border:0}
.gl-page .gl .gl-research-details .gl-stat{display:grid;grid-template-columns:145px minmax(0,1fr);gap:8px 24px;padding:24px 0;border:0;border-top:1px solid var(--gl-rule);background:transparent}
.gl-page .gl .gl-research-details .gl-stat .gl-stat-k{grid-column:1;grid-row:1}
.gl-page .gl .gl-research-details .gl-stat b{grid-column:1;grid-row:2;margin:0}
.gl-page .gl .gl-research-details .gl-stat small{grid-column:2;grid-row:2;align-self:center;margin:0;font-size:var(--gl-body)}
.gl-page .gl .gl-research-details .gl-stat .gl-stat-more{grid-column:2;grid-row:3;margin:0}
.gl-page .gl .gl-research-details .gl-stat:after{content:none}
.gl-page .gl .gl-pressure-chart{display:block;grid-column:1/-1;grid-row:4;width:100%;margin-top:12px}
.gl-page .gl .gl-pressure-chart-bar{display:block;height:12px;background:#dedee3}
.gl-page .gl .gl-pressure-chart-bar>span{display:block;width:43%;height:100%;background:#34343a}
.gl-page .gl .gl-research-findings .gl-ev{transition:none}
@media(max-width:440px){
 .gl-page .gl .gl-stat-primary .gl-photo-chart{grid-row:5}
 .gl-page .gl .gl-research-details .gl-stat{grid-template-columns:minmax(0,1fr)}
 .gl-page .gl .gl-research-details .gl-stat small{grid-column:1;grid-row:3;margin-top:8px}
 .gl-page .gl .gl-research-details .gl-stat .gl-stat-more{grid-column:1;grid-row:4}
 .gl-page .gl .gl-pressure-chart{grid-row:5}
}

/* Oct 19: supporting findings stay open, each with a small sourced chart on one 0-100 scale. */
.gl-page .gl .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gl-page .gl .gl-research-open{margin-top:8px}
.gl-page .gl .gl-research-open>.cm-grid{margin-top:0}
.gl-page .gl .gl-research-details .gl-mini{display:block;grid-column:2;grid-row:4;width:100%;max-width:440px;margin-top:16px}
.gl-page .gl .gl-mini-track{position:relative;display:block;height:10px;background:#e4e4e8}
.gl-page .gl .gl-mini-fill{position:absolute;inset:0 auto 0 0;background:#34343a}
.gl-page .gl .gl-mini-over{position:absolute;top:0;bottom:0;left:50%;width:16%;background:linear-gradient(90deg,#34343a,rgba(52,52,58,0))}
.gl-page .gl .gl-mini-ticks i{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.7)}
.gl-page .gl .gl-mini-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:#1d1d1f;transform:translateX(-50%)}
.gl-page .gl .gl-mini-axis{position:relative;display:block;height:14px;margin-top:6px;font:450 11px/14px var(--cm-text);font-variant-numeric:tabular-nums;color:#8a8a90}
.gl-page .gl .gl-mini-axis span{position:absolute;top:0;transform:translateX(-50%)}
.gl-page .gl .gl-mini-axis span:nth-child(1){left:0;transform:none}
.gl-page .gl .gl-mini-axis span:nth-child(2){left:25%}
.gl-page .gl .gl-mini-axis span:nth-child(3){left:50%}
.gl-page .gl .gl-mini-axis span:nth-child(4){left:75%}
.gl-page .gl .gl-mini-axis span:nth-child(5){left:auto;right:0;transform:none}
.gl-page .gl .gl-mini-key{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;font:450 12px/1.45 var(--cm-text);color:#5c5c62}
.gl-page .gl .gl-mini-key>span{display:inline-flex;align-items:center;gap:6px}
.gl-page .gl .gl-mini-dot{display:inline-block;flex:none;width:8px;height:8px;background:#34343a}
.gl-page .gl .gl-mini-dot-off{background:#e4e4e8}
@media(max-width:440px){.gl-page .gl .gl-research-details .gl-mini{grid-column:1;grid-row:5;max-width:none}}

/* Oct 19: existing apps as a comparison table (after Jean Chen's Typistry), kept in the page's monochrome. */
.gl-page .gl .gl-cmp{margin:24px 0 0}
.gl-page .gl .gl-cmp-scroll{overflow-x:auto}
.gl-page .gl .gl-cmp table{width:100%;min-width:660px;border-collapse:collapse;font:450 var(--gl-body)/1.5 var(--cm-text);color:#404044}
.gl-page .gl .gl-cmp :is(th,td){padding:16px 12px;border-bottom:1px solid var(--gl-rule);text-align:left;vertical-align:middle}
.gl-page .gl .gl-cmp thead th{padding:12px;border-top:1px solid var(--cm-ink);border-bottom-color:var(--cm-ink);font:500 var(--gl-small)/1.35 var(--cm-text);color:#5c5c62;vertical-align:bottom}
.gl-page .gl .gl-cmp thead th:first-child{width:200px}
.gl-page .gl .gl-cmp thead th:nth-child(n+2):nth-child(-n+5){width:84px;text-align:center}
.gl-page .gl .gl-cmp tbody th b{display:block;font-weight:600;color:#1d1d1f}
.gl-page .gl .gl-cmp tbody th span{display:block;margin-top:2px;font-size:var(--gl-small);color:#6e6e73}
.gl-page .gl .gl-cmp-m{text-align:center}
.gl-page .gl .gl-m{display:inline-block;box-sizing:border-box;width:13px;height:13px;border:1.5px solid #1d1d1f;border-radius:50%;vertical-align:middle}
.gl-page .gl .gl-m-yes{background:#1d1d1f}
.gl-page .gl .gl-m-part{background:linear-gradient(90deg,#1d1d1f 50%,transparent 50%)}
.gl-page .gl .gl-m-no{border-color:#a1a1a6}
.gl-page .gl .gl-cmp-me :is(th,td){background:#fff}
.gl-page .gl .gl-cmp-me .gl-cmp-take{color:#1d1d1f}
.gl-page .gl .gl-cmp figcaption{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font:450 var(--gl-small)/1.5 var(--cm-text);color:#5c5c62}
.gl-page .gl .gl-cmp figcaption span{display:inline-flex;align-items:center;gap:7px}
.gl-page .gl .gl-research-open .gl-stat:first-child{border-top:0}
.gl-page .gl .gl-cmp-scroll{position:relative}

/* Oct 19: the opening uses Kumi's layout (values from kumi.css .km-opening, .km-introduction, .km-story .cm-facts):
   the name small and one large line on the left, a short introduction aligned with that line on the right,
   then the project facts as labels over values in one row. */
.gl-page .gl .gl-opening{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
.gl-page .gl .gl-opening h1{margin:0 0 12px;font-size:var(--gl-heading);line-height:1.25;letter-spacing:-.02em}
.gl-page .gl .gl-promise{max-width:650px;margin:0;font:600 var(--gl-display)/1.08 var(--cm-display);letter-spacing:-.03em;text-wrap:balance;color:var(--cm-ink)}
.gl-page .gl .gl-introduction{max-width:410px;padding-bottom:2px}
.gl-page .gl .gl-introduction p{margin:0 0 12px;color:#404044}
.gl-page .gl .gl-introduction p:last-child{margin-bottom:0}
.gl-page .gl .gl-introduction .gl-status{font-size:var(--gl-small);line-height:1.55;color:#5c5c62}
.gl-page .gl .cm-head .cm-facts{display:grid;grid-template-columns:1.4fr 1.6fr .65fr .5fr 1.3fr;gap:24px;max-width:none;margin:18px 0 0;padding:22px 0;border-top:1px solid var(--gl-rule)}
.gl-page .gl .cm-head .cm-facts div{display:block;padding:0;min-width:0}
.gl-page .gl .cm-head .cm-facts dt:after{content:none}
.gl-page .gl .cm-head .cm-facts dd{margin:7px 0 0;color:#6e6e73}
@media(max-width:1050px){.gl-page .gl .gl-opening{gap:28px}}
@media(max-width:760px){
  .gl-page .gl .gl-opening{grid-template-columns:1fr;gap:20px}
  .gl-page .gl .gl-opening h1{margin-bottom:10px}
  .gl-page .gl .gl-introduction{max-width:65ch}
  .gl-page .gl .cm-head .cm-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:8px}
  .gl-page .gl .cm-head .cm-facts dd{margin-top:5px}
}

/* Oct 20: the comparison header no longer stacks into three-line columns. The mark columns are wide enough
   for two balanced lines, every label sits on one baseline, and the row names get a little less room. */
.gl-page .gl .gl-cmp thead th{padding:14px 8px 12px;line-height:1.3;text-wrap:balance;vertical-align:bottom}
.gl-page .gl .gl-cmp thead th:first-child,.gl-page .gl .gl-cmp thead th:last-child{padding-left:12px;padding-right:12px}
.gl-page .gl .gl-cmp thead th:first-child{width:176px}
.gl-page .gl .gl-cmp thead th:nth-child(n+2):nth-child(-n+5){width:96px}
.gl-page .gl .gl-cmp-take{font-size:var(--gl-small);line-height:1.5}

/* Oct 20: every header label is centred on the same middle line, one- and two-line labels alike. */
.gl-page .gl .gl-cmp thead th{vertical-align:middle}
/* Oct 20: the marks centre under their headings (the general cell rule was overriding .gl-cmp-m). */
.gl-page .gl .gl-cmp td.gl-cmp-m{text-align:center}

/* Oct 20: the Solution has four features; the parts inside a feature get a plain bold line, not a new heading size. */
.gl-page .gl #solution .gl-part-step{margin:40px 0 6px;font:600 var(--gl-body)/1.45 var(--cm-text);letter-spacing:0;color:#1d1d1f}
.gl-page .gl #solution .gl-part-text{margin:0 0 4px;max-width:none;color:#404044}
.gl-page .gl #solution .cm-sub+.gl-part-step{margin-top:28px}

/* Oct 20: a part shown by one screen sits beside its text, as in Jean Chen's Typistry solutions. */
.gl-page .gl #solution .gl-pair.gl-side{align-items:center;gap:clamp(32px,6vw,72px);margin-top:40px}
.gl-page .gl #solution .gl-side-text{flex:0 1 300px}
.gl-page .gl #solution .gl-side .gl-part-step{margin-top:0}
@media(max-width:640px){
  .gl-page .gl #solution .gl-pair.gl-side{flex-direction:column;align-items:stretch}
  .gl-page .gl #solution .gl-side .gl-shot{width:min(240px,70%);align-self:center}
}

/* Oct 20: the four solutions are numbered like Kumi's features (kumi.css .km-feature-heading / .km-feature-number):
   the number in a 48px column, the title beside it, the paragraph across the full width below. */
.gl-page .gl #solution .gl-feature{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;row-gap:12px;align-items:baseline}
.gl-page .gl #solution .gl-feature-number{grid-column:1;grid-row:1;font:450 var(--gl-small)/1.5 var(--cm-text);letter-spacing:0;font-variant-numeric:tabular-nums;color:#5c5c62}
.gl-page .gl #solution .gl-feature h3{grid-column:2;grid-row:1;margin:0}
.gl-page .gl #solution .gl-feature p{grid-column:1/-1;margin:0}
@media(max-width:760px){.gl-page .gl #solution .gl-feature{grid-template-columns:28px minmax(0,1fr);column-gap:13px}}