/* Blog articles (builder E, 11 Nov 2026). Sits on content.css. */

/* ---------- article 1: "at a glance" rows in the summary card ---------- */
.gl{margin-top:14px}
.gl li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:15px 0;border-top:1px solid rgba(3,46,74,.09)}
.gl li:first-child{border-top:0}
.pf-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.02em}
.gl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gl-top b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.gl p{margin-top:4px;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-2)}

/* ---------- article 1: wording panel (navy, like the homepage "why" block) ---------- */
.say{position:relative;overflow:hidden;margin-top:56px;padding:56px 56px 52px;border-radius:44px;
  background:radial-gradient(560px 420px at 92% 0%,rgba(29,161,242,.3),rgba(29,161,242,0) 70%),linear-gradient(170deg,#053658 0%,#032E4A 45%,#021C2E 100%);color:#fff;
  box-shadow:0 50px 100px rgba(3,46,74,.26)}
.say-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.say-h{margin-top:18px;font-size:48px;line-height:1.04;font-weight:700;letter-spacing:-.04em}
.say-h .acc{color:var(--sky)}
.say-p{max-width:380px;padding-bottom:6px;font-size:16.5px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.76)}
.say .t-pill{background:rgba(29,161,242,.16);border-color:rgba(29,161,242,.35);color:#BFE5FD}
.say-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:40px}
.say-col{position:absolute;top:0;bottom:0;left:calc(50% + 12px);right:0;border-radius:28px;
  background:radial-gradient(400px 260px at 70% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),linear-gradient(170deg,#8DD3FB 0%,#3DB0F5 60%,#1DA1F2 100%);box-shadow:0 30px 70px rgba(29,161,242,.28)}
.sh{display:flex;align-items:center;gap:10px;padding:24px 28px 16px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sh-a{grid-column:1;grid-row:1;color:rgba(255,255,255,.6)}
.sh-b{grid-column:2;grid-row:1;position:relative;color:var(--navy)}
.sx,.sy{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;padding:18px 28px 18px}
.sx{grid-column:1;border-top:1px solid rgba(255,255,255,.1)}
.sy{grid-column:2;position:relative;border-top:1px solid rgba(3,46,74,.12);color:var(--navy)}
.sx q,.sy q{display:block;quotes:none;font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.sx q{color:#fff}
.sx small,.sy small{display:block;margin-top:6px;font-size:14px;line-height:1.5;font-weight:500}
.sx small{color:rgba(255,255,255,.62)}
.sy small{color:rgba(3,46,74,.78)}
.sx .wx,.sy .wy{margin-top:1px}
.say-last{padding-bottom:26px}
.wx{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(229,72,77,.2);color:#FF8F92}
.wy{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff}

/* ---------- sources list ---------- */
.src{display:grid;gap:0;border-top:1px solid #E6EEF5}
.src li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #E6EEF5}
.src .n{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ice);color:var(--sky-deep);font-size:13px;font-weight:700}
.src b{display:block;font-size:16.5px;line-height:1.4;font-weight:700;color:var(--navy)}
.src a{display:inline-block;margin-top:3px;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.src small{display:block;margin-top:3px;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-3)}

/* ---------- article 2: page sitemap in the summary card ---------- */
.smap{position:relative;margin-top:16px;padding-left:22px}
.smap::before{content:"";position:absolute;left:6px;top:20px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--sky),var(--ice-3))}
.sm-root{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;margin-left:-22px;padding:0 16px 0 10px;border-radius:12px;background:var(--navy);color:#fff;font-size:15px;font-weight:700}
.sm-root img{width:22px;height:22px}
.sm-g{position:relative;margin-top:14px}
.sm-g::before{content:"";position:absolute;left:-16px;top:9px;width:10px;height:2px;background:var(--sky)}
.sm-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-deep)}
.sm-c{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sm-c span{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:9px;background:#fff;border:1px solid var(--ice-2);font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.sm-c span em{margin-left:6px;font-style:normal;font-weight:600;color:var(--ink-3)}

/* ---------- article 2: per-page "job" line and the phone / mistake pair ---------- */
.job{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-radius:16px;background:linear-gradient(90deg,#E4F4FE 0%,#F2F8FE 100%);font-size:18px;line-height:1.5;font-weight:600;color:var(--navy)}
.job b{flex:none;font-size:13px;line-height:1.9;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px!important}
.duo > div{padding:18px 20px 20px;border-radius:18px;font-size:15.5px;line-height:1.55;font-weight:500}
.duo-k{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.duo-ph{background:#F2F8FE;border:1px solid var(--ice-2);color:#2D475C}
.duo-ph .duo-k{color:var(--sky-deep)}
.duo-x{background:#fff;border:1px solid #F1D9DA;color:#2D475C}
.duo-x .duo-k{color:#B4262B}
.duo-k i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.duo-ph .duo-k i{background:var(--navy);color:#fff}
.duo-x .duo-k i{background:#FDECEC;color:#D6383D}

/* real-work crops (1200 px wide originals, shown at 720 / 350) */
.crop-home{height:450px}
.crop-home img{top:0;width:720px;height:450px}
.crop-picker{height:390px}
.crop-picker img{top:-1176px;width:720px;height:3100px}
.crop-rules{height:348px}
.crop-rules img{top:-1662px;width:720px;height:3100px}

/* three phones */
.phones{display:flex;justify-content:center;gap:26px;padding:34px 0 30px;border-radius:28px;
  background:radial-gradient(500px 260px at 50% 0%,rgba(255,255,255,.4),rgba(255,255,255,0) 70%),linear-gradient(180deg,#5BBEF8 0%,#1DA1F2 60%,#1592E2 100%)}
.phones{gap:36px}
.phones .phone{width:230px;border-radius:32px}
.phones .ph-scr{height:470px;border-radius:26px}
.phones .ph-scr img{width:216px;height:467px}

/* mistakes */
.mis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mis li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:20px 20px 20px 18px;border-radius:20px;background:#fff;border:1px solid #DCEDFA;box-shadow:0 10px 24px rgba(3,46,74,.05)}
.mis .n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-size:15px;font-weight:700}
.mis li > div > b{display:block;font-size:16.5px;line-height:1.35;font-weight:700;color:var(--navy)}
.mis li > div > span{display:block;margin-top:4px;font-size:15px;line-height:1.5;font-weight:500;color:var(--ink-2)}
.mis li:last-child:nth-child(odd){grid-column:1 / -1}

/* ---------- PHONE (390) ---------- */
@media (max-width:760px){
  .say{margin-top:40px;padding:30px 18px 22px;border-radius:28px}
  .say-head{flex-direction:column;align-items:flex-start;gap:12px}
  .say-h{font-size:32px}
  .say-p{font-size:16px}
  .say-grid{grid-template-columns:1fr;row-gap:0;margin-top:26px}
  .say-col,.sh{display:none}
  .sx,.sy{grid-column:1;padding:16px 16px 16px;gap:12px}
  .sx{border-top:0;border-radius:18px 18px 0 0;background:rgba(255,255,255,.07)}
  .sy{border-top:0;border-radius:0 0 18px 18px;margin-bottom:12px;background:linear-gradient(170deg,#8DD3FB 0%,#3DB0F5 100%)}
  .sx q,.sy q{font-size:17px}
  .say-last{padding-bottom:16px}

  .gl li{padding:13px 0}
  .gl-top{flex-wrap:wrap;gap:6px}
  .src a{font-size:13.5px}

  .smap{padding-left:20px}
  .sm-c span{height:auto;min-height:28px;padding:5px 10px;font-size:13px;line-height:1.3;white-space:normal}

  .job{flex-direction:column;gap:2px;padding:14px 16px;font-size:16.5px}
  .duo{grid-template-columns:1fr;gap:10px}
  .duo > div{font-size:15px}

  .crop-home{height:219px}
  .crop-home img{width:350px;height:219px}
  .crop-picker{height:190px}
  .crop-picker img{top:-571px;width:350px;height:1507px}
  .crop-rules{height:169px}
  .crop-rules img{top:-808px;width:350px;height:1507px}

  .phones{gap:16px;padding:24px 14px 22px;border-radius:22px}
  .phones .phone{width:142px;padding:5px;border-radius:22px}
  .phones .ph-scr{height:286px;border-radius:17px}
  .phones .ph-scr img{width:132px;height:286px}

  .mis{grid-template-columns:1fr;gap:10px}
  .mis li{padding:16px 16px 16px 14px}
}