/* ==========================================================================
   OY — content pages

   The landing page is a sequence of full-bleed scenes. These are documents.
   Same tokens, same three typefaces, same lime — but the job here is reading
   at length, so this sheet is mostly about measure, rhythm and contrast, and
   almost not at all about motion.

   Loaded only by generated pages (see seo/shell.py). The landing does not
   link it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page frame
   -------------------------------------------------------------------------- */
.pagewrap{
  /* Clears the fixed nav pill, which is 56px tall at --chrome-top:16px and
     grows a little with the CTA beside it. */
  padding-top:clamp(96px,9vw,124px);
  padding-bottom:calc(clamp(48px,6vw,86px) + var(--mcta-h));
}

.pmain{
  max-width:1400px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
}

/* Article column + sticky contents rail. Below 1080px the rail folds up and
   becomes a normal block above the text. */
.pgrid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,3.4vw,54px);
}
@media (min-width:1080px){
  .pgrid{grid-template-columns:minmax(0,1fr) 264px}
  .pgrid__rail{order:2}
  .pgrid__body{order:1}
}

/* --------------------------------------------------------------------------
   2. Breadcrumbs
   -------------------------------------------------------------------------- */
.crumbs{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--gray-2);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px;
  margin-bottom:22px;
}
.crumbs a{color:var(--gray-2);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.crumbs__sep{color:var(--line-3)}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   3. Page hero
   -------------------------------------------------------------------------- */
.phero{
  background:
    radial-gradient(120% 90% at 82% 12%, #FBFCF7 0%, rgba(251,252,247,0) 58%),
    linear-gradient(158deg,#F8F9F9 0%,#F1F2F2 62%,#EDEFEF 100%);
  border-radius:var(--r-section);
  margin:0 10px clamp(28px,3.4vw,48px);
  padding:clamp(30px,3.6vw,52px) 0 clamp(34px,4vw,58px);
}
.phero__in{
  max-width:1400px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,56px);
}
.phero h1{
  max-width:19ch;
  margin-top:20px;
}
.phero__lead{
  color:var(--gray);
  font-size:clamp(17px,1.55vw,19.5px);
  line-height:1.55;
  max-width:60ch;
  margin-top:20px;
}
.phero__meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:26px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--gray-2);
}
.phero__meta b{color:var(--ink-2);font-weight:600}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* --------------------------------------------------------------------------
   4. Prose
   -------------------------------------------------------------------------- */
.prose{max-width:74ch}
.prose > * + *{margin-top:20px}

.prose p{
  color:var(--ink-2);
  font-size:17px;
  line-height:1.68;
}
.prose__lead{
  font-size:18.5px !important;
  color:var(--ink) !important;
  line-height:1.6 !important;
}
.prose strong{color:var(--ink);font-weight:600}
.prose a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:var(--lime-deep);
}
.prose a:hover{background:var(--lime-soft)}

.prose__h2{
  margin-top:clamp(40px,4.4vw,64px) !important;
  padding-top:clamp(20px,2.2vw,30px);
  border-top:1px solid var(--line);
  scroll-margin-top:120px;
  position:relative;
}
.prose__h2:first-child{border-top:0;padding-top:0;margin-top:0 !important}
.prose__h3{
  margin-top:clamp(28px,3vw,40px) !important;
  scroll-margin-top:120px;
}

/* A quiet "#" that only appears on hover — deep-linkable headings matter for
   a page an answer engine may want to cite a single section of. */
.prose__anchor{
  position:absolute;
  left:-28px;top:50%;
  transform:translateY(-50%);
  width:22px;height:22px;
  opacity:0;
  transition:opacity var(--t-fast) var(--ease);
}
.prose__anchor::before{
  content:"#";
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--line-3);
}
.prose__h2:hover .prose__anchor,
.prose__anchor:focus-visible{opacity:1}
@media (max-width:1180px){.prose__anchor{display:none}}

/* Lists ------------------------------------------------------------------- */
.prose__ul,.prose__ol,.prose__checks{display:grid;gap:11px}
.prose__ul li,.prose__ol li,.prose__checks li{
  position:relative;
  padding-left:30px;
  color:var(--ink-2);
  font-size:16.5px;
  line-height:1.6;
}
.prose__ul li::before{
  content:"";
  position:absolute;left:6px;top:11px;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--lime-deep);
}
.prose__ol{counter-reset:pol}
.prose__ol li{counter-increment:pol;padding-left:38px}
.prose__ol li::before{
  content:counter(pol);
  position:absolute;left:0;top:1px;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;
  display:grid;place-items:center;
}
.prose__checks li::before{
  content:"";
  position:absolute;left:2px;top:4px;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--lime);
  /* A checkmark drawn in the mask so it inherits nothing and cannot drift. */
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.4 24.6 2.8 15l3.2-3.2 6.4 6.4L26 4.6 29.2 7.8z'/></svg>") center/11px no-repeat,
              linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M12.4 24.6 2.8 15l3.2-3.2 6.4 6.4L26 4.6 29.2 7.8z'/></svg>") center/11px no-repeat,
               linear-gradient(#000,#000);
          mask-composite:exclude;
}

/* Tables ------------------------------------------------------------------ */
.prose__tablewrap{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  -webkit-overflow-scrolling:touch;
}
.prose__table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:15.5px;
}
.prose__table caption{
  text-align:left;
  padding:16px 18px 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--gray-2);
}
.prose__table th,.prose__table td{
  padding:13px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line-2);
  line-height:1.5;
}
.prose__table thead th{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-2);
  background:var(--bg-2);
  white-space:nowrap;
}
.prose__table tbody th{font-weight:600;color:var(--ink)}
.prose__table td{color:var(--ink-2)}
.prose__table tbody tr:last-child th,
.prose__table tbody tr:last-child td{border-bottom:0}
.prose__table .yes{color:var(--ok-text);font-weight:600}
.prose__table .no{color:var(--danger-text);font-weight:600}

/* --------------------------------------------------------------------------
   5. Answer box

   A question and its complete answer, visually separated so a reader
   skimming for it finds it, and structurally separated so a machine reading
   the page can lift it without dragging the surrounding argument along.
   -------------------------------------------------------------------------- */
.answerbox{
  background:var(--dark);
  color:var(--white);
  border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,34px);
  position:relative;
  overflow:hidden;
}
.answerbox::after{
  content:"";
  position:absolute;right:-70px;top:-70px;
  width:200px;height:200px;
  border-radius:50%;
  background:rgba(206,254,70,.09);
  pointer-events:none;
}
/* `.prose p` is one class + one element, so a bare `.answerbox__q` class
   loses to it on specificity no matter what order the sheets load in — which
   painted this lime label in body-grey on a near-black card, at about 1.5:1.
   Matching the element as well settles it. */
p.answerbox__q{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lime);
  line-height:1.45;
  position:relative;
}
.answerbox__a{margin-top:14px;position:relative}
.answerbox__a p{
  color:#E8EAE6;
  font-size:17.5px;
  line-height:1.62;
}
.answerbox__a p + p{margin-top:12px}
.answerbox__a strong{color:var(--white)}
.answerbox__a a{color:var(--lime);text-decoration-color:var(--lime)}
.answerbox__a a:hover{background:transparent;color:var(--lime-soft)}

/* --------------------------------------------------------------------------
   6. Key facts
   -------------------------------------------------------------------------- */
.keyfacts{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,30px);
}
.keyfacts__t{
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-2);
  margin-bottom:16px;
}
.keyfacts__dl{display:grid;gap:0}
.keyfacts__row{
  display:grid;
  grid-template-columns:minmax(140px,34%) 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line-2);
}
.keyfacts__row:last-child{border-bottom:0;padding-bottom:0}
.keyfacts__row:first-child{padding-top:0}
.keyfacts dt{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--gray-2);
  line-height:1.5;
}
.keyfacts dd{color:var(--ink);font-size:16px;font-weight:500;line-height:1.5}
@media (max-width:520px){
  .keyfacts__row{grid-template-columns:1fr;gap:4px}
}

/* --------------------------------------------------------------------------
   7. Callout
   -------------------------------------------------------------------------- */
.callout{
  border-left:3px solid var(--lime-deep);
  background:var(--bg-2);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:20px 24px;
}
.callout--warn{border-left-color:var(--danger);background:var(--danger-soft)}
.callout--ok{border-left-color:var(--ok)}
.callout__t{
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:8px;
}
.callout__b p{font-size:16px;color:var(--ink-2);line-height:1.62}
.callout__b p + p{margin-top:10px}

/* --------------------------------------------------------------------------
   8. Steps
   -------------------------------------------------------------------------- */
.pstep{display:grid;gap:14px}
.pstep__i{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,28px);
}
.pstep__hd{display:flex;align-items:center;justify-content:space-between;gap:14px}
.pstep__n{
  width:34px;height:34px;
  border-radius:50%;
  background:var(--lime);
  color:var(--lime-ink);
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.pstep__meta{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gray-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:5px 12px;
}
.pstep__t{margin-top:16px;font-size:clamp(18px,1.7vw,21px)}
.pstep__i p{margin-top:9px;color:var(--gray);font-size:16px;line-height:1.6}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.pcards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:14px;
}
.pcard2{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(20px,2.2vw,26px);
}
.pcard2 h3{font-size:clamp(17px,1.5vw,19.5px)}
.pcard2 p{margin-top:10px;color:var(--gray);font-size:15.5px;line-height:1.6}

/* --------------------------------------------------------------------------
   10. In-page CTA
   -------------------------------------------------------------------------- */
.pagecta{
  background:linear-gradient(100deg,#F3F5F0 0%,#E4F7A6 55%,var(--lime) 100%);
  border-radius:var(--r-card);
  padding:clamp(26px,3vw,38px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.pagecta__t{font-size:clamp(20px,2.1vw,27px);color:var(--ink);max-width:22ch}
.pagecta p{margin-top:8px;color:#4F5740;font-size:15.5px;max-width:46ch}
.pagecta__act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pagecta__tel{
  font-family:var(--font-mono);
  font-size:14px;font-weight:600;
  color:var(--lime-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   11. Client logo grid
   -------------------------------------------------------------------------- */
.lgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:10px;
}
.lgrid__t{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  height:88px;
  display:grid;place-items:center;
  padding:16px;
}
.lgrid__t img{
  max-height:44px;width:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.78;
  transition:filter var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.lgrid__t:hover img{filter:none;opacity:1}

/* --------------------------------------------------------------------------
   12. Contents rail
   -------------------------------------------------------------------------- */
.toc{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:20px 22px;
  background:var(--bg-2);
}
@media (min-width:1080px){
  .toc{position:sticky;top:112px}
}
.toc__h{
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-2);
  margin-bottom:12px;
}
.toc__l{display:grid;gap:2px;counter-reset:toc}
.toc__l li{counter-increment:toc}
.toc__l a{
  display:block;
  padding:7px 0 7px 24px;
  position:relative;
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.4;
  border-radius:6px;
}
.toc__l a::before{
  content:counter(toc);
  position:absolute;left:0;top:8px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--line-3);
}
.toc__l a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   13. Related pages
   -------------------------------------------------------------------------- */
.related{
  border-top:1px solid var(--line);
  margin-top:clamp(42px,5vw,68px);
  padding-top:clamp(24px,2.6vw,34px);
}
.related__h{
  font-family:var(--font-mono);
  font-size:12px;font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray-2);
}
.related__l{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  margin-top:16px;
}
.related__l a{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  min-height:56px;
  padding:14px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-size:15.5px;
  font-weight:500;
  color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.related__l a::after{
  content:"→";
  color:var(--line-3);
  font-size:16px;
}
.related__l a:hover{
  border-color:var(--lime-deep);
  box-shadow:var(--sh-sm);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   14. FAQ list in a page context

   The landing's FAQ sits on --bg inside a .section. Here it sits on white
   page background, so the card needs its own border to stay visible.
   -------------------------------------------------------------------------- */
.faq-list--page .faq-item{background:var(--bg-2);border:1px solid var(--line)}
.faq-list--page .faq-q{font-size:16.5px}
.faq-list--page .faq-a p{font-size:16px}

/* --------------------------------------------------------------------------
   15. Chrome additions
   -------------------------------------------------------------------------- */

/* Current page in the nav pill. */
.nav__link--on{background:rgba(255,255,255,.11);color:var(--white)}

/* uz ⇄ ru switch. Deliberately quiet: it sits next to the CTA and must not
   compete with it. */
.langsw{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:48px;
  padding:0 14px;
  border-radius:var(--r-pill);
  background:rgba(20,20,20,.9);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:12.5px;font-weight:600;
  letter-spacing:.08em;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.langsw:hover{background:var(--dark)}

/* Five footer columns instead of four once the page list arrived. */
.foot-grid--wide{grid-template-columns:1.2fr .75fr .75fr .75fr 1fr}
@media (max-width:1080px){
  .foot-grid--wide{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid--wide{grid-template-columns:1fr}
}
.foot-lang{margin-top:18px}
.foot-lang a{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.foot-lang a:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   16. Print — a quoted page is sometimes a printed page
   -------------------------------------------------------------------------- */
@media print{
  .socials,.nav,.nav-right,.navpanel,.mcta,.toc,.pagecta,.related,.coop{display:none !important}
  .pagewrap{padding-top:0}
  .phero{background:none;margin:0;padding:0}
  .prose{max-width:none}
  .answerbox{background:none;color:#000;border:2px solid #000}
  .answerbox__q{color:#000}
  .answerbox__a p{color:#000}
}