/* Ads AI (redesign): a split hero with the decision sheet beside the headline (the ribbon enters from the right edge
   behind it), the placement studio on a calm band, the measurement chain, then what stays in your hands. */
.ad-hero{padding:var(--s7) var(--gut) var(--s10)}
.ad-hero-in{max-width:var(--x-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7) var(--s8);align-items:start}
.ad-copy{display:grid;gap:var(--s5);padding-top:var(--s5);position:sticky;top:24px}
.ad-copy .x-h1{--h1w:9.6em}

/* the decision sheet */
.desk{overflow:hidden}
.dk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);counter-reset:k}
.dk-steps li{counter-increment:k}
.dk-s{position:relative;width:100%;height:100%;text-align:left;padding:16px 20px 18px;font-size:16px;font-weight:700;color:var(--text);display:grid;gap:8px;transition:color .25s ease,background-color .25s ease}
.dk-s::before{content:"";height:4px;border-radius:4px;background:var(--line);transition:background-color .4s var(--out)}
.dk-s.done::before,.dk-s[aria-pressed=true]::before{background:var(--cobalt)}
.dk-s[aria-pressed=true]{color:var(--ink);background:var(--cloud)}
.dk-steps li+li .dk-s{box-shadow:inset 1px 0 0 var(--line)}
.dk-body{display:grid;min-height:380px;padding:34px 36px 26px;align-content:start}
.dk-p{display:grid;gap:18px;align-content:start}
.dk-big{font-size:clamp(23px,2.1vw,31px);line-height:1.22;letter-spacing:-.022em;font-weight:800;color:var(--ink);text-wrap:balance}
.dk-t{font-size:17px;line-height:1.6;color:var(--text);max-width:40em}.dk-t b{color:var(--ink)}
.dk-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:6px;border-top:1px solid var(--line)}
.dk-facts div{padding:16px 20px 4px 0}.dk-facts div+div{padding-left:20px;border-left:1px solid var(--line)}
.dk-facts dt{font-size:14.5px;font-weight:700;color:var(--deep)}.dk-facts dd{margin-top:4px;font-size:16.5px;line-height:1.5;color:var(--ink)}
.dk-scroll{overflow-x:auto;margin:0 -8px}
.dk-tab{width:100%;min-width:560px;border-collapse:collapse}
.dk-tab th,.dk-tab td{padding:14px 12px;text-align:left;border-top:1px solid var(--line);font-size:16px;line-height:1.45;vertical-align:top}
.dk-tab thead th{border-top:0;font-size:14.5px;color:var(--deep)}
.dk-tab tbody th{color:var(--ink);font-weight:700}.dk-tab td{color:var(--ink)}
.dk-tab tr[data-c=s-contract] td:nth-child(3){color:var(--t-teal);font-weight:800}.dk-tab tr[data-c=social] td:nth-child(3){color:var(--t-coral);font-weight:800}
.dk-btns{display:flex;gap:10px;flex-wrap:wrap}
.dk-foot{display:flex;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);background:#F7FAFF}
.dk-next{font-size:15.5px;font-weight:700;color:var(--deep)}

/* the placement studio */
.ad-std-head,.ad-ms-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s5) var(--s9);align-items:end}
.studio{margin-top:var(--s8);display:grid;grid-template-columns:290px minmax(0,1fr) 320px;gap:20px;align-items:start}
.st-edit,.st-rules{padding:24px}
.st-edit .x-k,.st-rules .x-k{margin-bottom:14px}
.fld{display:grid;gap:6px;margin-bottom:14px}
.fld label{font-size:14.5px;font-weight:700;color:var(--ink)}
.fld input,.fld textarea,.fld select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #C9D6EA;border-radius:10px;padding:11px 12px}
.fld textarea{resize:vertical;line-height:1.45}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:#0870E6;box-shadow:0 0 0 3px rgba(8,127,255,.18)}
.st-hint{font-size:15px;line-height:1.5;color:var(--text)}
.st-main{display:grid;gap:14px;min-width:0}
.st-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:5px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.st-tabs button{position:relative;z-index:1;height:46px;border-radius:6px;font-size:15.5px;font-weight:700;color:var(--ink);transition:color .35s ease}
.st-tabs button[aria-selected="true"]{color:#fff}
.st-ind{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/4);border-radius:6px;background:#0870E6;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.st-stage{position:relative;height:720px;border-radius:var(--r-stage);background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.st-illus{position:absolute;left:20px;top:16px;z-index:3}
.st-art{position:absolute;inset:48px 22px 22px;display:grid;place-items:center}
.pl{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%}
.ad-img{display:block;width:100%;height:100%;object-fit:cover}
/* search */
.sr{width:min(620px,100%);background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 24px 50px -34px rgba(11,42,102,.5);padding:20px 24px 24px}
.sr-bar{height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px #C9D6EA;display:flex;align-items:center;padding:0 18px;margin-bottom:20px}
.sr-q{font-size:15px;color:var(--ink)}
.sr-ad{display:grid;grid-template-columns:1fr 104px;column-gap:16px}
.sr-ad>*:not(.sr-img){grid-column:1}
.sr-sp{font-size:13px;font-weight:700;color:var(--ink)}
.sr-site{display:flex;align-items:center;gap:10px;margin-top:6px}
.sr-fav,.so-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#E6F0FD;color:var(--deep);font-size:11px;font-weight:800}
.sr-site b{display:block;font-size:14px;color:var(--ink)}.sr-site small{display:block;font-size:12.5px;color:var(--text)}
.sr-h{margin-top:8px;font-size:20px;line-height:1.3;color:#0058C9;font-weight:600;overflow-wrap:anywhere}
.sr-d{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.sr-img{grid-column:2;grid-row:1/span 4;align-self:center;width:104px;height:104px;border-radius:12px;overflow:hidden}
.sr-org{margin-top:26px;display:grid;gap:9px}.sr-org i{height:11px;border-radius:6px;background:#EEF3FA}.sr-org i.s{width:62%}

/* phones: light frames */
.phone{width:300px;max-width:100%;padding:12px;border-radius:38px;background:#fff;box-shadow:0 0 0 1px #D5E3F6,0 30px 60px -36px rgba(11,42,102,.55)}
.so{border-radius:26px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #EEF3FA}
.so-hd{display:flex;align-items:center;gap:10px;padding:12px 14px}
.so-hd b{display:block;font-size:13.5px;color:var(--ink)}.so-hd small{display:block;font-size:12px;color:var(--text)}
.so-t{margin:0 14px 10px;padding:0;font-size:13.5px;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.so-img{aspect-ratio:4/5;overflow:hidden}
.so-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:#F5F9FF}
.so-cta small{display:block;font-size:11.5px;color:var(--text)}.so-cta b{display:block;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.so-btn{flex:none;padding:8px 12px;border-radius:8px;background:#0870E6;color:#fff;font-size:12.5px;font-weight:700}
.phone.tall{width:300px}
.st9{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden}
.st9 .ad-img{position:absolute;inset:0}
.st9-top{position:absolute;left:12px;right:12px;top:14px;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(255,255,255,.92);width:max-content;max-width:calc(100% - 24px)}
.st9-top b{font-size:12.5px;color:var(--ink)}.st9-top small{font-size:11.5px;color:var(--text)}
.st9-card{position:absolute;left:14px;right:14px;bottom:15%;display:grid;gap:10px;justify-items:start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.95)}
.st9-card b{font-size:18px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.safe{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.safe i{position:absolute;left:0;right:0;background:rgba(255,107,120,.28);box-shadow:inset 0 0 0 1.5px #FF6B78}
.safe .t{top:0;height:14%}.safe .b{bottom:0;height:12%}
.studio.safe-on .safe{opacity:1}
.pl-video{align-content:center;gap:12px}
.vid{position:relative;width:min(600px,100%);aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(11,42,102,.55)}
.vid .ad-img{position:absolute;inset:0}
.vid-l3{position:absolute;left:18px;bottom:26px;display:grid;gap:2px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.95);max-width:70%}
.vid-l3 b{font-size:18px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}.vid-l3 span{font-size:12.5px;color:var(--text)}
.vid-ad{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:700;color:var(--ink)}
.vid-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.7)}.vid-bar i{display:block;height:100%;width:24%;background:#0870E6}
@media (prefers-reduced-motion:no-preference){.pl-video:not([hidden]) .vid-bar i{animation:vidPlay 6s linear infinite}@keyframes vidPlay{from{width:0}to{width:100%}}}
.vid-cap{font-size:14px;color:var(--text);text-align:center}

/* checks */
.rl-chk{display:grid;gap:8px}
.rl-chk li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#F5F9FF;font-size:14.5px;font-weight:600;color:var(--ink)}
.cnt{font-variant-numeric:tabular-nums;font-size:14px;color:var(--t-teal)}
.cnt::before{content:"✓ "}
.rl-chk li.over{background:#FFF0F2}.rl-chk li.over .cnt{color:#C3364A}.rl-chk li.over .cnt::before{content:"Too long · "}
.rl-notes{margin-top:16px;display:grid;gap:10px}
.rl-notes li{font-size:14.5px;line-height:1.5;color:var(--text);padding-left:16px;position:relative}
.rl-notes li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#087FFF}
.rl-src{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}.rl-src a{color:var(--deep);font-weight:600;text-decoration:underline}
.rl-safe{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer}
.rl-safe input{width:20px;height:20px;accent-color:#0870E6}


/* checks */
.rl-chk{display:grid;gap:8px}
.rl-chk li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#F5F9FF;font-size:15px;font-weight:600;color:var(--ink)}
.cnt{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--t-teal)}
.cnt::before{content:"✓ "}
.rl-chk li.over{background:#FFF0F2}.rl-chk li.over .cnt{color:#C3364A}.rl-chk li.over .cnt::before{content:"Too long · "}
.rl-notes{margin-top:16px;display:grid;gap:10px}
.rl-notes li{font-size:15px;line-height:1.5;color:var(--text);padding-left:16px;position:relative}
.rl-notes li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#087FFF}
.rl-src{margin-top:16px;font-size:14px;line-height:1.5;color:var(--text)}.rl-src a{color:var(--deep);font-weight:600;text-decoration:underline}
.rl-safe{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer}
.rl-safe input{width:20px;height:20px;accent-color:#0870E6}

/* the measurement chain: what happens after an ad, and who records it */
.ms{margin-top:var(--s8);display:grid;gap:var(--s5)}
.ms-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.ms-chain li{position:relative;display:grid;gap:8px;align-content:start;padding:26px 24px 28px;border-radius:16px;background:#fff;box-shadow:var(--sh-ui)}
.ms-chain li::after{content:"";position:absolute;top:50%;right:-18px;width:18px;height:2px;background:var(--cobalt)}
.ms-chain li:last-child::after{display:none}
.ms-chain b{font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.ms-chain span{font-size:16px;line-height:1.5;color:var(--text)}
.ms-chain .ch-gap{background:#fff;box-shadow:inset 0 0 0 2px #FFE9EC,var(--sh-ui)}
.ms-chain li:nth-child(2)::after{background:none;border-top:2px dashed var(--t-coral);height:0}
.ms-gap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px var(--s6);padding:22px 26px;border-radius:16px;background:#FFF0F2;font-size:17px;line-height:1.55;color:var(--ink)}
.ms-gap b{color:var(--t-coral);font-size:17px}
.ms-quotes{margin-top:var(--s8);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.ms-quotes li{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--line)}
.ms-quotes q{font-size:21px;line-height:1.35;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ms-quotes q::before{content:"“"}.ms-quotes q::after{content:"”"}
.ms-quotes span{font-size:16px;line-height:1.5;color:var(--text)}

/* what stays in your hands */
.nv-list{margin-top:var(--s7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)}
.nv-list li{display:grid;gap:10px;padding-top:22px;border-top:3px solid var(--ink)}
.nv-list b{font-size:22px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.nv-list span{font-size:16.5px;line-height:1.55;color:var(--text)}

@media (max-width:1240px){.studio{grid-template-columns:270px minmax(0,1fr)}.st-rules{grid-column:1/-1}}
@media (max-width:1100px){
  .ad-hero-in{grid-template-columns:1fr}.ad-copy{position:static;padding-top:0}
  .ad-std-head,.ad-ms-head,.ms-gap{grid-template-columns:1fr}
  .ms-chain{grid-template-columns:1fr 1fr}.ms-chain li::after{display:none}
  .ms-quotes,.nv-list{grid-template-columns:1fr}
}
@media (max-width:900px){.studio{grid-template-columns:1fr}.st-edit{order:2}.st-main{order:1}.st-rules{order:3}}
@media (max-width:760px){
  .ad-hero{padding:var(--s5) var(--gut) var(--s9)}
  .dk-steps{grid-template-columns:1fr 1fr}.dk-steps li:nth-child(3) .dk-s{box-shadow:inset 0 1px 0 var(--line)}.dk-steps li:nth-child(4) .dk-s{box-shadow:inset 1px 1px 0 var(--line)}
  .dk-body{padding:22px 18px;min-height:0}.dk-facts{grid-template-columns:1fr}.dk-facts div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .st-tabs{grid-template-columns:repeat(2,1fr);border-radius:18px}.st-tabs button{border-radius:14px}
  .st-ind{display:none}.st-tabs button[aria-selected="true"]{background:#0870E6}
  .st-stage{height:580px}.st-art{inset:44px 10px 14px}
  .sr{padding:16px}.sr-ad{grid-template-columns:1fr 72px}.sr-img{width:72px;height:72px}.sr-h{font-size:17px}
  .phone{width:270px}.phone.tall{width:250px}
  .ms-chain{grid-template-columns:1fr}
}