/* copied from PRODUCTS/UnitGuideDemo_v2.0/site/site13.css (link 63); inline images moved to /shared/img/ */
/* site13.css - what version 1.3 changes in the look of the Baseera site (link 31).
   Loaded after site.css, so it wins where the two meet. Fewer boxes: open layouts, hairlines
   between things rather than frames around them. */

/* ------------------------------------------------------------ a page, without the ticked sheet */
html.dl .page13{position:relative}
html.dl .page13 > h1{margin-block:.2rem .6rem}

/* ------------------------------------------------------------ header: the questions basket */
html.dl .navlink--basket{border:1px dashed var(--cobalt-200)}
html.dl .navlink--basket.is-on{border-style:solid}

/* ------------------------------------------------------------ home */
html.dl .home13__hero{padding-block:clamp(2rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem)}
html.dl .home13__herogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
html.dl .home13__h1{margin-block:.3rem .8rem;font-size:clamp(2.8rem,6.6vw,5rem)}
html.dl .home13__lede{max-inline-size:36rem;font-size:clamp(1.05rem,1.6vw,1.22rem)}
html.dl .home13__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-block:1.4rem .4rem}
html.dl .home13__start{min-inline-size:9rem;text-align:center}
html.dl .home13__note{font-size:.84rem;color:var(--muted);max-inline-size:18rem}
html.dl .home13__havep{margin:.9rem 0 0}
html.dl .home13__have{font-size:.92rem}
html.dl .home13__warn{margin-block-start:1rem}

html.dl .home13__sample{margin:0;padding:1.1rem 1.2rem 1rem;border-inline-start:3px solid var(--cobalt);background:var(--porcelain-2)}
html.dl .home13__samplek{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-400);margin:0 0 .7rem}
html.dl[lang="ar"] .home13__samplek{font-family:var(--font-ar);letter-spacing:0;font-size:.8rem}
html.dl .home13__line{display:grid;grid-template-columns:5.6rem minmax(0,1fr);align-items:baseline;gap:.6rem;margin:0 0 .65rem;font-size:.95rem;line-height:1.5}
html.dl .home13__line .epi{justify-self:start}
html.dl .home13__samplenote{margin-block-start:.4rem;font-size:.74rem;color:var(--muted)}

html.dl .home13__band{padding-block:clamp(1.8rem,4.5vw,3.2rem);border-block-start:1px solid var(--rule)}
html.dl .home13__h2{margin:0 0 .5rem}
html.dl .home13__sub{margin:0 0 1.4rem;color:var(--muted);max-inline-size:40rem}

html.dl .home13__steps{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.4rem);counter-reset:none}
html.dl .home13__step{position:relative;padding-block-start:3.3rem}
html.dl .home13__step::before{content:"";position:absolute;inset-inline:3rem 0;inset-block-start:1.35rem;border-block-start:1px solid var(--cobalt-200)}
html.dl .home13__step:last-child::before{display:none}
html.dl .home13__num{position:absolute;inset-block-start:0;inset-inline-start:0;font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--cobalt)}
html.dl .home13__stepH{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 .45rem}
html.dl .home13__stepP{margin:0;color:#3A3E46;line-height:1.6}

html.dl .home13__gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
html.dl .home13__get{padding-inline:clamp(.8rem,2vw,1.6rem);border-inline-start:1px solid var(--rule)}
html.dl .home13__get:first-child{padding-inline-start:0;border-inline-start:0}
html.dl .home13__get h3{font-size:1.35rem;margin:0 0 .4rem}
html.dl .home13__get p{margin:0 0 .6rem;line-height:1.6}

html.dl .home13__promise{background:var(--porcelain-2);border-block:1px solid var(--rule);padding-block:clamp(2rem,5vw,3.4rem);margin-block-start:clamp(1rem,3vw,2rem)}
html.dl .home13__never{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem clamp(1.2rem,4vw,3rem)}
html.dl .home13__never li{padding-block-start:.9rem;border-block-start:1px solid var(--cobalt-200)}
html.dl .home13__neverH{font-family:var(--font-display);font-size:1.38rem;line-height:1.2;color:var(--cobalt);margin:0 0 .35rem}
html.dl[lang="ar"] .home13__neverH{font-family:var(--font-ar-display);font-size:1.4rem}
html.dl .home13__neverP{margin:0;line-height:1.6;color:#3A3E46}

/* ------------------------------------------------------------ before you skip the questions */
html.dl .exw{border-inline-start:3px solid var(--cobalt);padding:.9rem 1.1rem 1rem;background:var(--porcelain-2)}
html.dl .exw__h{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:0 0 .3rem}
html.dl .exw__lede{margin:0 0 .6rem}
html.dl .exw__list{margin:0 0 .9rem;padding-inline-start:1.2rem;display:grid;gap:.5rem}
html.dl .exw__r{line-height:1.55}
html.dl .exw__rh{color:var(--cobalt)}
html.dl .exw__acts{display:flex;flex-wrap:wrap;gap:.6rem}
html.dl .exw__btn{flex:1 1 13rem;text-align:center}

/* ------------------------------------------------------------ footer: participating firms */
html.dl .sitefoot__in{gap:1.1rem}
html.dl .fstrip{display:grid;gap:.6rem;padding-block-end:.9rem;border-block-end:1px solid var(--rule)}
html.dl .fstrip__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem}
html.dl .fstrip__k{margin:0;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
html.dl[lang="ar"] .fstrip__k{font-family:var(--font-ar);letter-spacing:0;font-size:.85rem;font-weight:600}
html.dl .fstrip__note{margin:0;font-size:.76rem;color:var(--muted)}
html.dl .fstrip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
html.dl .flogo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.5rem;align-items:center;color:var(--cobalt-500)}
html.dl .flogo__mark{grid-row:1 / span 2}
html.dl .flogo__name{font-size:.86rem;font-weight:600;color:var(--cobalt-500);line-height:1.2}
html.dl .flogo__tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html.dl[lang="ar"] .flogo__tag{font-family:var(--font-ar);letter-spacing:0;font-size:.7rem}
html.dl .fstrip__more{margin:0;font-size:.76rem;color:var(--muted)}
html.dl .sitefoot__lines{display:grid;gap:.25rem}

/* ------------------------------------------------------------ evaluate, basket */
html.dl .ev13__box{margin-block:1.2rem}
html.dl .ev13__better{font-size:.9rem;color:var(--muted)}
html.dl .bk__unit{font-size:1.2rem;margin:1.2rem 0 .4rem}
html.dl .bk__list{margin:0;padding-inline-start:1.3rem;display:grid;gap:.4rem}
html.dl .bk__q{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
html.dl .bk__acts{margin-block-start:1.2rem}

/* ------------------------------------------------------------ phone */
@media (max-width:52rem){
  html.dl .home13__herogrid{grid-template-columns:minmax(0,1fr)}
  html.dl .home13__steps,html.dl .home13__gets,html.dl .home13__never{grid-template-columns:minmax(0,1fr)}
  html.dl .home13__step::before{display:none}
  html.dl .home13__get{padding-inline:0;border-inline-start:0;border-block-start:1px solid var(--rule);padding-block-start:.9rem}
  html.dl .home13__get:first-child{border-block-start:0;padding-block-start:0}
}

/* ------------------------------------------------------------ the Unit Guide: one map beside the cards */
html.dl .g13{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2.6vw,2.4rem);align-items:start;margin-block-start:1.2rem}
html.dl .g13__cards{min-inline-size:0;display:grid;gap:1rem}
html.dl .g13__after{display:grid;gap:.3rem}

html.dl .gstage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.5rem;z-index:20;background:var(--porcelain)}
html.dl .gstage__frame{position:relative;overflow:hidden;border:1px solid var(--cobalt);background:#F4F0E5;min-block-size:14rem}
html.dl .gstage__map{position:absolute;inset:0;transition:transform 420ms cubic-bezier(.16,.62,.24,1),opacity 420ms cubic-bezier(.16,.62,.24,1)}
html.dl .bmap__canvas{display:block}
html.dl .gstage__frame[data-scene="plate"] .gstage__map{transform:scale(.94);opacity:.45}
html.dl .gstage__plate{position:absolute;inset:auto 0 0 0;max-block-size:92%;overflow:auto;background:var(--porcelain-2);border-block-start:2px solid var(--cobalt);padding:1rem 1.1rem;
  animation:plate-rise 420ms cubic-bezier(.16,.62,.24,1)}
@keyframes plate-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
html.dl .gstage__nomap{position:absolute;inset:auto 0 0 0;margin:0;padding:.6rem .8rem;font-size:.84rem;color:var(--muted)}
html.dl .gstage__cap{display:grid;gap:.2rem;font-size:.86rem;line-height:1.5}
html.dl .gstage__capmain{margin:0;color:var(--ink)}
html.dl .gstage__capmain.is-in{animation:cap-in 420ms cubic-bezier(.16,.62,.24,1)}
@keyframes cap-in{from{opacity:0}to{opacity:1}}
html.dl .gstage__capline{display:block;color:#3A3E46}
html.dl .gstage__proto{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt);border:1px dashed var(--cobalt-200);padding:0 .3rem}
html.dl[lang="ar"] .gstage__proto{font-family:var(--font-ar);letter-spacing:0;font-size:.78rem}
html.dl .gstage__later{margin:0;color:var(--muted);font-size:.82rem;border-inline-start:2px dashed var(--cobalt-200);padding-inline-start:.5rem}
html.dl .gstage__src{margin:0;color:var(--muted);font-size:.72rem}

/* the bar: one line, as wide as the map; opens to all six */
html.dl .gbar{position:relative;z-index:30}
html.dl .gbar__now{display:flex;align-items:baseline;gap:.55rem;inline-size:100%;text-align:start;background:var(--porcelain-2);border:1px solid var(--cobalt);padding:.5rem .8rem;cursor:pointer;font:inherit;color:var(--cobalt)}
html.dl .gbar__now .gbar__name{font-weight:600;flex:1;min-inline-size:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.dl .gbar__no{font-family:var(--font-mono);font-size:.74rem;color:var(--cobalt-400)}
html.dl .gbar__of{font-size:.74rem;color:var(--muted);white-space:nowrap}
html.dl .gbar__chev{font-size:.8rem;transition:transform 240ms}
html.dl .gbar__list{list-style:none;margin:0;padding:.3rem 0;position:absolute;inset-inline:0;inset-block-start:100%;background:var(--porcelain-2);border:1px solid var(--cobalt);border-block-start:0;
  display:none;box-shadow:var(--shadow-2)}
html.dl .gbar:hover .gbar__list,html.dl .gbar:focus-within .gbar__list,html.dl .gbar.is-open .gbar__list{display:block}
html.dl .gbar:hover .gbar__chev,html.dl .gbar.is-open .gbar__chev{transform:rotate(180deg)}
html.dl .gbar__item{display:flex;gap:.55rem;align-items:baseline;inline-size:100%;text-align:start;background:none;border:0;padding:.42rem .8rem;font:inherit;color:var(--ink);cursor:pointer}
html.dl .gbar__item:hover,html.dl .gbar__item:focus-visible{background-image:var(--hatch-1)}
html.dl .gbar__item[aria-current="true"]{color:var(--cobalt);font-weight:600;box-shadow:inset 3px 0 0 var(--cobalt)}
html.dl[dir="rtl"] .gbar__item[aria-current="true"]{box-shadow:inset -3px 0 0 var(--cobalt)}

/* the plates that rise over the map */
html.dl .gplate__k,html.dl .gbasket__k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt);margin:0 0 .5rem}
html.dl[lang="ar"] .gplate__k,html.dl[lang="ar"] .gbasket__k{font-family:var(--font-ar);letter-spacing:0;font-size:.82rem}
html.dl .gplate__line{margin:0 0 .4rem}

/* what the listing leaves open: one place, at the end */
html.dl .gleft{border-block-start:2px solid var(--cobalt);padding-block-start:1rem}
html.dl .gleft__h{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:0 0 .3rem}
html.dl .gleft__st{margin-block:.6rem}

/* desktop: map and cards share the width; the map stays while the cards scroll */
@media (min-width:60rem){
  html.dl .g13{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.dl .gstage{position:sticky;inset-block-start:calc(var(--topbar-h,4rem) + .8rem);block-size:calc(100vh - var(--topbar-h,4rem) - 1.6rem)}
  html.dl .gsec{scroll-margin-block-start:calc(var(--topbar-h,4rem) + 1.2rem)}
}
/* phone: the map on top, sticky, two-fifths of the screen; the cards beneath */
@media (max-width:59.99rem){
  html.dl .gstage{position:sticky;inset-block-start:var(--topbar-h,3.2rem);grid-template-rows:auto 34vh auto;padding-block:.3rem;margin-inline:-.2rem;box-shadow:0 6px 10px -8px rgba(18,48,106,.35)}
  html.dl .gstage__src{display:none}
  html.dl .gstage__cap{font-size:.78rem;max-block-size:4.4rem;overflow:auto}
  html.dl .gbar__of{display:none}
  html.dl .gsec{scroll-margin-block-start:calc(var(--topbar-h,3.2rem) + 34vh + 8.5rem)}
}

/* ------------------------------------------------------------ the questions, the painting, the dossier */
html.dl .dsc__warn{margin-block:.8rem}
html.dl .pp{display:grid;gap:.7rem}
html.dl .pp__h{margin:0}
html.dl .pp__lede{margin:0;max-inline-size:42rem}
html.dl .pp__areas{justify-self:start}
html.dl .pp__frame{position:relative;border:1px solid var(--cobalt);background:#F4F0E5;block-size:min(62vh,34rem);overflow:hidden}
html.dl .pp__map{position:absolute;inset:0;cursor:crosshair}
html.dl .pp__under{display:grid;gap:.35rem}
html.dl .pp__legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.84rem}
html.dl .pp__legend li{display:flex;align-items:center;gap:.4rem}
html.dl .pp__swatch{display:inline-block;inline-size:1.1rem;block-size:.8rem;border:1px solid rgba(18,48,106,.55)}
html.dl .pp__count{margin:0;font-weight:600;color:var(--cobalt)}
html.dl .pp__line{margin:0;font-size:.9rem}
html.dl .pp__private{margin:0;font-size:.82rem;color:var(--muted);border-inline-start:2px dashed var(--cobalt-200);padding-inline-start:.6rem;max-inline-size:44rem}
html.dl .pp__acts{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}

html.dl .dos__lede{max-inline-size:44rem}
html.dl .dos__said{display:grid;gap:.4rem;padding-block:.6rem;border-block:1px solid var(--rule);margin-block:.8rem 1.2rem}
html.dl .dos__saidk{margin:0;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
html.dl[lang="ar"] .dos__saidk{font-family:var(--font-ar);letter-spacing:0;font-size:.85rem;font-weight:600}
html.dl .dos__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
html.dl .dos__acts{margin:0;font-size:.88rem}
html.dl .dos__places{margin:0 0 1rem}
html.dl .dos__group{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:1.4rem 0 .7rem}
html.dl .dos__because{margin:.35rem 0 0;font-size:.84rem;line-height:1.5;color:var(--cobalt-500);border-block-start:1px dashed var(--cobalt-200);padding-block-start:.35rem}
html.dl .dos__because--differs{color:#3A3E46}
html.dl .dos__foot{margin-block-start:1.2rem}
html.dl .dsc__slot--wide{max-inline-size:none}
html.dl .dsc__slot--wide .pp{scroll-margin-block-start:calc(var(--topbar-h,4rem) + .6rem)}

/* ------------------------------------------------------------ Manage my Expectations */
html.dl .ex13__intro{max-inline-size:none}
html.dl .ex13__list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1.4rem}
html.dl .ex13__item{padding-block-start:1rem;border-block-start:1px solid var(--cobalt-200);display:grid;gap:.55rem}
html.dl .ex13__statement{margin:0;font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.3;color:var(--cobalt)}
html.dl[lang="ar"] .ex13__statement{font-family:var(--font-ar-display)}
html.dl .ex13__fact{margin:0;font-size:.9rem}
html.dl .ex13__opts{display:flex;flex-wrap:wrap;gap:.45rem}
html.dl .ex13__opt{padding:.45rem .8rem}
html.dl .ex13__pre{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-400);font-weight:400}
html.dl[lang="ar"] .ex13__pre{font-family:var(--font-ar);letter-spacing:0;font-size:.7rem}
html.dl .ex13__basis{margin:0;font-size:.8rem;color:var(--muted)}
html.dl .ex13__acts{margin-block-start:1.4rem}
html.dl .ex13__after{border-inline-start:3px solid var(--cobalt);padding:.5rem .8rem;background:var(--porcelain-2)}
