/* Cover page for the two redesign concepts. Deliberately quiet:
   the concepts are the loud part, this page only has to introduce them. */
:root{
  --deep:#0B211F; --deep2:#123330; --paper:#F4F2EC; --card:#fff;
  --ink:#121614; --mid:#4A544F; --mute:#7C867F; --line:#DEDAD0; --lime:#9BE66B;
  --f:'Onest',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;
  line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1120px,100% - 44px);margin-inline:auto}

.top{background:var(--deep);color:#DCEDE6;padding:16px 0}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.top b{font-weight:600;font-size:16px;letter-spacing:-.01em;color:#fff}
.top span{font-size:13px;color:#7F9C93}

.lead{padding:76px 0 56px}
h1{font-size:clamp(36px,5.4vw,62px);font-weight:600;letter-spacing:-.03em;line-height:1.03;
  max-width:16ch;text-wrap:balance}
.lead p{margin-top:22px;max-width:60ch;color:var(--mid);font-size:18px}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-bottom:34px}
.pair>*{min-width:0}
.cx{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.cx:hover{transform:translateY(-4px);box-shadow:0 24px 48px -30px rgba(11,33,31,.55)}
.cx img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-bottom:1px solid var(--line)}
.cx .in{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.cx b{font-size:20px;font-weight:600;letter-spacing:-.015em}
.cx i{font-style:normal;font-size:13px;color:var(--mute);display:block;margin-top:3px}
.cx p{color:var(--mid);font-size:16px;margin-top:13px;flex:1}
.cx u{text-decoration:none;margin-top:20px;font-weight:600;font-size:15.5px;color:var(--deep);
  display:inline-flex;gap:8px;align-items:center}
.cx:hover u{gap:12px}

.bot{background:var(--deep);color:#CFE3DB;padding:74px 0 78px;margin-top:38px}
.bot__in{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.bot__in>*{min-width:0}
h2{font-size:clamp(27px,3.6vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.08;
  color:#fff;max-width:17ch;text-wrap:balance}
.bot p{margin-top:18px;color:#9DB8AF;max-width:48ch}
.bot p em{font-style:normal;color:var(--lime)}
.bot figure{border-radius:12px;overflow:hidden;border:1px solid #1E4540}
.bot figcaption{font-size:12.5px;color:#7F9C93;padding:10px 14px;background:#0E2724}

.end{padding:34px 0 40px;font-size:14px;color:var(--mute);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.end a{color:var(--deep);font-weight:500}

@media (max-width:840px){
  .lead{padding:52px 0 38px}
  .pair,.bot__in{grid-template-columns:1fr;gap:20px}
  .bot{padding:56px 0 60px}
  .bot__in{gap:30px}
}