/* NUBIS ad TERRAM: the demo and pricing pages, and the Atlas behind the sign in. Loaded AFTER home.css and pages.css,
   which carry the tokens, the header, the tray, plates, wells, glass, keys, the carved numerals and the footer. This
   sheet adds only what those four pages have that the first three have not: the run of steps, the row of keys where
   the pressed one is down, the forms, the three tier plates, the report card, the status pills and the sample shelf.
   Same material rules: raised plates are for reading, debossed wells hold what is alive, glass is what you press.
   It adds no tokens. */

.appcol{grid-column:1 / -1;max-width:1120px;margin:0 auto;width:100%}
.page .sec--mid{justify-items:center}

/* ---------- a numbered run of steps: each one a well cut into its plate ---------- */
.steps{display:grid;gap:12px;margin-top:22px}
.step{display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);gap:8px 26px;padding:18px 22px;border-radius:14px;box-shadow:var(--well-sm)}
.step__t{font-family:var(--display);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-ink);padding-top:3px}
.step p{font-size:15.5px;line-height:1.55;color:#2A2D36}
.step p+p{margin-top:8px}

/* ---------- a row of keys where the one that is down is the one being used ---------- */
.roles{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.role{padding:11px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--g);color:var(--ink);
  font-family:var(--display);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--raised-sm);transition:box-shadow .35s var(--out),color .2s,transform .35s var(--out)}
.role:hover{color:var(--orange-ink);transform:translateY(-1px)}
.role[aria-pressed=true]{box-shadow:var(--well-sm);color:var(--orange-ink);transform:none}

/* ---------- forms: every field is a well, the key that sends is orange ---------- */
.formgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px var(--gap);margin-top:22px;align-items:start}
.fld{display:block;min-width:0;margin:0}
.fld.wide{grid-column:1 / -1}
.fld .lbl{display:block;margin-bottom:8px}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{width:100%;border:0;border-radius:999px;padding:0 22px;height:56px;background:var(--g);
  box-shadow:var(--well-sm);font:15.5px/1.3 var(--body);color:var(--ink);transition:box-shadow .35s var(--out)}
.fld textarea{border-radius:18px;height:auto;min-height:104px;padding:18px 22px;resize:vertical;line-height:1.5}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 25px) 25px,calc(100% - 19px) 25px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}
.fld input[type=text]:focus,.fld input[type=email]:focus,.fld select:focus,.fld textarea:focus{outline:none;box-shadow:var(--well-sm),0 0 0 2px var(--violet)}
.fld .hint{display:block;margin-top:8px;font-size:13px;color:var(--muted)}

.gokey{margin-top:22px;height:56px;min-width:min(100%,268px);border:0;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:space-between;gap:16px;padding:0 10px 0 26px;border-radius:999px;background:var(--orange);color:var(--ink);
  font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:6px 6px 16px rgba(201,58,0,.34),-6px -6px 16px var(--hi),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .35s var(--out),box-shadow .35s var(--out)}
.gokey b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:15px;transition:transform .45s var(--out)}
.gokey:hover{transform:translateY(-2px)} .gokey:hover b{transform:translateX(3px)}
.gokey:active{transform:translateY(1px);box-shadow:inset 4px 4px 9px rgba(160,42,0,.5),inset -4px -4px 9px rgba(255,150,100,.7)}
.gokey--plain{background:var(--g);color:var(--ink);box-shadow:var(--raised-sm)}
.gokey--plain b{background:var(--ink)}
.gokey--plain:active{box-shadow:var(--well-sm)}

.sent{margin-top:20px;padding:22px 24px;border-radius:18px;box-shadow:var(--well-sm);font-size:15.5px;line-height:1.55;color:#2A2D36}
.sent b{display:block;font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:8px}
.quiet{margin-top:26px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.quiet a{color:var(--orange-ink);box-shadow:inset 0 -1px 0 rgba(255,77,0,.35)}

/* ---------- the three tiers: three shapes, not three sizes, so no plate is favoured ---------- */
.tiers{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.tier{display:flex;flex-direction:column;gap:14px}
.tier h3{font-family:var(--display);font-size:clamp(20px,1.8vw,28px);letter-spacing:-.02em;line-height:1.05}
.tier .who{font-size:15px;line-height:1.55;color:#2A2D36}
.tier .how{padding:13px 16px;border-radius:12px;box-shadow:var(--well-sm)}
.tier .how b{display:block;font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.tier .how span{font-size:14.5px;color:var(--muted)}
.tier ul{margin:0;padding:0 0 0 18px;font-size:15px;line-height:1.62;color:#2A2D36}
.tier ul li+li{margin-top:5px}
.tier .not{margin-top:auto;padding-top:14px;border-top:1px solid rgba(158,169,194,.4);box-shadow:0 -1px 0 #fff;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pricenote{grid-column:1 / -1;margin-top:var(--gap);padding:22px 26px;border-radius:18px;box-shadow:var(--well-sm);font-size:15.5px;line-height:1.55;color:#2A2D36}
.pricenote .acts{margin-top:18px}
.pricenote .key{color:var(--ink);box-shadow:var(--raised-sm)}
.pricenote .key b{background:var(--orange);color:var(--ink)}
.pricenote .key:hover{background:var(--g)}
.pricenote .key:active{box-shadow:var(--well-sm)}

/* ---------- the report card: one plate, the three words as labels, no score anywhere ---------- */
.card{display:grid;gap:18px}
.card__head h3{font-family:var(--display);font-size:clamp(19px,1.7vw,26px);letter-spacing:-.02em;line-height:1.15}
.card__head .label{margin-top:7px}
.card__verdict{margin-top:14px;font-size:16px;line-height:1.55;color:#2A2D36;max-width:64ch}
.card__grp{padding-top:17px;border-top:1px solid rgba(158,169,194,.4);box-shadow:0 -1px 0 #fff}
.card__grp>.label{margin-bottom:13px}
.card__grp>.label em{font-style:normal;color:var(--faint);text-transform:none;letter-spacing:.01em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.fact{display:block;padding:12px 16px;border-radius:12px;box-shadow:var(--well-sm);min-width:0}
.fact b{display:block;font-family:var(--display);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fact span{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.fact small{display:block;margin-top:3px;font-family:var(--body);font-size:12.5px;color:var(--faint)}
.fact.hot span{color:var(--orange-ink)}
.card ul{margin:0;padding:0 0 0 18px;font-size:15px;line-height:1.62;color:#2A2D36}
.card ul li+li{margin-top:6px}
.card .unchecked{margin-top:12px;padding:12px 16px;border-radius:12px;box-shadow:var(--well-sm);font-size:14.5px;line-height:1.5;color:var(--muted)}
.card .comps{display:grid;gap:8px;margin-top:12px}
.card .comp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:11px 16px;border-radius:12px;box-shadow:var(--well-sm);font-size:14.5px}
.card .comp i{flex:1;min-width:min(100%,180px);font-style:normal;color:#2A2D36}
.card .comp b{font-family:var(--display);font-weight:500;color:var(--ink)}
.card .comp small{font-size:12.5px;color:var(--faint)}
.card .foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:17px;border-top:1px solid rgba(158,169,194,.4);box-shadow:0 -1px 0 #fff}
.card .foot .label{margin-right:auto}

/* ---------- the library ---------- */
.searchbox{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.searchbox .fld{flex:1;min-width:min(100%,300px)}
.searchbox .gokey{margin-top:0;min-width:auto}
.props{display:grid;gap:12px;margin-top:var(--gap)}
.prop{display:block;padding:20px 22px;border-radius:18px;box-shadow:var(--raised-sm);transition:transform .35s var(--out),box-shadow .35s var(--out)}
.prop:hover{transform:translateY(-2px)}
.prop:active{transform:translateY(1px);box-shadow:var(--well-sm)}
.prop__t{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.prop__t h3{flex:1;min-width:min(100%,220px);font-family:var(--display);font-size:18px;letter-spacing:-.01em;line-height:1.25}
.prop__t .label{width:100%}
.prop .card{margin-top:18px}
.pill--st{flex-shrink:0;padding:7px 14px;border-radius:999px;box-shadow:var(--well-sm);font-family:var(--display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pill--st[data-st=ready]{color:var(--orange-ink)}
.empty{margin-top:var(--gap);padding:22px 26px;border-radius:18px;box-shadow:var(--well-sm);font-size:15.5px;line-height:1.55;color:#2A2D36}
.shelf{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.samplecard{margin-top:var(--gap);padding:clamp(18px,1.9vw,28px);border-radius:18px;box-shadow:var(--well)}
.samplemark{color:var(--faint)}

/* ---------- the reports under a property ---------- */
.reports{display:grid;gap:10px;margin-top:var(--gap)}
.report{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;border-radius:14px;box-shadow:var(--well-sm)}
.report .t{flex:1;min-width:min(100%,220px)}
.report .t b{display:block;font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.report .t small{font-size:13px;color:var(--faint)}
.dl{display:inline-flex;align-items:center;gap:11px;height:44px;padding:0 8px 0 20px;border-radius:999px;cursor:pointer;border:0;background:var(--g);color:var(--ink);
  font-family:var(--display);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--raised-sm);transition:transform .35s var(--out),box-shadow .35s var(--out),color .2s}
.dl b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:13px;font-weight:400;transition:background .2s,transform .45s var(--out)}
.dl:hover{transform:translateY(-2px);color:var(--orange-ink)} .dl:hover b{background:var(--orange);color:var(--ink)}
.dl:active{transform:translateY(1px);box-shadow:var(--well-sm)}

/* ---------- the sign out key in the header ---------- */
.nav .out{height:40px;display:flex;align-items:center;padding:0 16px;border-radius:999px;box-shadow:var(--raised-sm);
  font-family:var(--display);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:0;background:var(--g);color:var(--ink);
  transition:box-shadow .35s var(--out),color .2s}
.nav .out:hover{color:var(--orange-ink)} .nav .out:active{box-shadow:var(--well-sm)}

@media (max-width:980px){.tiers{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:minmax(0,1fr);gap:6px}
  .step__t{padding-top:0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .searchbox .gokey{width:100%}
}

/* ---------- the demo page's head row: a wide plate beside Nunu, and the violet plate's three facts ---------- */
.wide10{grid-column:1 / span 10}
.bring{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,1.8vw,34px);align-content:start}
.bring__h{font-family:var(--display);font-size:clamp(22px,2vw,34px);letter-spacing:-.025em;line-height:1.1;margin-top:14px;max-width:18ch}
.bring__p{font-size:15.5px;line-height:1.55;color:#2A2D36;max-width:60ch}
.bring__p+.bring__p{margin-top:12px}
.cloudbox .who--big{font-family:var(--display);font-size:clamp(26px,2.6vw,44px);line-height:1.12;letter-spacing:-.02em}
@media (max-width:1100px){.wide10{grid-column:1 / span 4} .bring{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.wide10{grid-column:1 / -1}}
.fact.full{grid-column:1 / -1}
.prop__t h3 a{transition:color .2s} .prop__t h3 a:hover{color:var(--orange-ink)}
.prop:hover{transform:none} .prop{transition:box-shadow .35s var(--out)}
.wants{display:grid;gap:10px;padding:14px 18px;border-radius:18px;box-shadow:var(--well-sm)}
.wants .check{font-size:14.5px}
.wants .check input:disabled+span{color:var(--muted)}

/* ---------- lean pages: demo, pricing, the library. Less display size, fewer capitals, shorter copy, and no
     numbered banners. The board is the same, it just speaks more quietly. ---------- */
body.lean .ph-head{min-height:0;gap:0}
body.lean .ph-head h1{font-size:clamp(27px,3vw,50px);letter-spacing:-.022em;line-height:1.04;max-width:17ch}
body.lean .ph-head .stand{margin-top:12px;font-size:15px;line-height:1.5;max-width:56ch;color:var(--muted)}
body.lean .ph-head .label{margin-bottom:16px}
body.lean .cloudbox{min-height:0}
body.lean .appcol+.appcol{margin-top:var(--gap)}
body.lean .foot2{padding-top:26px}

.sech{font-family:var(--display);font-size:clamp(17px,1.45vw,23px);letter-spacing:-.02em;line-height:1.2}
.sub{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:60ch}
.sech+.steps,.sech+.plainlist,.sech+.formgrid,.sech+.searchbox{margin-top:18px}
.sublead{margin-top:10px}

/* a plain run of short lines, where cells with headings would be too much furniture */
.plainlist{display:grid;gap:9px;margin-top:16px}
.plainlist div{padding:13px 18px;border-radius:12px;box-shadow:var(--well-sm);font-size:15px;line-height:1.5;color:#2A2D36}

/* The library as an index, and the recent searches under the search field: one quiet row per building, detail lives
   on the building's own page. The four cells take their columns from .rows by subgrid, so address, place, state and
   date line up all the way down the list. This used to be flex-wrap, which meant nothing lined up with anything and
   a row missing its state pill pulled its date leftward. Every row emits four cells even when one is empty: see
   cells() in js/app.js, which is the only place that builds them. */
/* the three columns on the right size to their own widest cell, so a library of long written dates and a list of
   short searched ones each get what they need; the address takes whatever is left */
.rows{display:grid;gap:8px;margin-top:16px;grid-template-columns:minmax(0,1fr) auto auto auto}
.row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;gap:8px 16px;padding:15px 18px;
  border-radius:14px;box-shadow:var(--well-sm);text-align:left;border:0;background:transparent;font:inherit;
  transition:box-shadow .3s var(--out),transform .3s var(--out)}
.row--again{cursor:pointer;width:100%}
.row:hover{box-shadow:var(--raised-sm);transform:translateY(-1px)}
.row .a{font-family:var(--display);font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.row .p{font-size:13.5px;color:var(--faint)}
.row .a,.row .p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .st{display:flex;min-width:0}          /* the cell stands whether or not there is a pill in it */
.row .d{font-size:13px;color:var(--faint);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  /* two columns and two lines: the address and its state on top, the place and the date underneath. Placed by hand
     rather than left to auto flow, which would put the state under the address and the place beside it. */
  .rows{grid-template-columns:minmax(0,1fr) auto}
  .row{gap:5px 12px}
  .row .a{grid-area:1 / 1} .row .st{grid-area:1 / 2;justify-content:flex-end}
  .row .p{grid-area:2 / 1} .row .d{grid-area:2 / 2}
}
/* the nav rules moved to home.css, which every page loads. See 'the key that only shows on a phone' there. */
body.lean .pricehead{grid-column:1 / -1}
body.lean .pricehead h1{max-width:none}
.cloudbox .backlink{color:#E4DBFD;box-shadow:inset 0 -1px 0 rgba(228,219,253,.4)}
/* with no plate beside it the head spans the board, and the plates under it line up with the same edges */
body.lean .appcol{max-width:none}
.ph-head.solo{grid-column:1 / -1}
/* the pricing head uses its width: the name on the left, the one line that matters on the right */
body.lean .pricehead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,1.8vw,34px);align-items:end}
body.lean .pricehead .stand{margin-top:0;padding-bottom:6px}
.pricenote a{color:var(--orange-ink);box-shadow:inset 0 -1px 0 rgba(255,77,0,.35)}
@media (max-width:820px){body.lean .pricehead{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ============================================================================================================
   THE SIGNED IN APP (app.html): three tabs on one board, the way a folder window works. Search is the main one
   and holds nothing but its field. Names are prefixed a- because .tabs, .tab and .panel are all taken by
   pages.css and .drop by home.css. The loading screen reuses .drop and #fly from the home page unchanged.
   ============================================================================================================ */
/* The tabs themselves are styled in css/home.css with the rest of the header, because that is where they live now. */

.apanel{grid-column:1 / -1}
.apanel[hidden]{display:none}

/* the main tab: one field in the middle of an otherwise empty board */
.asearch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  min-height:min(52vh,460px);padding:clamp(24px,4vw,60px) clamp(18px,3vw,40px);text-align:center}
.asearch h2{font-family:var(--display);font-size:clamp(22px,2.3vw,36px);letter-spacing:-.025em;line-height:1.1;max-width:18ch}
.asearch form{display:flex;flex-wrap:wrap;gap:12px;width:min(100%,680px);align-items:center}
.asearch input{flex:1;min-width:min(100%,260px);height:60px;border:0;border-radius:999px;padding:0 26px;background:var(--g);
  box-shadow:var(--well);font:16px/1.3 var(--body);color:var(--ink);transition:box-shadow .35s var(--out)}
.asearch input::placeholder{color:var(--faint);opacity:1}
.asearch input:focus{outline:none;box-shadow:var(--well),0 0 0 2px var(--violet)}
.asearch .gokey{margin-top:0;min-width:auto;height:60px}
.asearch .hintline{font-size:13.5px;color:var(--faint);max-width:52ch}


/* the library tab: filter keys, then the index */
.afilters{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.afilter{padding:9px 16px;border-radius:999px;border:0;cursor:pointer;background:var(--g);color:var(--muted);
  font-family:var(--display);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:var(--raised-sm);transition:box-shadow .3s var(--out),color .2s}
.afilter:hover{color:var(--ink)}
.afilter[aria-pressed=true]{box-shadow:var(--well-sm);color:var(--orange-ink)}
.afilter i{font-style:normal;color:var(--faint);margin-left:7px}
.afilter[aria-pressed=true] i{color:var(--orange-ink)}

/* pricing: the three cards narrower, and every row across them on the same line */
body.lean .tiers{max-width:1000px;margin-left:auto;margin-right:auto;grid-template-rows:auto auto auto 1fr auto}
body.lean .tier{grid-row:span 5;display:grid;grid-template-rows:subgrid;gap:14px;padding:clamp(18px,1.6vw,26px)}
@supports not (grid-template-rows: subgrid){
  body.lean .tier{display:flex;flex-direction:column}
}
@media (max-width:980px){body.lean .tiers{grid-template-rows:none} body.lean .tier{grid-row:auto;display:flex;flex-direction:column}}
/* the contact page: the same three card rhythm as pricing, aligned and narrower */
.reach{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap);
  max-width:1000px;margin-left:auto;margin-right:auto;grid-template-rows:auto auto 1fr}
.reach .tier{grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:14px;padding:clamp(18px,1.6vw,26px)}
.reach .gokey{margin-top:0;width:100%}
@supports not (grid-template-rows: subgrid){.reach .tier{display:flex;flex-direction:column}}
@media (max-width:980px){.reach{grid-template-columns:minmax(0,1fr);grid-template-rows:none} .reach .tier{grid-row:auto;display:flex;flex-direction:column}}
body.lean .pricehead--solo{grid-template-columns:minmax(0,1fr)}
#book{scroll-margin-top:96px}

/* ---------- short pages: the footer sits on the bottom of the screen ----------
   On the app, on contact and on pricing every row spans the board, so the board can be a flex column instead of the
   twelve column grid. The tray is then at least a screen tall and the footer takes the slack with margin-top:auto,
   which is the ordinary sticky footer: pinned when the page is short, scrolled past when it is long. Pages whose head
   row is two plates side by side (demo, a building) keep the grid, and are long enough not to need this. */
/* flow-root stops the header's top margin collapsing out through the body, which otherwise leaves the document 14px
   taller than the window and gives a short page a scrollbar it does not need */
body.lean:has(.stackboard){display:flow-root}
body.lean .tray:has(.stackboard){display:flex;flex-direction:column;min-height:calc(100dvh - 56px - var(--edge)*3)}
body.lean .stackboard{flex:1;display:flex;flex-direction:column}
body.lean .stackboard>.foot2{margin-top:auto;padding-top:34px}
/* the search tab takes the room, so its field stays in the middle of the screen rather than the middle of a short plate */
/* :not([hidden]) matters: an id beats .apanel[hidden]{display:none}, so without it the search panel stays on
   screen underneath the Library and Demo tabs */
/* min-height:0 matters as much as flex:1 here. A flex item's automatic minimum is its min-content height, and a grid
   with fr rows reports an intrinsic height of (tallest row's content) x (number of fr), so the plate's floor was the
   history counted twice over. Without this the panel refuses to shrink and the footer is pushed off the screen. */
body.lean .stackboard>#panel-search:not([hidden]){flex:1;display:flex;flex-direction:column}
body.lean .stackboard>#panel-search>.asearch{flex:1;min-height:0}   /* the flex row sets the height now, so its own floor would only push the footer off the screen */

/* Nunu's canvas waits in the document until js/aload.js moves it into #fly. Until then it must take no room, or the
   whole board is pushed down by a stray block element. The child selector stops matching the moment it is moved. */
body > canvas#nunu{display:none}

/* ---------- where the violet goes ----------
   Orange had taken every accent on these pages: the mark, the current link, the pressed tab, the pressed filter, the
   keys, the gap figure and Ready. Violet takes the half of that which is information rather than action, so the two
   accents divide the work instead of competing. Type only, except the one plate on Contact that is anodised whole.
   Never a tint, never a gradient, never both on one element. */

/* the three words a report is read in: the product's own vocabulary, marked wherever a card appears */
.card__grp>.label{color:var(--violet)}
.card__grp>.label em{color:var(--faint)}

/* what separates the three shapes on Pricing is how you are charged, so that is the label that carries the accent */
.tier .how b{color:var(--violet)}

/* two states worth telling apart at a glance: violet while we are working, orange when it is yours */
.pill--st[data-st=in_progress]{color:var(--violet)}

/* the run of steps on the demo page: the beats are information, the key underneath is the action */
.step__t{color:var(--violet)}

/* the key into the Atlas. Orange books a demo, violet signs you in: the two accents split the two doors as well */
.gokey--v{background:var(--violet);color:#fff;
  box-shadow:6px 6px 16px rgba(74,18,190,.34),-6px -6px 16px var(--hi),inset 0 1px 0 rgba(255,255,255,.28)}
.gokey--v b{background:#fff;color:var(--violet)}
.gokey--v:active{box-shadow:inset 4px 4px 9px rgba(50,8,140,.6),inset -4px -4px 9px rgba(134,82,255,.5)}
/* on a short page the cards sit in the middle of the slack rather than hard under the head with a dead band below */
body.lean .stackboard>.reach,body.lean .stackboard>.tiers{margin-top:auto;margin-bottom:auto}

/* ---------- pricing: three cards told apart by their headings ----------
   The plates stay slab, as every other plate on the site is. Each card's name is a pill in its own colour instead,
   which separates the three without anodising three whole plates side by side and without implying a ladder. Ink on
   orange, never white, as everywhere else. Scoped to .tiers so Contact's cards, which share .tier, keep plain headings. */
body.lean .tiers{gap:clamp(18px,2.3vw,34px)}
.tiers .tier{--pill:var(--ink);--pillink:#fff;--pillsh:rgba(21,23,28,.3)}
.tiers .tier--violet{--pill:var(--violet);--pillink:#fff;--pillsh:rgba(74,18,190,.34)}
.tiers .tier--orange{--pill:var(--orange);--pillink:var(--ink);--pillsh:rgba(201,58,0,.35)}
.tiers .tier h3{justify-self:start;display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;
  background:var(--pill);color:var(--pillink);font-size:clamp(16px,1.3vw,21px);letter-spacing:-.005em;line-height:1.1;
  box-shadow:4px 4px 10px var(--pillsh),-4px -4px 10px var(--hi),inset 0 1px 0 rgba(255,255,255,.35)}
.tiers .tier .how b{color:var(--pill)}
/* pricing and contact: head, cards, note and footer all sit in one column, so the page has a single left and right
   edge instead of a full width head over a narrower set of cards */
body.lean .stackboard.col>*{width:100%;max-width:1000px;margin-left:auto;margin-right:auto}

/* the footer rules moved to home.css, which every page loads.
   This file used to end with an orphan closing brace, which was harmless only while it was the last thing
   in it: the first rule appended after it was silently dropped by the parser. Removed 2026-09-24. */

/* ============================================================================================================
   THE ATLAS AS ONE SLAB (app.html, property.html). The header half of this is in css/home.css, beside the rest
   of the nav. Here is the board's half: it starts where the bar ends, with no gap and no top corners, and its
   sunk top edge is taken off so nothing draws a line across the join. The other three edges keep theirs, so the
   board is still a well, just one that begins under the bar. The rule is scoped by :has so only the pages that
   carry the Atlas header are affected.
   ============================================================================================================ */
body.lean:has(.nav--app) .tray{margin-top:0;border-radius:0 0 30px 30px}
/* one screen, recomputed: the gap between bar and board is gone, so there are two edges to pay for now, not three
   (the bar's top margin and the board's bottom margin). Leave it at three and the slab finishes short of the fold. */
body.lean:has(.nav--app) .tray:has(.stackboard){min-height:calc(100dvh - 56px - var(--edge)*2)}
body.lean:has(.nav--app) .tray::after{border-radius:inherit;
  /* the ring is drawn on three sides instead of four: a single inset 0 0 0 1px would run a hairline across the join */
  box-shadow:inset 1px 0 0 rgba(158,169,194,.25),inset -1px 0 0 rgba(158,169,194,.25),inset 0 -1px 0 rgba(158,169,194,.25);
  background:linear-gradient(to right,rgba(158,169,194,.5),rgba(158,169,194,0)) left / 30px 100% no-repeat,
    linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0)) right / 30px 100% no-repeat,
    linear-gradient(to top,rgba(255,255,255,.95),rgba(255,255,255,0)) bottom / 100% 30px no-repeat}

/* Inside the folder there are no separate cards. The panel plates lose their raised edge and their corners and
   become the folder's own paper, so nothing draws a boundary across the slab above the footer, and the footer sits
   on the same sheet as the tab. The well around it all is the tray, which keeps its three edges. */
body.lean:has(.nav--app) .apanel>.plate{box-shadow:none;border-radius:0;background:transparent}
body.lean:has(.nav--app) .foot2 .base{border-top:0;box-shadow:none}