/* TestMind — shared styles for every page.
   Self-hosted fonts: the site makes no third-party request at all. */
@font-face{font-family:'Bitter';src:url('fonts/bitter.woff2') format('woff2');
           font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');
           font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* Naseeb Edu palette: warm cream ground, bronze primary, gold accent. The
     variable names are kept (--lazur / --zar) because they are referenced in
     ~60 places; only the values moved. */
  --lazur:#8A6A3F; --lazur-deep:#6B5230; --ink:#2B2620; --paper:#F4F0E8;
  --card:#FDFCF9; --line:#E3DCCC; --zar:#C9A961; --muted:#6E6558;
  --display:'Bitter', Georgia, serif; --body:'Inter','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Russian and English produce single words far longer than any Uzbek one —
   «Конфиденциальность» is 340px in an h1 box 316px wide on a 360px phone, and
   with no break opportunity it pushes the whole page sideways. Headings and
   prose may break inside a word rather than scroll the document. */
h1,h2,h3,h4,p,li,summary,.factl,.ftname,.cname{overflow-wrap:break-word}
body{margin:0;background:var(--card);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1340px;margin:0 auto;padding:0 22px}
a{color:var(--lazur-deep)}
img,svg{max-width:100%}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;border-radius:10px;padding:12px 22px;font:inherit;
     font-weight:600;cursor:pointer;background:var(--lazur);color:#fff;text-decoration:none;
     transition:background .15s ease,transform .12s ease}
.btn:hover{background:var(--lazur-deep)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--zar);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--lazur-deep);border:1px solid var(--line)}
.btn.ghost:hover{background:#F0EADD;border-color:var(--lazur)}
.btn.sm{padding:9px 16px;font-size:14.5px}
.btn.big{padding:16px 34px;font-size:18px;border-radius:12px}
.btn[disabled]{background:#CFC5B2;cursor:not-allowed}

/* ---------- nav ---------- */
/* Visually hidden, still read aloud. The back link shows the brand name only,
   because "Naseeb Edu" is the same word in all three languages and stays narrow
   on a phone; the sentence that says what the link does goes here instead. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* TestMind sits on a subdomain of naseebedu.com; this is the route back to the
   parent platform. Left of the brand, because that is where a back control is
   looked for. Shaped like the language switcher so the bar reads as two pills
   around the wordmark rather than three unrelated controls. */
.navback{display:inline-flex;align-items:center;gap:5px;flex:none;
          padding:5px 10px 5px 7px;border:1px solid var(--line);border-radius:999px;
          background:var(--card);font-size:13px;line-height:1.4;color:var(--muted);
          text-decoration:none;white-space:nowrap}
.navback svg{flex:none}
.navback:hover{color:var(--lazur-deep);background:#F0EADD}
.navback:focus-visible{outline:3px solid var(--zar);outline-offset:2px}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
     backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.navin{display:flex;align-items:center;gap:18px;height:62px}
.brand{font-family:var(--display);font-weight:700;font-size:23px;color:var(--lazur-deep);
       text-decoration:none;white-space:nowrap}
.navlinks{display:flex;gap:22px;margin-left:auto}
.navlinks a{font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap;
            padding:4px 0;border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--lazur-deep)}
.navlinks a[aria-current="page"]{color:var(--lazur-deep);font-weight:600;
                                 border-bottom-color:var(--lazur)}

/* Language switcher. Three short codes rather than a dropdown, because the whole
   control is then one tap on a phone and needs no JavaScript at all. */
.langsw{display:flex;align-items:center;gap:2px;flex:none;
        border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--card)}
.langsw a,.langsw span{padding:3px 9px;border-radius:999px;font-size:12.5px;
        font-weight:600;letter-spacing:.03em;line-height:1.55;text-decoration:none;
        color:var(--muted);white-space:nowrap}
.langsw a:hover{color:var(--lazur-deep);background:#F0EADD}
.langsw a:focus-visible{outline:3px solid var(--zar);outline-offset:2px}
.langsw [aria-current="true"]{background:var(--lazur-deep);color:#fff}

@media (max-width:820px){
  /* Measured at 360px with the back link in: brand + back + switcher + CTA came
     to 391px in a 360px row. The width is taken off four things a little rather
     than off one thing a lot -- gap 10>6, brand 23>20, and a point each off the
     switcher and CTA padding -- which lands it back under with room to spare.
     Uzbek is the binding case; its CTA is the longest of the three. */
  .navin{gap:6px;height:auto;padding:10px 0;flex-wrap:wrap}
  .brand{font-size:20px}
  .navlinks{order:3;flex:1 1 100%;margin-left:0;gap:16px;overflow-x:auto;
            padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .navlinks a{font-size:14.5px}
  /* navlinks drops to its own row, so the switcher takes over pushing the CTA
     to the right edge of the first row. Brand + switcher + CTA have to share
     360px: at the desktop sizes the CTA wrapped to a row of its own and made
     the sticky header 153px tall, which is a quarter of a small phone screen.
     navcheck.js asserts they stay on one row. */
  /* Label off, chevron only — brand + back + switcher + CTA do not fit at 360px
     with the words in. The link keeps its name from the hidden span, so this is
     an icon with a label, not a bare glyph. */
  .backtx{display:none}
  .navback{padding:5px 7px}
  .langsw{margin-left:auto;padding:1px;gap:1px}
  .langsw a,.langsw span{padding:5px 6px;font-size:11.5px}
  .navin .btn{margin-left:0}
  .navin .btn.sm{padding:9px 11px;font-size:13.5px}
}

/* ---------- page header ---------- */
.phead{background:linear-gradient(180deg,#EFE9DC 0%,#F4F0E8 100%);
       border-bottom:1px solid var(--line);padding:52px 0 46px;text-align:center}
.phead h1{margin:0 0 12px}
.phead .lead{margin:0 auto;max-width:640px}

/* ---------- typography ---------- */
h1{font-family:var(--display);font-weight:700;font-size:clamp(29px,5.6vw,46px);
   line-height:1.14;margin:0 0 16px;letter-spacing:-.3px}
h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,3.8vw,32px);
   margin:0 0 10px;line-height:1.22}
h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0 0 6px}
.lead{color:var(--muted);margin:0 0 34px;font-size:17px;max-width:640px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
section{padding:60px 0}
.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- alternating explainer panels ---------- */
.panel{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.panel + .panel{margin-top:64px}
.panel .ptext h2{margin-bottom:12px}
.panel .ptext p{color:var(--muted);margin:0 0 20px;font-size:16.5px}
.ptag{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.5px;
      text-transform:uppercase;color:var(--lazur-deep);background:#EFE7D8;
      border-radius:99px;padding:5px 13px;margin-bottom:14px}
.part{background:var(--paper);border:1px solid var(--line);border-radius:18px;
      padding:18px;display:flex;align-items:center;justify-content:center}
.part svg{display:block;width:100%;height:auto}
.panel.flip .ptext{order:2}
.panel.flip .part{order:1}
@media (max-width:800px){
  .panel{grid-template-columns:1fr;gap:22px}
  .panel.flip .ptext{order:1}
  .panel.flip .part{order:2}
}

/* ---------- fact strip (real product facts, never invented usage numbers) ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.fact{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--lazur);
      border-radius:12px;padding:20px 18px;text-align:center}
.fact:nth-child(2){border-top-color:var(--zar)}
.fact:nth-child(3){border-top-color:#237A5E}
.fact:nth-child(4){border-top-color:#6B4FA8}
.factn{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,34px);
       line-height:1.1;color:var(--ink)}
.factl{font-size:13.5px;color:var(--muted);margin-top:6px}

/* ---------- character gallery ---------- */
.fam{margin-bottom:38px}
.famhead{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;
         padding-bottom:10px;border-bottom:2px solid var(--famc)}
.famname{font-family:var(--display);font-weight:700;font-size:21px;color:var(--famc);margin:0}
.famnote{font-size:14px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:14px;
       overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
.ccard:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(15,110,140,.10)}
.cart{background:var(--famsoft);padding:14px 10px 0}
.cart svg{display:block;width:clamp(92px,44%,118px);height:auto;margin:0 auto}
.cbody{padding:13px 15px 17px}
.cname{font-family:var(--display);font-weight:700;font-size:clamp(15px,3.6vw,17px);
       color:var(--famc);margin:0 0 5px;line-height:1.25}
.cline{font-size:13.5px;color:var(--ink);margin:0 0 8px;line-height:1.45}
.cstr{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45}
.cwatch{font-size:13px;color:#7A5C22;background:#FBF3E4;border-radius:8px;
        padding:8px 10px;margin:9px 0 0;line-height:1.45}
.cfig{font-size:12.5px;color:var(--muted);margin:9px 0 0;padding-top:9px;
      border-top:1px solid var(--line)}
.cfig b{color:var(--famc);font-weight:600}

/* ---------- steps / why cards ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.stepn{width:38px;height:38px;border-radius:50%;background:var(--lazur);color:#fff;
       display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
       margin-bottom:14px}
.step p{margin:0;color:var(--muted);font-size:15px}
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.wcard{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--card)}
.wcard h3{font-size:17px;color:var(--lazur-deep)}
.wcard p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- faq ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--card);
             padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;color:var(--lazur);font-weight:700;
                    font-size:20px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq summary:focus-visible{outline:2px solid var(--zar);outline-offset:3px;border-radius:4px}
.faq p{margin:12px 0 0;color:var(--muted);font-size:15px}

/* ---------- closing band ---------- */
/* Said before the click, not after it: on the Russian and English pages the test
   button leads to a test that is only in Uzbek. */
.testlang{max-width:560px;margin:22px auto 0;font-size:13.5px;line-height:1.55;
          color:#D6C9AE}
.fnote{color:var(--muted);font-size:12.5px;white-space:nowrap}

.close{text-align:center;background:var(--lazur-deep);color:#fff;padding:60px 20px}
.close h2{color:#fff;margin-bottom:12px}
.close p{color:#DCD2BE;margin:0 0 26px;font-size:17px}
.close .btn{background:#fff;color:var(--lazur-deep)}
.close .btn:hover{background:#F2ECE0}
/* `.close p` above resets the margin outright, which also throws away the
   `auto` in .testlang and left the 560px note flush against the left edge of a
   1300px section on every ru/ and en/ page. Same specificity, so the fix has to
   sit after it, not next to .testlang. */
.close .testlang{margin:22px auto 0}

/* ---------- footer ---------- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:44px 0 30px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px}
.footcol h2{font-family:var(--display);font-weight:600;font-size:15px;margin:0 0 12px;line-height:1.3;
            color:var(--ink)}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol li{margin-bottom:4px}
/* The contact address is one 24-character word with no break opportunity.
   inline-block + padding gives every footer link a >=24px tap target on a phone;
   at 17px they were below what a thumb reliably hits. */
.footcol a{display:inline-block;padding:4px 0;font-size:14.5px;color:var(--muted);
           text-decoration:none;overflow-wrap:anywhere}
.footcol a:hover{color:var(--lazur-deep);text-decoration:underline}
.footbar{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
         display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
         font-size:13px;color:var(--muted)}
.footbar a{color:var(--muted)}
.socrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.soc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
     border-radius:50%;background:var(--lazur);color:#fff;flex:0 0 auto}
.soc svg{width:20px;height:20px;display:block}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ---------- individual archetype page ---------- */
.ahero{background:var(--famsoft);border-bottom:1px solid var(--line);padding:34px 0 0}
.ahin{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:28px;align-items:end}
.aart svg{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}
.ameta{padding-bottom:34px}
.afam{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.6px;
      text-transform:uppercase;color:#fff;background:var(--fam);border-radius:99px;
      padding:4px 13px;text-decoration:none;margin-bottom:12px}
.ameta h1{color:var(--fam);margin:0 0 12px}
.alead{font-size:16.5px;line-height:1.55;margin:0 0 8px;max-width:56ch}
@media (max-width:720px){
  .ahin{grid-template-columns:1fr;gap:6px;text-align:center}
  .ameta{padding-bottom:26px}
  .alead{margin-left:auto;margin-right:auto}
  .aart svg{max-width:180px}
}
.abox{border-radius:12px;padding:16px 18px;margin-bottom:12px}
.abox h2{font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin:0 0 6px;
         font-family:var(--body);font-weight:700}
.abox p{margin:0;font-size:16px;line-height:1.5}
.abox.strong{background:var(--famsoft)}
.abox.strong h2{color:var(--fam)}
.abox.warn{background:#FBF3E4;border:1px solid #EBDCBB}
.abox.warn h2{color:#8A6520}
.asec{margin:34px 0 10px}
.amuted{color:var(--muted);font-size:15px}
.afig{border-left:3px solid var(--fam);padding:4px 0 4px 16px;margin:12px 0 0}
.afigwho{font-family:var(--display);font-weight:700;font-size:19px;color:var(--fam)}
.afigwho span{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--muted);margin-left:6px}
.afig p{margin:6px 0 0;color:var(--muted);font-size:15px}
/* The PDF guide offer on an archetype page. Wraps to a column on a phone so
   the button never gets squeezed next to the text. */
.aguide{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px;
        background:var(--famsoft,#F0EADD);border-radius:14px;padding:18px 20px}
.aguide>div{flex:1 1 260px;min-width:0}
.aguide b{font-size:16px}
.aguide p{margin:6px 0 0}
.aguide .btn{background:var(--fam);white-space:nowrap}
.aguide .btn:hover{filter:brightness(.92)}
.sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px}
.sib{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
     border-radius:12px;padding:12px 10px;text-align:center;transition:transform .16s ease,box-shadow .16s ease}
.sib:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(15,110,140,.10)}
.sibart svg{display:block;width:84px;height:auto;margin:0 auto}
.sibname{display:block;margin-top:8px;font-family:var(--display);font-weight:600;
         font-size:14.5px;color:var(--fam)}
/* gallery cards become links */
a.ccard{display:block;text-decoration:none;color:inherit}

/* ---------- open-data tables ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0 18px;
         border:1px solid var(--line);border-radius:12px}
table.dt{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
table.dt th{text-align:left;background:var(--paper);font-weight:600;font-size:13px;
            letter-spacing:.3px;text-transform:uppercase;color:var(--muted);
            padding:10px 14px;border-bottom:1px solid var(--line)}
table.dt td{padding:9px 14px;border-bottom:1px solid #F1EBDF;vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt td.num{color:var(--muted);width:44px;font-variant-numeric:tabular-nums}
table.dt td.tr{white-space:nowrap;width:150px}
table.dt td.tr b{color:var(--lazur-deep)}
.rev{display:inline-block;font-size:11.5px;background:#F3E7D4;color:#8A6520;
     border-radius:99px;padding:2px 8px;margin-left:4px}
code{background:var(--paper);border:1px solid var(--line);border-radius:5px;
     padding:1px 6px;font-size:14px}

/* ---------- research consent (asked once, after the result) ---------- */
.rsch{background:var(--card);border:1px solid var(--line);border-radius:14px;
      padding:20px;margin-bottom:16px}
.rsch h3{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 6px}
.rsch p{margin:0 0 14px;font-size:14.5px;color:var(--muted);line-height:1.5}
.rschbtns{display:flex;gap:10px;flex-wrap:wrap}
.rschdone{display:flex;gap:10px;align-items:flex-start}
.rschdone .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#237A5E;
                color:#fff;display:flex;align-items:center;justify-content:center;
                font-size:15px;font-weight:700}

/* ---------- printable parent letter ---------- */
.letter{background:var(--card);border:1px solid var(--line);border-radius:14px;
        padding:34px 38px;font-size:15.5px;line-height:1.7}
.letter p{margin:0 0 14px}
.lt-to{font-weight:600}
.lt-sign{display:flex;gap:40px;flex-wrap:wrap;margin:26px 0 6px;font-size:14px;color:var(--muted)}
.lt-line{display:block;width:190px;border-bottom:1px solid #C0B49C;margin-bottom:5px;height:22px}
.lt-hr{border:0;border-top:1px dashed #D3C9B4;margin:26px 0 18px}
.lt-small{font-size:14.5px}
@media print{
  .noprint,.nav,.foot,.close{display:none !important}
  body{background:#fff;font-size:12pt}
  section{padding:0}
  .wrap{max-width:none;padding:0}
  .letter{border:0;border-radius:0;padding:0;font-size:12pt;line-height:1.55}
  .lt-line{border-bottom:1px solid #444}
}

/* ---------- rovoq: arch-topped cards ---------- */
/* A shallow arch on the top edge of a card, echoing the pishtoq of a madrasa.
   Applied only to the card families, so it reads as a motif and not as noise. */
.ccard{border-radius:26px 26px 14px 14px;border-top:3px solid var(--famc)}
.step,.wcard{border-radius:24px 24px 14px 14px;border-top:3px solid var(--lazur)}
.fact{border-radius:22px 22px 12px 12px}
.faq details{border-radius:20px 20px 12px 12px}
.letter{border-radius:26px 26px 14px 14px;border-top:3px solid var(--lazur)}
.abox{border-radius:20px 20px 12px 12px}
.sib{border-radius:22px 22px 12px 12px;border-top:3px solid var(--fam)}

/* ---------- hero scene ---------- */
/* The scene is drawn with preserveAspectRatio="slice": it is deliberately larger
   than its box so the characters stay big on a phone instead of shrinking. That
   only works if the box CLIPS it - without overflow:hidden it paints over the
   section below. */
.hero{background:linear-gradient(180deg,#EFE9DC 0%,#F4F0E8 100%);
      border-bottom:1px solid var(--line);overflow:hidden}
.scene{width:100%;height:clamp(244px,40vw,520px);overflow:hidden;margin-bottom:-4px}
.scene svg{display:block;width:100%;height:100%}
.scenecap{margin:0;padding:10px 20px 16px;text-align:center;font-size:12.5px;
          letter-spacing:.3px;color:var(--muted);background:#EDE7DA}

/* ---------- family bands (Obrazlar page) ---------- */
.famband{background:var(--famsoft);padding:52px 0 46px;border-bottom:1px solid var(--line)}
.famtitle{font-family:var(--display);font-weight:700;color:var(--famc);text-align:center;
          font-size:clamp(28px,5.6vw,50px);letter-spacing:-.5px;margin:0 0 6px}
.famsub{text-align:center;color:var(--muted);font-size:15.5px;margin:0 0 30px}
/* flex, not grid: a family of two should sit centred together rather than being
   stretched to the full width with dead space between them */
.famrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px}
.ftype{flex:0 1 232px;display:flex;flex-direction:column;align-items:center;text-align:center;
       text-decoration:none;color:inherit;padding:14px 10px 18px;border-radius:22px 22px 14px 14px;
       transition:transform .16s ease,background .16s ease}
.ftype:hover{transform:translateY(-4px);background:rgba(255,255,255,.6)}
.ftart svg{display:block;width:clamp(112px,19vw,158px);height:auto;margin:0 auto}
.ftname{font-family:var(--display);font-weight:700;font-size:clamp(16px,2.4vw,19px);
        color:var(--famc);margin:10px 0 6px;line-height:1.25}
.ftdesc{font-size:14px;color:var(--ink);line-height:1.45;max-width:26ch}
.ftfig{font-size:12.5px;color:var(--muted);margin-top:9px;padding-top:9px;
       border-top:1px solid rgba(0,0,0,.10);width:100%;max-width:26ch}

/* ---------- life areas + suggested directions (archetype pages) ---------- */
.lifehead{font-family:var(--display);font-size:clamp(19px,2.4vw,23px);font-weight:600;
          margin:34px 0 4px;color:var(--lazur-deep)}
.lifehead span{display:block;font-family:var(--body);font-size:14px;font-weight:400;
               color:var(--muted);margin-top:2px}
.lifegrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.lifecol{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card)}
.lifecol.good{border-left:4px solid #2E8B6B}
.lifecol.watch{border-left:4px solid var(--zar)}
.lifecol h4{margin:0 0 10px;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.lifecol.good h4{color:#237A5E}
.lifecol.watch h4{color:#8A6520}
.lifecol ul{list-style:none;margin:0;padding:0}
.lifecol li{margin:0 0 11px;font-size:14.5px;line-height:1.5}
.lifecol li:last-child{margin-bottom:0}
.lifecol li b{display:block;color:var(--ink)}

.careers{list-style:none;margin:14px 0 0;padding:0}
.career{margin-bottom:16px}
.carhead{display:flex;align-items:baseline;gap:10px}
.carname{font-weight:600}
.carpct{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;
        color:var(--lazur-deep)}
.carbar{height:7px;border-radius:4px;background:#EDE6D8;margin:5px 0 6px;overflow:hidden}
.carbar i{display:block;height:100%;border-radius:4px;
          background:linear-gradient(90deg,var(--lazur),var(--lazur-deep))}
.carwhy{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.cardisc{margin:16px 0 0;padding:12px 14px;border-radius:11px;background:var(--paper);
         font-size:13.5px;line-height:1.55;color:var(--muted)}

@media (max-width:700px){
  .lifegrid{grid-template-columns:1fr}
}