/* Construction page (/construction/, /cs/construction/): what the video covers, laid
   out below it as short, scannable sections. Loaded by that page only. */

.cx-section{padding-top:80px;padding-bottom:80px;border-top:1px solid var(--line);scroll-margin-top:90px}
.cx-head{max-width:860px;margin-bottom:44px}
.cx-head .eyebrow{margin-bottom:18px}
.cx-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:680px;margin-top:20px}
.cx-note{font-size:15px;line-height:1.6;color:#8fa597;max-width:760px;margin-top:24px}
.cx-index{font-size:12px;letter-spacing:.13em;color:var(--green);font-variant-numeric:tabular-nums}
.cx-section h3{font-weight:500;letter-spacing:-.02em;line-height:1.3}

/* 01 · Two examples from the video, each as three steps and a result. */
.cx-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cx-example{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:32px}
.cx-example h3{font-size:clamp(24px,2.1vw,30px);font-weight:450;line-height:1.15;letter-spacing:-.035em;margin:14px 0 28px}
.cx-steps{list-style:none;margin:0;padding:0;counter-reset:step}
.cx-steps li{position:relative;display:grid;gap:4px;padding:0 0 22px 50px;counter-increment:step}
.cx-steps li:before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border:1px solid #3c5a47;border-radius:50%;display:grid;place-items:center;font-size:13px;color:var(--green);background:var(--bg)}
.cx-steps li:not(:last-child):after{content:"";position:absolute;left:16px;top:38px;bottom:6px;width:1px;background:#2c4a37}
.cx-steps strong{font-size:17px;font-weight:500;line-height:1.35;color:var(--text);padding-top:5px}
.cx-steps span{font-size:15px;line-height:1.6;color:var(--muted)}
.cx-result{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:16px;line-height:1.55;color:#d2e2d6}

/* 02 · The existing idea cards, now under a section heading. */
.cx-section .solution-grid{margin-top:0;padding-bottom:0}
.solution-card h3{font-size:24px;font-weight:450;line-height:1.09;letter-spacing:-.045em;margin:20px 0 15px}

/* 03 · Illustrative savings. */
.cx-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cx-number{min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:32px}
.cx-number h3{font-size:19px}
.cx-number-case{font-size:16px;line-height:1.6;color:var(--muted);max-width:470px;margin-top:10px}
.cx-number-big{font-size:clamp(56px,6vw,88px);font-weight:450;line-height:1;letter-spacing:-.05em;color:var(--green);margin-top:30px;font-variant-numeric:tabular-nums}
.cx-number-unit{font-size:15px;line-height:1.5;color:#c4d0c8;margin-top:10px}
.cx-number-value{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
.cx-number-value strong{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--text)}

/* 04 · Ways to work together with their prices, then the guarantee and the free demo. */
.cx-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cx-tier{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:6px;padding:28px}
.cx-tier h3{font-size:clamp(22px,1.8vw,26px);font-weight:450;line-height:1.15;letter-spacing:-.035em;margin:14px 0 10px}
.cx-tier-desc{font-size:15px;line-height:1.6;color:var(--muted)}
.cx-prices{margin:22px 0 0}
.cx-prices>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:13px 0;border-top:1px solid var(--line)}
.cx-prices dt{font-size:15px;line-height:1.4;color:#d2e2d6}
.cx-prices dd{margin:0 0 0 auto;font-size:15px;font-weight:500;line-height:1.4;color:var(--green);text-align:right;white-space:nowrap}
.cx-tier-note{margin-top:auto;padding-top:16px;font-size:14px;line-height:1.55;color:#8fa597}
.cx-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.cx-promise{min-width:0;border:1px solid #2c4a37;border-left:2px solid var(--green);border-radius:4px;background:#0a1610;padding:24px 28px}
.cx-promise h3{font-size:19px;color:var(--green)}
.cx-promise p{font-size:15px;line-height:1.6;color:#d2e2d6;margin-top:8px}

/* 05 · Why Vaqtria. */
.cx-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.cx-why li{min-width:0;padding:28px 28px 0 0}
.cx-why li+li{padding-left:28px;border-left:1px solid var(--line)}
.cx-why h3{font-size:19px}
.cx-why p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:10px}

/* Closing call to action. */
.cx-cta{padding-top:80px;border-top:1px solid var(--line)}
.cx-cta h2{margin-bottom:16px}
.cx-cta-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:640px;margin-bottom:28px}

@media(max-width:1024px){
 .cx-section{padding-top:60px;padding-bottom:60px}
 .cx-head{margin-bottom:32px}
 .cx-tiers{grid-template-columns:minmax(0,1fr)}
 .cx-why{grid-template-columns:minmax(0,1fr);border-top:0}
 .cx-why li,.cx-why li+li{padding:22px 0;border-left:0;border-top:1px solid var(--line)}
 .cx-cta{padding-top:60px}
 .cx-cta h2{margin-bottom:0}
 .cx-cta-lead{flex-basis:100%;margin-bottom:12px}
}
@media(max-width:860px){
 .cx-examples,.cx-numbers,.cx-promises{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .cx-section{padding-top:48px;padding-bottom:48px}
 .cx-head{margin-bottom:28px}
 .cx-lead,.cx-cta-lead{font-size:16px}
 .cx-example,.cx-number,.cx-tier{padding:24px 20px}
 .cx-example h3{margin-bottom:24px}
 .cx-promise{padding:20px}
 .solution-card h3{font-size:26px}
 .cx-cta{padding-top:48px}
}