/* 10zero email capture (2026-09-30): the offer form + the slim bar. Shared base styles only; each r5 page
   styles its own offer section around these. Tokens only, no hex. */

/* ---------- offer form ---------- */
.cap-form[hidden],.cap-thanks[hidden],.cap-link[hidden],.cap-err[hidden]{display:none!important}
.cap-form{display:grid;gap:18px;max-width:440px}
.cap-field{display:grid;gap:6px}
.cap-field label{font-family:'Oswald',sans-serif;font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cap-label,var(--tz-oxblood))}
.cap-field input{font:inherit;font-family:'Source Sans 3',sans-serif;font-size:17px;line-height:1.3;padding:12px 14px;min-height:48px;border:1px solid var(--cap-hair,rgba(40,36,33,.28));background:var(--cap-field,var(--tz-paper));color:var(--tz-charcoal);border-radius:0;width:100%}
.cap-field input:focus{outline:2px solid var(--tz-amber);outline-offset:0;border-color:var(--tz-amber)}
.cap-field input[aria-invalid=true]{border-color:var(--tz-oxblood);box-shadow:inset 3px 0 0 var(--tz-oxblood)}
.cap-err{margin:0;font-size:15px;color:var(--cap-err,var(--tz-oxblood))}
.cap-check{display:flex;align-items:center;gap:12px;min-height:44px;font-family:'Source Sans 3',sans-serif;font-size:16px;cursor:pointer;color:inherit}
.cap-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid currentColor;background:transparent;display:grid;place-items:center;cursor:pointer}
.cap-check input::after{content:"";width:12px;height:12px;background:var(--tz-amber);transform:scale(0);transition:transform .16s ease}
.cap-check input:checked::after{transform:scale(1)}
.cap-check input:focus-visible{outline:2px solid var(--tz-amber);outline-offset:3px}
.cap-form .btn{justify-self:start}
.cap-consent{margin:0;font-size:14px;line-height:1.45;max-width:42ch;opacity:.82}
.cap-consent a{color:inherit;text-underline-offset:3px}
.cap-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.cap-thanks{max-width:440px;outline:none}
.cap-thanks p{margin:0;font-size:20px;line-height:1.45}
.cap-ypo-line{margin:0 0 10px}
.cap-ypo-line[hidden]{display:none}

/* ---------- the bar: fixed, so it never shifts layout ---------- */
.cap-bar{position:fixed;z-index:60;display:flex;align-items:center;gap:16px;
  background:var(--cap-bar-bg,var(--tz-paper));color:var(--cap-bar-ink,var(--tz-charcoal));
  font-family:'Source Sans 3',sans-serif;font-size:15px;line-height:1.3;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease;opacity:0;pointer-events:none}
.cap-bar.on{opacity:1;pointer-events:auto}
.cap-bar p{margin:0;flex:1;min-width:0}
.cap-bar .cap-short{display:none}
.cap-bar-go{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;background:var(--tz-amber);color:var(--tz-charcoal);
  font-family:'Oswald',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:14px;text-decoration:none;white-space:nowrap}
.cap-bar-go:hover,.cap-bar-go:focus-visible{background:var(--cap-bar-go-hover,var(--tz-oxblood));color:var(--tz-paper)}
/* the strip's attention cue (Brayden: the whole thing, not just the button): an amber outline that breathes,
   and one slash-angle band that sweeps across when the strip appears. Strokes and a moving flat shape, never a glow. */
.cap-bar>*{position:relative;z-index:1}
.cap-bar::before{content:"";position:absolute;inset:0;border:1.5px solid var(--tz-amber);opacity:0;pointer-events:none;z-index:0}
.cap-bar.on::before{animation:cap-breathe 4s ease-in-out .9s infinite}
@keyframes cap-breathe{0%,100%{opacity:.18}50%{opacity:1}}
.cap-bar::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:18%;background:var(--tz-amber);opacity:.22;
  transform:translateX(-140%) skewX(-28deg);pointer-events:none;z-index:0}
.cap-bar.on::after{animation:cap-sweep 1.3s cubic-bezier(.2,.7,.2,1) .35s 1 both}
@keyframes cap-sweep{0%{transform:translateX(-140%) skewX(-28deg)}100%{transform:translateX(640%) skewX(-28deg)}}
.cap-bar[data-pos=side]::after{display:none}
.cap-bar-x{flex:none;width:44px;height:44px;margin:0 -10px 0 -6px;display:grid;place-items:center;background:none;border:0;color:inherit;cursor:pointer;opacity:.75}
.cap-bar-x:hover{opacity:1}
.cap-bar-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6}
.cap-bar :focus-visible{outline:2px solid var(--tz-amber);outline-offset:2px}

/* bottom (default, and every phone) */
.cap-bar[data-pos=bottom]{left:0;right:0;bottom:0;padding:6px max(24px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  border-top:1px solid var(--cap-bar-hair,rgba(40,36,33,.16));transform:translateY(110%)}
.cap-bar[data-pos=bottom].on{transform:none}
.cap-bar[data-pos=bottom] p,.cap-bar[data-pos=top] p{text-align:right}

/* top: a thin strip tucked under the nav */
.cap-bar[data-pos=top]{left:0;right:0;top:var(--nav-h,64px);padding:4px 24px;z-index:49;
  border-bottom:1px solid var(--cap-bar-hair,rgba(40,36,33,.16));transform:translateY(-110%)}
.cap-bar[data-pos=top].on{transform:none}

/* side: a narrow vertical tab on the right edge */
.cap-bar[data-pos=side]{right:0;top:50%;flex-direction:column;gap:10px;padding:10px 0 14px;width:48px;
  transform:translate(110%,-50%);border:1px solid var(--cap-bar-hair,rgba(40,36,33,.16));border-right:0}
.cap-bar[data-pos=side].on{transform:translate(0,-50%)}
.cap-bar[data-pos=side] p{display:none}
.cap-bar[data-pos=side] .cap-bar-go{writing-mode:vertical-rl;transform:rotate(180deg);min-height:0;padding:16px 0;width:36px;justify-content:center}
.cap-bar[data-pos=side] .cap-bar-x{margin:0;order:-1}

@media (max-width:760px){
  .cap-bar[data-pos]{left:0;right:0;top:auto;bottom:0;width:auto;flex-direction:row;gap:10px;
    padding:4px max(16px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    border:0;border-top:1px solid var(--cap-bar-hair,rgba(40,36,33,.16));transform:translateY(110%)}
  .cap-bar[data-pos].on{transform:none}
  .cap-bar[data-pos] p{display:block;text-align:left;font-size:14px}
  .cap-bar .cap-long{display:none}
  .cap-bar .cap-short{display:inline}
  .cap-bar[data-pos] .cap-bar-go{writing-mode:horizontal-tb;transform:none;width:auto;padding:0 14px;min-height:40px;order:0}
  .cap-bar[data-pos] .cap-bar-x{order:0;margin:0 -10px 0 -6px}
}
@media (prefers-reduced-motion:reduce){.cap-bar{transition:none}.cap-bar.on::before,.cap-bar.on::after{animation:none}}