/* Spanish with Wes – site footer ([sww_footer]) */
.swf{--d:var(--sww-dark,#121C13);--g:var(--sww-green,#AEDF60);--c:var(--sww-cream,#FEFBEC);--m:#8F9A88;--ln:rgba(254,251,236,.12);
  padding:0 16px 16px;font-family:Inter,sans-serif;color:var(--c);container-type:inline-size;box-sizing:border-box;
  /* Break out of a boxed Elementor container: always full screen width */
  width:calc(100vw - var(--swf-sb,0px))!important;max-width:none!important;position:relative;left:50%;margin-left:calc((100vw - var(--swf-sb,0px)) / -2)!important}
.swf *{box-sizing:border-box}
.swf a,.swf a:hover,.swf a:focus{text-decoration:none;color:inherit}
.swf p{margin:0}
.swf .swf-card{background:var(--d);border-radius:28px;overflow:hidden;padding:72px clamp(24px,4vw,64px) 0}

.swf-lbl{font:500 13px "Space Grotesk",sans-serif!important;letter-spacing:.08em;text-transform:uppercase;color:var(--m)!important;margin:0 0 20px!important}

/* Top: signup + link columns */
.swf-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 64px}
.swf-signup{flex:0 1 440px;min-width:0}
.swf .swf-title{font:700 clamp(44px,5vw,64px)/1.02 "Space Grotesk",sans-serif!important;letter-spacing:-.02em!important;color:var(--c)!important;margin:0 0 16px!important;text-transform:none!important}
.swf .swf-title span{color:var(--g)}
.swf .swf-intro{font-size:17px;line-height:1.6;color:#C9CDBF;max-width:440px;margin:0 0 24px}
.swf .swf-intro b{color:var(--c);font-weight:600}

.swf-form{max-width:440px;display:grid;gap:10px}
.swf-fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
.swf .swf-form input[type=text],.swf .swf-form input[type=email]{width:100%;min-width:0;background:transparent!important;border:1.5px solid #3A4A3B!important;border-radius:12px!important;padding:15px 16px!important;
  font:15px Inter,sans-serif!important;color:var(--c)!important;box-shadow:none!important;outline:0}
.swf .swf-form input::placeholder{color:#7D8A7A}
.swf .swf-form input:focus{border-color:var(--g)!important}
.swf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.swf-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#A9AFA2;cursor:pointer}
.swf .swf-consent input{appearance:none;-webkit-appearance:none;flex:none;width:18px!important;height:18px!important;margin:1px 0 0!important;padding:0!important;
  border:1.5px solid #5A6A5B!important;border-radius:5px!important;background:transparent!important;cursor:pointer}
.swf .swf-consent input:checked{background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23121C13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3L15 7'/%3E%3C/svg%3E") center/13px no-repeat!important;border-color:var(--g)!important}
.swf .swf-consent a{text-decoration:underline;text-underline-offset:2px}
.swf .swf-form button{display:flex!important;align-items:center;justify-content:space-between;gap:16px;width:auto!important;justify-self:start;border:0!important;cursor:pointer;
  background:var(--g)!important;color:var(--d)!important;border-radius:12px!important;padding:6px 6px 6px 20px!important;
  font:700 15px "Space Grotesk",sans-serif!important;text-transform:uppercase!important;letter-spacing:.02em;box-shadow:none!important;transition:transform .15s}
.swf .swf-form button:hover{transform:translateY(-1px)}
.swf .swf-form button span{width:40px;height:40px;border-radius:9px;background:var(--d);color:var(--c);display:inline-flex;align-items:center;justify-content:center}
.swf .swf-form button svg{width:18px;height:18px}
.swf-form.is-loading button{opacity:.6;pointer-events:none}
.swf-msg{font-size:14px;color:#FF9C8A}
.swf-msg:empty{display:none}
.swf-done-title{font:700 22px "Space Grotesk",sans-serif;color:var(--g);margin:4px 0 8px!important}

.swf-cols{flex:0 1 auto;display:grid;grid-template-columns:repeat(3,auto);gap:32px clamp(32px,4vw,64px);padding-top:4px}
.swf-cols ul{list-style:none;margin:0;padding:0}
.swf-cols li{margin:0 0 14px}
.swf .swf-cols a{font:700 21px/1.25 "Space Grotesk",sans-serif;color:var(--c);transition:color .15s;white-space:nowrap}
.swf .swf-cols a:hover{color:var(--g)}

/* Middle: legal + contact + icons */
.swf-mid{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:80px;padding-top:36px;border-top:1px solid var(--ln)}
.swf-legal p{font-size:14px;line-height:1.7;color:var(--m)}
.swf-legal .swf-copy{color:#C9CDBF;font-weight:500}
.swf-legal-links{margin-top:6px!important;display:flex;flex-wrap:wrap;gap:6px}
.swf .swf-legal-links a{text-decoration:underline;text-underline-offset:3px}
.swf .swf-legal-links a:hover{color:var(--c)}
.swf-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.swf .swf-contact{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:12px;background:var(--c);color:var(--d);font:500 15px "Space Grotesk",sans-serif;transition:background .15s}
.swf .swf-contact:hover{background:var(--g);color:var(--d)}
.swf-icons{display:flex;gap:8px}
.swf .swf-icon{width:52px;height:52px;flex:none;border-radius:12px;background:rgba(254,251,236,.07);color:var(--c);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.swf .swf-icon svg{width:21px;height:21px}
.swf .swf-icon:hover{background:var(--g);color:var(--d)}

/* Giant wordmark */
/* Only the card's bottom edge cuts the letters; the top is never clipped */
.swf-wm{margin:64px 0 0;text-align:center;line-height:.8;overflow:visible}
.swf .swf-wm span{display:inline-block;font:400 12.4cqw/.8 "SWW Anton",Anton,sans-serif!important;letter-spacing:0!important;text-transform:uppercase;color:var(--g);white-space:nowrap;margin-bottom:-.06em}
@supports not (font-size:1cqw){.swf-wm span{font-size:11.6vw}}

/* ---- Responsive ---- */
/* Smaller screens: slightly smaller links so they still fit next to the signup */
@container (max-width:1180px){
  .swf .swf-cols a{font-size:18px}
  .swf-cols{gap:28px 36px}
}
@container (max-width:700px){
  .swf .swf-card{padding:56px 24px 0;border-radius:24px}
  .swf .swf-title{font-size:42px!important}
  .swf-signup{flex-basis:100%}
  .swf-form{max-width:none}
  .swf-fields{grid-template-columns:1fr}
  .swf .swf-form button{width:100%!important}
  .swf-cols{grid-template-columns:1fr 1fr;gap:28px 20px;width:100%}
  .swf .swf-cols a{font-size:19px;white-space:normal}
  .swf-mid{flex-direction:column;align-items:stretch;gap:24px;margin-top:56px}
  .swf-acts{flex-direction:column;align-items:stretch}
  .swf .swf-contact{width:100%}
  .swf-icons{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
  .swf .swf-icon{width:auto;height:52px}
  .swf-wm{margin-top:48px}
}
@container (max-width:360px){
  .swf .swf-icon{height:46px}
  .swf .swf-icon svg{width:19px;height:19px}
}

/* Guard: stop theme / Elementor link colors (like blue on hover) inside the header, footer and contact page.
   Must stay stronger than ".elementor-kit-X a:hover" but weaker than our own hover rules. */
body .swh a:is(:hover,:focus,:active),body .swf a:is(:hover,:focus,:active),body .swc a:is(:hover,:focus,:active){color:inherit}
body .swh a.swh-logo{color:var(--green,#AEDF60)}
body .swh a.swh-cta{color:var(--dark,#121C13)}
body .swh .swh-m-cta a.swh-cta{color:var(--cream,#FEFBEC)}
body .swh .swh-nav > li > a:hover{color:var(--green,#AEDF60)}
body .swh .swh-links a:hover{color:#5f8f1c}
body .swh a.swh-donate:hover{color:var(--dark,#121C13)}
body .swh-bar > .swh-actions a.swh-cta:hover{color:var(--green,#AEDF60)}

/* Button hover (same as "Paid courses" in the header): dark fill wipes in from the arrow,
   text turns green, arrow square turns green and the arrow shoots out and back. */
.swf .swf-form button{position:relative;overflow:hidden;isolation:isolate;transition:transform .15s,color .3s!important}
.swf .swf-form button::before{content:"";position:absolute;inset:2px;z-index:-1;background:var(--d);border-radius:10px;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.swf .swf-form button:is(:hover,:focus-visible){color:var(--g)!important}
.swf .swf-form button:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.swf .swf-form button span{overflow:hidden;transition:background .3s,color .3s}
.swf .swf-form button:is(:hover,:focus-visible) span{background:var(--g);color:var(--d)}
.swf .swf-form button:hover span svg{animation:sww-arrow .45s ease-in-out}
@keyframes sww-arrow{0%{transform:translateX(0)}45%{transform:translateX(160%);opacity:0}55%{transform:translateX(-160%);opacity:0}100%{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.swf .swf-form button:hover span svg{animation:none}}

/* mobile: deck button only as wide as its text, arrow right after "deck" */
@container (max-width:700px){.swf .swf-form button{width:auto!important;justify-self:start}}