/* Duckframe — Redes page: hero with the planned month, comparable plan cards, process, add-ons, FAQ, CTA. */
.social-hero{padding-bottom:clamp(40px, 6vw, 80px);}
.hero-grid2{display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(30px, 6vw, 80px); align-items:center;}
.social-hero h1{font-size:clamp(40px, 5.6vw, 84px); max-width:12ch;}
.social-hero .section-desc{max-width:48ch; font-size:clamp(15px, 1.25vw, 18px); line-height:1.6;}
.social-hero .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;}
/* the planned month */
.cal{border-radius:22px; padding:20px 20px 16px; background:linear-gradient(165deg, #06284f, var(--navy1) 55%, #001229); border:1px solid rgba(255,195,0,0.28); box-shadow:0 50px 100px -50px rgba(0,0,0,0.9); transform:rotate(1.5deg); transition:transform .8s cubic-bezier(.19,1,.22,1);}
.cal:hover{transform:rotate(0deg);}
.cal-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px;}
.cal-head b{color:var(--gold2); font-weight:500;}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.cal-grid i{aspect-ratio:1; border-radius:8px; background:rgba(245,247,250,0.05); position:relative; display:grid; place-items:center; font-family:var(--mono); font-size:10px; color:rgba(245,247,250,0.35); font-style:normal; transition:background-color .4s, color .4s, transform .5s cubic-bezier(.19,1,.22,1);}
.cal-grid i.wd{color:rgba(245,247,250,0.2);}
.cal-grid i.on{transform:scale(1.06); color:var(--navy0); font-weight:700;}
.cal-grid i.on.reel{background:var(--gold);} .cal-grid i.on.car{background:#FFD60A;} .cal-grid i.on.story{background:rgba(255,195,0,0.45); color:var(--ink);}
.cal-grid i.on::after{content:''; position:absolute; right:4px; top:4px; width:4px; height:4px; border-radius:50%; background:var(--navy0); opacity:0.5;}
.cal-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim);}
.cal-foot .lg{display:inline-flex; align-items:center; gap:6px;} .cal-foot .lg::before{content:''; width:9px; height:9px; border-radius:3px;}
.cal-foot .reel::before{background:var(--gold);} .cal-foot .car::before{background:#FFD60A;} .cal-foot .story::before{background:rgba(255,195,0,0.45);}
.cal-foot em{font-style:normal; margin-left:auto; color:var(--gold2);}
/* plans */
#planes .section-desc{max-width:56ch;}
#planes .pricing-grid{margin-top:44px; grid-template-columns:1.12fr 1fr 1fr; align-items:stretch;}
#planes .plan{display:flex; flex-direction:column; gap:10px; padding:32px 28px 26px; border-radius:20px; position:relative; isolation:isolate; transform-style:preserve-3d;}
#planes .plan .kicker{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold2);}
#planes .plan-name{font-size:clamp(26px, 2.3vw, 34px); margin:0;}
#planes .what{font-size:15px; line-height:1.5; color:var(--ink); max-width:34ch; min-height:3em;}
#planes .plan-price{font-size:clamp(34px, 3vw, 46px); line-height:1; margin:6px 0 0; color:var(--ink); letter-spacing:-0.04em;}
#planes .plan-price .unit{display:block; margin-top:8px; font-size:12px; letter-spacing:0.04em; text-transform:none; color:var(--ink-dim);}
#planes .plan-price .was{display:inline-block; margin-right:8px;}
#planes .term{font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:var(--gold2); margin-top:-2px;}
#planes .rows{list-style:none; margin:14px 0 0; padding:16px 0 0; border-top:1px solid rgba(245,247,250,0.1); display:grid; gap:10px; font-size:13px; line-height:1.45;}
#planes .rows li{display:flex; gap:10px; align-items:flex-start;}
#planes .rows li i{flex-shrink:0; width:16px; height:16px; margin-top:1px; position:relative;}
#planes .rows li.ok i::before{content:''; position:absolute; left:2px; top:2px; width:5px; height:9px; border:solid var(--gold); border-width:0 2px 2px 0; transform:rotate(45deg);}
#planes .rows li.no{color:var(--ink-dim);}
#planes .rows li.no i::before{content:''; position:absolute; left:2px; top:8px; width:11px; height:1.5px; background:rgba(245,247,250,0.35);}
#planes .ideal{margin-top:14px; padding-top:14px; border-top:1px solid rgba(245,247,250,0.1); font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--ink-dim);}
#planes .combo-note{font-family:var(--mono); font-size:11px; color:var(--gold2); margin-top:4px;}
#planes .plan-btn{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 20px; border-radius:100px;}
#planes .plan-pay{display:block; text-align:center; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-dim); text-decoration:underline; text-underline-offset:4px; min-height:32px;}
#planes .plan-pay:hover{color:var(--gold);}
#planes .plan::before{content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,195,0,0.14), transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; z-index:-1;}
#planes .plan:hover::before{opacity:1;}
.pricing-all{margin:26px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; padding:18px 22px; border-radius:18px; border:1px solid rgba(255,195,0,0.16); background:rgba(0,29,61,0.28);}
.pricing-all > p{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold2); flex-shrink:0;}
.pricing-all .chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; flex:1 1 220px; min-width:0;} /* drops to its own line on narrow phones */
.pricing-all .chips li{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); border:1px solid rgba(245,247,250,0.14); padding:7px 12px; border-radius:100px;}
.pricing-all .chips li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.pricing-all .chips li:last-child{color:var(--ink-dim);} .pricing-all .chips li:last-child::before{background:rgba(245,247,250,0.3);}
/* process + add-ons + FAQ + CTA */
.process-card{border-radius:20px;}
.process-num{font-family:var(--display) !important; font-weight:900; font-stretch:125%; letter-spacing:-0.06em;}
.addons-list{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin-top:28px; padding:0;}
.addons-list li{font-family:var(--mono); font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); border:1px solid rgba(255,195,0,0.3); border-radius:100px; padding:12px 18px; display:inline-flex; align-items:center; gap:10px; transition:border-color .3s, background-color .3s;}
.addons-list li::before{content:'+'; color:var(--gold); font-weight:700;}
.addons-list li:hover{border-color:var(--gold); background:rgba(255,195,0,0.08);}
.faq-list{max-width:900px; gap:0; border-top:1px solid rgba(245,247,250,0.12);}
.faq-item{border:0; border-bottom:1px solid rgba(245,247,250,0.12); border-radius:0; background:transparent; padding:0; counter-increment:faq;}
.faq-item summary{padding:24px 44px 24px 44px; font-family:var(--display); font-weight:700; font-stretch:110%; font-size:clamp(18px, 1.9vw, 26px); letter-spacing:-0.02em; position:relative;}
.faq-item summary::before{content:counter(faq, decimal-leading-zero); position:absolute; left:0; top:28px; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--gold2);}
.faq-item[open] summary{color:var(--gold);}
.faq-item .ans{overflow:hidden;}
.faq-item p{padding:0 0 26px 44px; font-size:16px; line-height:1.65;}
.faq-list{counter-reset:faq;}
.social-cta h2{font-size:clamp(40px, 7vw, 110px);}
.cta-web{margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:0.05em; text-transform:uppercase;}
.cta-web a{color:var(--ink-dim); text-decoration:underline; text-underline-offset:5px;} .cta-web a:hover{color:var(--gold);}
@media (max-width:900px){
  .hero-grid2{grid-template-columns:1fr; gap:30px;}
  .cal{transform:none; max-width:440px;}
  #planes .pricing-grid{grid-template-columns:1fr;}
  #planes .what{min-height:0;}
  .faq-item summary{padding:20px 40px 20px 34px;} .faq-item summary::before{top:24px;} .faq-item p{padding-left:34px;}
  .cal-foot em{margin-left:0; flex-basis:100%;}
}
html.motion-off .cal{transform:none;}