/* Albini Groundtruth page only. Built from the site.css tokens. */

/* hero: text head on paper, the real screen under it at full width */
.dash-hero-shot{justify-self:stretch;width:100%;margin-top:clamp(8px,2vw,24px)}

/* bridge: three anchors under the line */
.dash-steps{list-style:none;margin:0;padding:0 var(--pad) var(--padv);display:flex;flex-wrap:wrap;gap:12px 28px}
.dash-steps a{display:inline-flex;gap:10px;align-items:baseline;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink)}
.dash-steps a:hover{border-bottom-width:2px}

/* 01 See: hairline rows under the Live screen */
.dash-pad{padding:clamp(24px,3vw,40px) var(--pad) var(--padv);display:grid;gap:16px}
.dash-rows{list-style:none;margin:0;padding:0;display:grid}
.dash-rows li{padding:14px 0;border-top:1px solid var(--ink);font-size:17px;line-height:1.45;color:var(--ink)}
.dash-rows li:last-child{border-bottom:1px solid var(--ink)}
.dash-rows strong{display:block;font-size:clamp(18px,1.7vw,22px);line-height:1.25;letter-spacing:-.01em;margin-bottom:.2rem}



/* closing band: the three industry links on one line */

/* each screenshot is a native 2x capture of the product (v11-demo-*, v12-demo-*), full column width, never in a narrow card. The row head (name, one line) sits above the shot. */
.dash-shot{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dash-shot-head{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.dash-shot-head .h3,.dash-shot-head .body{margin:0}
.dash-shot-head .body{max-width:70ch}
@media (min-width:900px){
  .dash-shot-head{grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline}
}
.shot--screen{width:100%;min-width:0}
.shot--screen img{display:block;width:100%;height:auto}
/* section 05: grid of equal logo tiles, rows fading out downward (logos in one muted gray) */
.sys-grid{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.sys-tile{display:grid;place-items:center;aspect-ratio:2/1;padding:12px;background:var(--paper);border:1px solid var(--hairline);color:var(--ink-faint)}
.sys-r1{opacity:1}.sys-r2{opacity:.7}.sys-r3{opacity:.4}
.sys-logo{display:block;width:48px;height:48px}
.sys-logo--sap,.sys-logo--oracle,.sys-logo--odoo{width:84px;height:84px}
.sys-icon{display:block;height:44px;width:44px}
.sys-logo--manhattan,.sys-logo--milestone,.sys-logo--oracle,.sys-logo--netsuite,.sys-logo--dynamics365,.sys-logo--koerber,.sys-logo--infor{width:auto;max-width:78%;flex:none}
.sys-logo--manhattan{height:24px}.sys-logo--milestone{height:28px}.sys-logo--oracle{height:20px}.sys-logo--netsuite{height:38px}.sys-logo--dynamics365{height:46px}.sys-logo--koerber{height:50px}.sys-logo--infor{height:40px;max-width:none}
.sys-word{font-weight:600;letter-spacing:.04em;font-size:clamp(14px,1.4vw,18px);line-height:1.2;text-align:center;text-wrap:balance}
@media (max-width:900px){.sys-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sys-tile{aspect-ratio:5/3}}
.dash-sys-more{margin:0;padding:clamp(16px,2vw,24px) 0 0;font-size:16px;text-align:center}


/* ===== layout and treatment adapted from the reference product page, in our tokens ===== */
/* 1 hero: centered */
.dash-hero-in{justify-items:center;text-align:center;padding-bottom:clamp(28px,4vw,56px)}
.dash-hero-in .display{max-width:20ch}
.dash-hero-in .lead{margin-inline:auto;max-width:52ch}
.dash-hero{border-bottom:0}

/* 2 stage: sky-tinted frame with a fine grid, step list left, screen right */
.dash-stage-band > .in{padding:0 var(--pad) var(--padv)}
.dash-stage{position:relative;display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(20px,3.4vw,56px);background:var(--panel-sky);border:1px solid var(--sky);overflow:hidden}
.dash-stage-bg{position:absolute;inset:0;background-image:linear-gradient(var(--sky) 1px,transparent 1px),linear-gradient(90deg,var(--sky) 1px,transparent 1px);background-size:48px 48px;opacity:.35;pointer-events:none}
.dash-tabs,.dash-panes{position:relative}
.dash-tabs{display:grid;align-content:center}
.dash-tabs button{display:grid;gap:4px;text-align:left;padding:16px 0 16px 18px;background:none;border:0;border-left:2px solid var(--edge);color:var(--ink-faint);font:inherit;cursor:pointer;transition:color .2s,border-color .2s}
.dash-tabs button .step{margin:0}
.dash-tab-name{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.dash-tab-line{display:none;max-width:46ch;font-size:16px;line-height:1.4;color:var(--ink-muted)}
.dash-tabs button[aria-selected=true]{color:var(--ink);border-left-color:var(--ink)}
.dash-tabs button[aria-selected=true] .dash-tab-line{display:block}
.dash-tabs button:hover{color:var(--ink)}
/* all screens share one grid cell so the stage keeps the height of the tallest */
.dash-panes{display:grid}
.dash-pane{grid-area:1/1;margin:0;align-self:center;background:var(--paper);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--sky-edge)}
.is-tabs .dash-pane{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.is-tabs .dash-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}
html:not(.js) .dash-panes{display:block}
html:not(.js) .dash-pane{margin-bottom:24px}
@media (max-width:999px){
  .dash-stage{grid-template-columns:minmax(0,1fr);align-items:start}
  .dash-tabs{grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
  .dash-tabs button{padding:10px 0 0;border-left:0;border-top:2px solid var(--edge)}
  .dash-tabs button[aria-selected=true]{border-top-color:var(--ink)}
  .dash-tab-name{font-size:18px;color:var(--ink-muted)}
  .dash-tabs button[aria-selected=true] .dash-tab-name{color:var(--ink)}
  .dash-tabs{padding-bottom:12em}
  .dash-tabs button[aria-selected=true] .dash-tab-line{position:absolute;left:0;right:0;top:calc(100% - 11.5em);max-width:none;font-size:15px}
  .dash-pane{box-shadow:5px 5px 0 var(--sky-edge)}
}
@media (prefers-reduced-motion:reduce){.is-tabs .dash-pane,.is-tabs .dash-pane.is-on{transition:none;transform:none}}


/* 5 and 8 split */
.dash-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:start}
.dash-split .sec-head h2{max-width:20ch}
.dash-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.dash-tile{background:var(--paper);border:1px solid var(--hairline);padding:clamp(18px,2vw,28px)}
.dash-tile .step{margin-bottom:.9rem}
.dash-sys-more{margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px}
@media (max-width:899px){.dash-split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.dash-tiles{grid-template-columns:minmax(0,1fr)}}

/* 7 full-bleed photo */
.dash-break{border-bottom:1px dashed var(--dash)}
.dash-break img{display:block;width:100%;height:clamp(240px,34vw,560px);object-fit:cover}

/* 8 security rows */
.dash-split--sec .sec-head h2{max-width:24ch}
.dash-sec-rows{list-style:none;margin:0;padding:0;display:grid;align-self:start}
.dash-sec-rows li{display:grid;gap:8px;padding:18px 0;border-top:1px solid var(--night-muted)}
.dash-sec-rows li:last-child{border-bottom:1px solid var(--night-muted)}
.dash-sec-rows .step{margin:0;color:var(--night-muted)}
.dash-sec-rows .lead{margin:0;color:var(--paper);max-width:40ch}

/* examples row (added 2026-10-13): five alert cards under the hero; 3 + 2 from 700px, five across from 1180px, one column on phones */
.ex-grid{list-style:none;margin:0;padding:0 var(--pad) var(--padv);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,20px)}
.ex-card{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:18px;background:var(--paper);border:1px solid var(--hairline)}
.ex-k{display:flex;align-items:center;gap:10px}
.ex-dot{width:9px;height:9px;background:var(--flag);flex:none}
.ex-h{margin:0;font-size:clamp(18px,1.5vw,20px);line-height:1.25;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
.ex-p{margin:0;padding-top:12px;border-top:1px solid var(--hairline);font-size:15px;line-height:1.4;color:var(--ink)}
.ex-p .mono{display:block;color:var(--ink-faint);font-size:11px;margin-bottom:4px}
@media (min-width:700px){.ex-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.ex-card{grid-column:span 2}.ex-card:nth-child(n+4){grid-column:span 3}}
@media (min-width:1180px){.ex-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.ex-card,.ex-card:nth-child(n+4){grid-column:auto}}
.ex-band .sec-head{padding-top:0;padding-bottom:clamp(24px,3vw,36px)}
.ex-band .sec-head h2{max-width:none}
@media (min-width:1180px){.ex-grid{grid-template-rows:auto 1fr auto}.ex-card{grid-row:span 3;grid-template-rows:subgrid;row-gap:12px}}

/* examples now follow the stage: give the band its own top spacing */
#examples{padding-top:clamp(56px,6vw,96px)}