/* Content Creation: a phone feed. Vertical frames, numbers, short lines. Loaded after site.css. */
.cx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--m);margin-bottom:clamp(24px,4vh,48px)}

/* opener */
.cx-open{padding:clamp(110px,16vh,170px) 0 var(--s2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--g);overflow:hidden}
.cx-open-t{padding:0 0 0 var(--m)}
.cx-open-t .micro{color:var(--mu);margin-bottom:22px}
.cx-open .d1{font-size:clamp(3.25rem,5.4vw,6.6rem)}
.cx-lede{margin:26px 0 34px;font-size:clamp(17px,1.4vw,20px);color:var(--fg2);max-width:24em}
.cx-acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cx-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-right:var(--m);align-items:start}
.cx-ph .slot,.cx-reel .slot{border-radius:22px;overflow:hidden}
.cx-ph:not(.up){margin-top:9vh}

/* numbers */
.cx-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--d-hair)}
.cx-nums a{display:flex;flex-direction:column;gap:10px;padding:clamp(36px,7vh,72px) var(--m);border-right:1px solid var(--d-hair)}
.cx-nums a:last-child{border-right:0}
.cx-nums b{font:300 clamp(3rem,7vw,7rem)/.9 var(--serif);letter-spacing:-.03em}
.cx-nums span{font:500 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--d-mute)}

/* their TikToks */
.cx-reels{padding:var(--s2) 0}
.cx-reel-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:0 var(--m);max-width:1180px;margin:0 auto}
.cx-reel{position:relative;display:block}
.cx-views{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:500 13px/1 var(--sans);letter-spacing:.04em}
.cx-views i{width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* what you get */
.cx-get{padding:var(--s2) 0}
.cx-get-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 var(--m);border-top:1px solid var(--hair)}
.cx-get-g li{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3.4vh,36px) 24px clamp(22px,3.4vh,36px) 0;border-bottom:1px solid var(--hair)}
.cx-n{font:500 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--mu)}
.cx-get-g b{font:400 clamp(1.5rem,2.2vw,2.1rem)/1.1 var(--serif)}
.cx-get-g li>span:last-child{font-size:14px;line-height:1.5;color:var(--fg2)}

/* moments in between */
.cx-between{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--g);padding:0 var(--m) var(--s2) 0}
.cx-bt-t p{margin:24px 0 32px;max-width:28em;color:var(--fg2)}
.cx-iph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:420px}
.cx-iph .slot{border-radius:14px;overflow:hidden}

/* packages */
.cx-packs{padding:var(--s2) 0;background:var(--bone)!important}
.cx-every{margin:-12px var(--m) 28px;font-size:14px;color:var(--fg2)}
.cx-pk-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:0 var(--m)}
.cx-pack{display:flex;flex-direction:column;gap:10px;padding:28px;background:#fff;border-radius:20px;transition:transform .4s var(--ease)}
.cx-pack:hover{transform:translateY(-4px)}
.cx-pack.hi{background:#000;color:#fff}
.cx-pk-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cx-pk-p{font:300 clamp(2rem,3vw,2.8rem)/1 var(--serif)}
.cx-pk-h{color:var(--mute)}
.cx-pack.hi .cx-pk-h{color:var(--d-mute)}
.cx-pk-l{display:flex;flex-direction:column;gap:6px;margin:8px 0 6px;font-size:14px;line-height:1.45}
.cx-pk-l span::before{content:'';display:inline-block;width:5px;height:5px;margin:0 10px 2px 0;border-radius:50%;background:currentColor;opacity:.5}
.cx-pk-go{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.cx-pack.hi .cx-pk-go{border-color:var(--d-hair)}
.cx-pk-go::after{content:' \2192'}
.cx-add-h{margin:clamp(40px,7vh,72px) var(--m) 8px;color:var(--mute)}
.cx-add{margin:0 var(--m);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--g)}
.cx-add li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid #DADADA;font-size:15px}
.cx-add b{font:400 1.35rem/1 var(--serif)}

/* finale */
.cx-fin{min-height:64svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:var(--s2) var(--m);text-align:center}

/* iPad upright */
@media (min-width:700px) and (max-width:1024px){
  .cx-open{grid-template-columns:1fr;row-gap:56px}
  .cx-open-t{padding:0 var(--m)}
  .cx-frames{padding:0 var(--m)}
  .cx-get-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phone: composed for 390 */
@media (max-width:699px){
  .cx-head{padding:0 16px;margin-bottom:22px}
  .cx-head .d2{font-size:2.5rem}
  .cx-open{display:block;padding:76px 0 40px}
  .cx-open-t{padding:0 16px 32px}
  .cx-open-t .micro{margin-bottom:16px}
  .cx-open .d1{font-size:clamp(2.9rem,13.4vw,3.6rem)}
  .cx-lede{margin:18px 0 24px;font-size:17px}
  .cx-acts{gap:22px}
  .cx-acts .solid{flex:1}
  .cx-frames>*{flex:0 0 66%!important}
  .cx-ph:not(.up){margin-top:0}

  .cx-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-nums a{padding:26px 12px 24px 16px;gap:8px}
  .cx-nums a+a{padding-left:12px}
  .cx-nums b{font-size:2.3rem}
  .cx-nums span{font-size:9px;letter-spacing:.14em}

  .cx-reels{padding:44px 0 48px}
  .cx-reel-row>*{flex:0 0 62%!important}
  .cx-views{left:10px;bottom:10px;padding:7px 12px;font-size:12px}

  .cx-get{padding:44px 0 36px}
  .cx-get-g{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 16px;column-gap:16px}
  .cx-get-g li{padding:18px 0 18px}
  .cx-get-g b{font-size:1.4rem}
  .cx-get-g li>span:last-child{font-size:13px}

  .cx-between{display:block;padding:0 0 44px}
  .cx-bt-m{margin:0 0 24px}
  .cx-bt-t{padding:0 16px}
  .cx-bt-t p{margin:16px 0 22px;font-size:16px}
  .cx-iph{max-width:none;gap:8px}

  .cx-packs{padding:44px 0}
  .cx-every{margin:-8px 16px 20px;font-size:13px}
  .cx-pk-g{grid-template-columns:1fr;gap:10px;padding:0 16px}
  .cx-pack{padding:20px;gap:8px;border-radius:18px}
  .cx-pack:hover{transform:none}
  .cx-pk-top .d3{font-size:1.6rem}
  .cx-pk-p{font-size:2rem}
  .cx-pk-l{margin:4px 0 2px;font-size:13.5px}
  .cx-pk-go{padding-top:12px}
  .cx-add-h{margin:36px 16px 4px}
  .cx-add{grid-template-columns:1fr;margin:0 16px}
  .cx-add li{padding:14px 0;font-size:15px}

  .cx-fin{min-height:56svh;gap:28px;padding:56px 16px}
  .cx-fin .d1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .cx-fin .solid{width:100%}
}