/* Swell Otter support line, card and the /support page. Uses the colour tokens from spot.css / index.html. */
.so-foot{margin-bottom:6px;font:600 13px/1.45 var(--body);color:var(--cream)}
.so-foot p{margin:0}
footer .so-foot a{color:var(--mustard);font-weight:800}
/* The Premium line in the shared site footer: one calm row, text left, two small pill links right. */
.site-foot .so-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 16px;padding:14px 16px;border:1px solid rgba(239,228,204,.16);border-radius:12px;background:rgba(255,255,255,.04);font:400 13.5px/1.5 var(--body);color:var(--sand)}
.site-foot .so-foot b{font-weight:700;color:var(--cream)}
.so-foot-ctas{display:flex;flex-wrap:wrap;gap:8px;flex:none}
.site-foot .so-foot .so-foot-ctas a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font:800 13px var(--body);text-decoration:none;white-space:nowrap}
.site-foot .so-foot a.so-foot-go{background:var(--mustard);color:var(--navy)}
.site-foot .so-foot a.so-foot-go:hover{background:#f6c25c}
.site-foot .so-foot a.so-foot-coffee{border:1px solid rgba(239,228,204,.35);color:var(--cream)}
.site-foot .so-foot a.so-foot-coffee:hover{border-color:var(--cream)}
@media (max-width:640px){.site-foot .so-foot{flex-direction:column;align-items:flex-start}}
.so-badge{display:inline-block;margin-right:6px;padding:2px 8px 3px;border-radius:999px;background:var(--mustard);color:var(--navy);font:800 11px/1.4 var(--narrow);text-transform:uppercase;letter-spacing:.06em;vertical-align:1px}

.so-sup{margin:18px 14px;padding:16px 16px 18px;background:var(--cream);border:2px solid var(--navy);border-radius:14px;box-shadow:4px 4px 0 var(--mustard);color:var(--ink)}
.a .so-sup{margin-inline:0}
.so-sup h3{margin:0 0 6px;font:400 22px/1.15 var(--display);color:var(--navy);text-shadow:2px 2px 0 var(--mustard)}
.so-sup p{margin:0 0 12px;font:500 14.5px/1.5 var(--body)}
.so-sup--thanks{display:flex;align-items:center;gap:10px;box-shadow:none}
.so-sup--thanks p{margin:0}
.so-btns{display:flex;flex-wrap:wrap;gap:10px}
.so-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:2px solid var(--navy);font:800 15px var(--body);text-decoration:none;color:var(--navy)}
.so-btn svg{width:20px;height:20px;flex:none}
.so-btn--coffee{background:var(--mustard);box-shadow:3px 3px 0 var(--navy)}
.so-btn--coffee:hover{background:#f6c25c}
.so-btn--coffee:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.so-btn--plain{background:var(--paper)}
.so-btn--plain:hover{background:#fff}

/* /support page. Phones: one column. Desktop (1000px+): the site width, plans beside the intro, tables side by side. */
.sitepage main{background:var(--paper)}
.sp{padding:18px 18px 30px;font-size:16px;line-height:1.55}
.sp h1{margin:2px 0 8px;font:400 clamp(30px,7.4vw,42px)/1.08 var(--display);color:var(--navy);text-shadow:3px 3px 0 var(--mustard)}
.sp h2{margin:26px 0 4px;font:400 23px/1.2 var(--display);color:var(--navy)}
.sp-kicker{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:var(--teal);color:var(--cream);font:800 11.5px var(--narrow);text-transform:uppercase;letter-spacing:.1em}
.sp .dek{margin:0 0 14px;font:500 18px/1.5 var(--body);color:var(--navy2);max-width:46ch}
.sp-facts{list-style:none;margin:0 0 6px;padding:0;display:flex;gap:10px}
.sp-facts li{flex:1;padding:10px 12px;background:var(--cream);border:2px solid var(--line);border-radius:12px}
.sp-facts b{display:block;font:400 26px/1.1 var(--display);color:var(--teal)}
.sp-facts span{font:700 12.5px var(--narrow);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sp-plans{display:grid;gap:14px;margin:18px 0 0;align-content:start}
@media (min-width:560px){.sp-plans{grid-template-columns:1fr 1fr}}
.sp-plans .sp-note{grid-column:1/-1;margin:0}
.sp-plan{display:flex;flex-direction:column;padding:16px;background:var(--cream);border:2px solid var(--navy);border-radius:14px}
.sp-plan--star{box-shadow:4px 4px 0 var(--mustard)}
.sp-plan h3{margin:0;font:800 13px var(--narrow);text-transform:uppercase;letter-spacing:.07em;color:var(--teal)}
.sp-plan .amt{margin:4px 0 2px;font:400 34px/1.1 var(--display);color:var(--navy)}
.sp-plan .amt{white-space:nowrap}
.sp-plan .amt small{font:700 15px var(--body);color:var(--muted)}
.sp-plan ul{margin:8px 0 14px;padding-left:20px;font-size:15px}
.sp-plan .so-btn{margin-top:auto;justify-content:center}
.sp-proof{margin:22px 0 0}
.sp-proof:empty{display:none}
.sp-sub{margin:0 0 12px;color:var(--muted);font-size:15px}
.sp-block>h2:first-child{margin-top:28px}

/* cost and comparison tables */
.sp-costs{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:var(--cream);border:2px solid var(--navy);border-radius:12px;overflow:hidden}
.sp-costs th,.sp-costs td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.sp-costs thead th{background:var(--navy);color:var(--sand);font:800 11.5px var(--body);text-transform:uppercase;letter-spacing:.1em;border:0}
.sp-costs tbody th{font:800 15px var(--body);color:var(--navy);white-space:nowrap}
.sp-costs td{color:var(--ink)}
.sp-costs td small{display:block;color:var(--muted);font:600 12.5px var(--narrow);letter-spacing:.02em}
.sp-costs td:last-child,.sp-costs th:last-child{text-align:right;white-space:nowrap}
.sp-costs:not(.sp-vs) td:last-child{width:34%;font:900 17px var(--body);color:var(--navy);font-variant-numeric:tabular-nums}
.sp-costs .bar{display:inline-block;vertical-align:middle;width:calc(var(--w) * .6);max-width:calc(100% - 52px);height:10px;margin-right:10px;border-radius:999px;background:linear-gradient(90deg,var(--teal2),var(--teal))}
.sp-costs tfoot th,.sp-costs tfoot td{background:var(--mustard);border:0;font:900 17px var(--body);color:var(--navy)}
.sp-costs tbody tr:last-child>*{border-bottom:0}
.sp-goal{margin:12px 0 0;padding:10px 14px;border-left:4px solid var(--orange);background:var(--cream);border-radius:0 10px 10px 0}
.sp-vs td:nth-child(2){color:var(--muted)}
.sp-vs td:last-child{font-weight:800;color:var(--teal);white-space:normal}
.sp-note{font-size:13.5px;color:var(--muted)}
.sp-thanks{margin:0 0 16px;padding:14px 16px;background:var(--mustard);border:2px solid var(--navy);border-radius:14px;font-weight:700;color:var(--navy)}
.sp details{margin:8px 0;padding:10px 14px;background:var(--cream);border:2px solid var(--line);border-radius:10px}
.sp details p{margin:6px 0 0}
.sp summary{font-weight:800;cursor:pointer;color:var(--navy)}
@media (max-width:480px){
  .sp-costs th,.sp-costs td{padding:10px 8px}
  .sp-costs:not(.sp-vs) thead th:nth-child(2),.sp-costs:not(.sp-vs) td:nth-child(2){display:none}
  .sp-costs:not(.sp-vs) td:last-child{width:auto}
  .sp-costs .bar{width:calc(var(--w) * .45)}
  .sp-facts b{font-size:22px}
}
@media (min-width:1000px){
  .sitepage main{max-width:1180px;padding:0 28px;border:0;background:none}
  .sp{padding:26px 0 40px}
  .sp-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:start;padding:30px 32px;background:var(--paper);border:2px solid var(--navy);border-radius:16px;box-shadow:6px 6px 0 var(--mustard)}
  .sp h1{font-size:52px}
  .sp .dek{font-size:19px}
  .sp-plans{margin:0}
  .sp-plan .amt{font-size:30px}
  .sp-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
  .sp h2{font-size:27px}
}
.sp-stripe{height:9px;background:linear-gradient(var(--mustard) 0 33%,var(--orange) 33% 66%,var(--rust) 66%)}
[data-support-slot]{display:flow-root}
.sp-vs td:nth-child(2){color:var(--muted)}.sp-vs td:last-child{font-weight:800;color:var(--teal)}.sp-vs td:last-child,.sp-vs th:last-child{white-space:normal}

/* Social proof strip under the intro (same photos as the newsletter sign-up) */
.sp-crew{display:flex;align-items:center;gap:16px;margin:0}
.sp-crew p{margin:0;font:500 16px/1.4 var(--body);color:var(--navy2)}
.sp-crew strong{font-weight:800;color:var(--navy)}
.sp-stars{display:flex;gap:2px;margin-bottom:4px}
.sp-stars svg{width:22px;height:22px;fill:#f5b91c}
.sp-faces{display:flex;flex:none}
.sp-faces img{width:56px;height:56px;margin-left:-14px;border-radius:50%;border:3px solid #fff;object-fit:cover;background:var(--sand);box-shadow:0 1px 4px rgba(20,30,45,.25)}
.sp-faces img:first-child{margin-left:0}
@media (max-width:420px){.sp-faces img{width:46px;height:46px;margin-left:-12px}.sp-crew{gap:12px}.sp-crew p{font-size:15px}}