/* ──────────────────────────────────────────────────────────────
   The landing page, 8.2: the pieces a full account shows that the
   anonymous 8.1 had no need for. Loaded after landing-v8.css and
   landing-v8.1.css, on their tokens and corner steps.
   ────────────────────────────────────────────────────────────── */

@supports (corner-shape: squircle){
  .l8-st,.l8-res,.l8-org-b,.l8-org-b i,.l8-b2-t i{corner-shape:squircle}
}

/* saying it is an example, wherever the example is */
.l8-exnote{margin-top:10px;text-align:center;font-size:12.5px;color:var(--gold-ink)}
.l8-live-ex .dot{background:var(--gold)}
.l8-ex{display:block;margin:-8px 0 10px;text-align:right;font-size:12.5px;color:var(--ink-4)}

/* the band's diagram with names: the two labels only the app draws, styled
   as pollock-company.css styles them, which this page does not load */
.l8-sheet .gpname{font-family:var(--ui);font-size:11.5px;font-weight:600;fill:var(--ink)}
.l8-sheet .gnode.off .gname{fill:var(--ink-3);font-weight:500}

/* people */
.l8-row.past .l8-rt{color:var(--ink-3);font-weight:500}
.l8-row.past .l8-av{background:var(--paper);color:var(--ink-4)}
.l8-cnt{flex:none;font-size:13px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.l8-cnt b{font-size:15px;font-weight:600;color:var(--gold-ink);margin-right:3px}
.l8-person{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.l8-person .l8-av{width:40px;height:40px;font-size:15px;background:var(--card)}
.l8-person .l8-rt{font-size:15.5px}
.l8-st{flex:none;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-xs);font-size:12.5px;color:var(--sage);white-space:nowrap}
.l8-st.off{color:var(--ink-4)}
.l8-st.here{border-color:rgba(168,118,42,.35);background:var(--gold-wash);color:var(--gold-ink)}

/* statements: four figures, two series to scale, the lines, the ratios */
.l8-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.l8-kpis>div{min-width:0;padding:14px 16px 13px;border-left:1px solid var(--line)}
.l8-kpis>div:first-child{border-left:0}
.l8-kpi-l{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l8-kpis b{display:block;margin-top:4px;font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.l8-kpi-d{display:block;margin-top:3px;font-size:12px;color:var(--sage);font-variant-numeric:tabular-nums}
.l8-bars2{display:flex;gap:clamp(8px,1.8vw,22px);height:178px;padding:34px 22px 0}
.l8-b2{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.l8-b2-t{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--line-2)}
.l8-b2-t i{position:relative;display:block;width:44%;max-width:30px;min-height:2px;font-style:normal;border-radius:var(--r-xs) var(--r-xs) 0 0}
.l8-b2-t i.r{background:var(--gold-wash);border:1px solid rgba(168,118,42,.35);border-bottom:0}
.l8-b2-t i.n{background:var(--ink-2)}
.l8-b2.now .l8-b2-t i.r{background:var(--gold);border-color:var(--gold)}
.l8-b2-t b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.l8-b2.now .l8-b2-t b{color:var(--ink);font-weight:600}
.l8-b2>span{padding:8px 0 4px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.l8-b2.now>span{color:var(--ink);font-weight:600}
.l8-b2-k{display:flex;justify-content:center;gap:6px 20px;flex-wrap:wrap;padding:6px 20px 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.l8-b2-k span{display:inline-flex;align-items:center;gap:7px}
.l8-b2-k i{display:block;width:10px;height:10px;border-radius:2px}
.l8-b2-k i.r{background:var(--gold)} .l8-b2-k i.n{background:var(--ink-2)}
.l8-tbl td.now{color:var(--ink);font-weight:600}
.l8-frag .l8-tbl th,.l8-frag .l8-tbl td{padding-left:14px;padding-right:18px}
.l8-tbl td:first-child{color:var(--ink-2)}
.l8-ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.l8-ratios>div{min-width:0;padding:12px 12px 12px 16px;border-left:1px solid var(--line)}
.l8-ratios>div:first-child{border-left:0}
.l8-ratios span{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l8-ratios b{display:block;margin-top:2px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}

/* public money: the total, the bodies, the latest decisions */
.l8-dvh{display:flex;gap:36px;padding:16px 20px 12px}
.l8-dvh b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.l8-dvh span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.l8-orgs{padding:2px 20px 14px;border-bottom:1px solid var(--line)}
.l8-org{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 96px;gap:14px;align-items:center;padding:5px 0;font-size:13px}
.l8-org-n{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l8-org-b{display:block;height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.l8-org-b i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.l8-org-v{text-align:right;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.l8-org.rest .l8-org-n,.l8-org.rest .l8-org-v{color:var(--ink-3);font-weight:400}
.l8-org.rest .l8-org-b{background:none}
.l8-amt{flex:none;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* the registers: a result on every line */
.l8-res{flex:none;padding:3px 10px;border-radius:var(--r-xs);font-size:12.5px;font-weight:500;white-space:nowrap}
.l8-res.ok{background:var(--sage-wash);color:var(--sage)}
.l8-res.hit{background:rgba(156,63,40,.08);color:var(--clay)}
.l8-sub-row{background:var(--paper)}

/* the watchlist */
.l8-when{flex:none;width:92px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.l8-lab{color:var(--ink-2);font-weight:500}

@media(max-width:640px){
  /* at phone size the labels are drawn larger and the two at the top would
     meet; the company and its chair stay, the connected company goes */
  .l8-g .a3{display:none}
  .l8-frag .l8-tbl th:nth-child(4),.l8-frag .l8-tbl td:nth-child(4){display:none}
  .l8-frag .l8-tbl{font-size:13.5px}
  .l8-frag .l8-tbl th,.l8-frag .l8-tbl td{padding-left:12px;padding-right:12px}
  .l8-frag .l8-tbl td:first-child{white-space:normal}
  .l8-ex{margin:-4px 0 8px}
  .l8-kpis,.l8-ratios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .l8-kpis>div:nth-child(3),.l8-ratios>div:nth-child(3){border-left:0}
  .l8-kpis>div:nth-child(n+3),.l8-ratios>div:nth-child(n+3){border-top:1px solid var(--line)}
  .l8-kpis>div{padding:12px 14px}
  .l8-kpis b{font-size:19px}
  .l8-bars2{height:160px;padding:30px 10px 0;gap:6px}
  .l8-b2-t b{font-size:10.5px}
  .l8-dvh{padding:14px 14px 10px;gap:24px}
  .l8-orgs{padding:2px 14px 12px}
  .l8-org{grid-template-columns:minmax(0,1fr) 84px;gap:2px 10px}
  .l8-org-b{grid-column:1 / -1;grid-row:2}
  .l8-person{padding:14px}
  .l8-when{width:74px;font-size:12.5px}
  .l8-cnt{font-size:12.5px}
}

/* ── responsiveness pass (2026-09-17) ────────────────────────────
   Found by shooting the page at 360, 390, 768, 1024 and 1440. Nothing
   overflowed; what was wrong was truncation, rhythm and two grids. */
.l8-h1{text-wrap:balance}
.l8-sec-h,.l8-pt h3{text-wrap:balance}
/* four prices are two rows of two before they are three and one */
@media(max-width:1080px) and (min-width:641px){.l8-pr{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* between a phone and a laptop the hero is one column: the figure is centred
   under the search instead of hanging off the left edge */
@media(max-width:960px){
  .l8-fig{width:100%;margin-left:auto;margin-right:auto}
  .l8-uc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  /* the band's diagram is wider than a phone and scrolls inside its sheet
     (pollock.css); the header says so */
  .l8-sheet-hd::after{content:"σύρετε για όλο το διάγραμμα →";flex:1 1 100%;font-size:12.5px;font-weight:400;color:var(--ink-3)}
  .l8-sheet .graph{padding:12px 6px}
}
@media(max-width:640px){
  /* 80px between every section made a 15.600px page on a phone */
  .l8-sec{padding-top:clamp(52px,13vw,68px)}
  .l8-parts{gap:48px}
  .l8-part{gap:20px}
  /* a name cut at «ΘΕΡΜΑΪΚΟΣ ΠΕΡΙΒΑΛΛ…» says nothing: two lines, then the cut */
  .l8-rt,.l8-rs,.l8-org-n{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .l8-rt,.l8-org-n{-webkit-line-clamp:2}
  .l8-rs{-webkit-line-clamp:2}
  .l8-row{align-items:flex-start}
  .l8-row .l8-st,.l8-row .l8-res,.l8-row .l8-amt,.l8-row .l8-cnt{margin-top:1px}
  .l8-uc{grid-template-columns:1fr}
  .l8-eg{row-gap:8px;gap:6px;font-size:13px}
  .l8-eg a{padding:5px 9px}
  /* the key under the hero diagram: two tidy columns */
  .l8-key{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
}
@media(max-width:380px){
  .l8-h1{font-size:31px}
  .l8-q-n{font-size:26px}
  .l8-kpis b{font-size:17.5px}
}

/* ── the landing's header (2026-09-17): a taller bar and a larger wordmark.
   Only here: .l8-page is set on <body> by this page, so the company pages
   and the search keep the compact bar. ─────────────────────────── */
body.l8-page .nav-in{padding-top:16px;padding-bottom:16px}
body.l8-page .mark{font-size:44px}
body.l8-page .nav .cta{padding:11px 18px;font-size:14px}
body.l8-page .nav .lnk{font-size:14.5px}
@media(max-width:640px){
  body.l8-page .nav-in{padding-top:12px;padding-bottom:12px}
  body.l8-page .mark{font-size:36px}
}

/* ── 2026-09-17, Petros: less air above the headline; and the search follows
   the reader into the header once the hero's has scrolled away ───────── */
.l8-hero{padding-top:clamp(20px,2.6vw,36px)}
.l8-h1{margin-top:20px}
/* the header's search: there in the markup, out of the way until needed */
.l8-find-h{flex:1 1 auto;max-width:460px;margin:0 clamp(12px,2vw,28px);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
body.l8-away .l8-find-h{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s}
.l8-find-h .find-box{height:42px;border-radius:var(--r-btn);corner-shape:squircle}
.l8-find-h .find-in{font-size:14.5px}
.l8-find-h .find-menu{border-radius:var(--r-md);corner-shape:squircle;overflow:hidden}
@media(prefers-reduced-motion:reduce){.l8-find-h{transition:none}}
@media(max-width:760px){
  /* On a phone the header's search hangs under the header, out of the flow.
     It used to be a second row OF the header, and the header is sticky and in
     the flow: showing the row made the header 54px taller, which pushed the page
     down, which brought the hero's search back on screen, which hid the row,
     which pulled the page up again. Parked anywhere in that 52px band of scroll
     the page shook by itself, four flips in half a second (measured 2026-09-17).
     Positioned against .nav, showing it moves nothing, so there is no loop. */
  .l8-find-h{position:absolute;left:0;right:0;top:100%;flex:none;max-width:none;margin:0;
    padding:8px clamp(18px,4vw,40px) 10px;background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 6px 14px -12px rgba(20,16,8,.35);pointer-events:none}
  body.l8-away .l8-find-h{pointer-events:auto}
  /* the menu lines up with the box, not with the padded row around it */
  .l8-find-h .find-menu{left:clamp(18px,4vw,40px);right:clamp(18px,4vw,40px);top:calc(100% - 6px)}
  .l8-hero{padding-top:18px}
  .l8-h1{margin-top:16px}
}