.newsletter-pulse-guard{position:fixed;top:0;right:0;width:200px;height:100px;z-index:2990;pointer-events:none;background:transparent}
.newsletter-pulse{position:fixed;top:16px;right:16px;z-index:3001;width:32px;height:32px;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.newsletter-pulse img{display:block;width:100%;height:100%;object-fit:contain}
.newsletter-stage{position:fixed;inset:0;z-index:3000;overflow:hidden;clip-path:inset(0 0 0 100%);transition:clip-path .92s cubic-bezier(.77,0,.18,1);pointer-events:none;visibility:hidden}
.newsletter-stage.is-open{clip-path:inset(0);pointer-events:auto;visibility:visible}
.newsletter-shader-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.newsletter-close{position:absolute;top:32px;right:32px;z-index:3;border:0;padding:0;background:none;color:#fff;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;cursor:pointer}
.newsletter-center{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px;pointer-events:none}
.newsletter-glass{width:min(520px,calc(100vw - 32px));padding:30px;border:1px solid rgba(255,255,255,.28);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.07));box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);pointer-events:auto;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.newsletter-glass.resetting{opacity:0;transform:scale(.97)}
.newsletter-title{margin:0 0 12px;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:38px;line-height:1;text-transform:uppercase}
.newsletter-copy{margin:0 0 26px;font-size:15px;line-height:1.45}
.newsletter-field-label{display:block;margin:0 0 8px;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;text-transform:uppercase}
.newsletter-email{display:block;width:100%;height:50px;padding:0 15px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(0,0,0,.18);color:#fff;font:16px Arial,sans-serif;outline:none}
.newsletter-submit{display:block;width:100%;height:50px;margin-top:12px;border:0;border-radius:14px;background:#fff;color:#000;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;cursor:pointer}
.newsletter-feedback{min-height:16px;margin-top:12px;font-size:12px}
.newsletter-success{min-height:180px;display:grid;place-items:center;text-align:center;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:34px;text-transform:uppercase}
body.newsletter-open .trail-image{visibility:hidden!important}
@media(max-width:700px){.newsletter-pulse{width:28px;height:28px}.newsletter-close{top:20px;right:20px}.newsletter-glass{padding:24px;border-radius:22px}.newsletter-title{font-size:30px}}



/* newsletter overlay header */
.newsletter-pulse{
  top:0 !important;
  right:0 !important;
}
.newsletter-overlay-logo{
  position:absolute;
  left:41px;
  top:32px;
  z-index:3;
  display:block;
}
.newsletter-overlay-logo img{
  display:block;
  width:40.53px;
  height:58px;
  object-fit:contain;
}
/* Pulse belongs to the test page only, never the shader overlay. */
body.newsletter-open .newsletter-pulse,
body.newsletter-open .newsletter-pulse-guard{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.newsletter-overlay-logo{position:fixed;z-index:3;display:block;margin:0;padding:0}
.newsletter-overlay-logo img{display:block;width:100%;height:100%;object-fit:contain}
.newsletter-glass{position:relative;transform:none!important;perspective:850px;overflow:visible}
.newsletter-card-front,.newsletter-card-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;will-change:transform}
.newsletter-card-front{position:relative}
.newsletter-card-back{display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Eurostile MN Extended','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:34px;text-transform:uppercase;visibility:hidden}

/* Newsletter subscribe button refinement */
.newsletter-submit{
  font-size:16px;
  transition:background-color .28s cubic-bezier(.22,1,.36,1),
             color .28s cubic-bezier(.22,1,.36,1),
             transform .28s cubic-bezier(.22,1,.36,1);
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:#000;
  color:#fff;
  transform:scale(.985);
  outline:none;
}

/* Newsletter label + Tokonoma-style difference sweep */
.newsletter-field-label{
  font-size:13px;
}

.newsletter-submit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
  color:#000;
  transform:none;
}

.newsletter-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#fff;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .34s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
  mix-blend-mode:difference;
}

.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:#fff;
  color:#000;
  transform:none;
}

.newsletter-submit:hover::before,
.newsletter-submit:focus-visible::before{
  clip-path:inset(0 0 0 0);
}

.newsletter-submit{
  mix-blend-mode:normal;
}

/* Transparent shader-reveal sweep: no black fill / no corner residue */
.newsletter-submit{
  isolation:isolate;
  overflow:hidden;
}
.newsletter-submit::before{
  background:rgba(0,0,0,1);
  mix-blend-mode:destination-out;
  border-radius:inherit;
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:#fff;
  color:#000;
}

/* White SUBSCRIBE text while transparent hover sweep reveals shader */
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  color:#fff;
}

/* Final newsletter interaction states */

/* Button: white normally, sweep removes the white layer to TRUE transparency. */
.newsletter-submit{
  position:relative;
  overflow:hidden;
  isolation:auto;
  background:#fff;
  color:#000;
  border:0;
}
.newsletter-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:transparent;
  border-radius:inherit;
  clip-path:inset(0 100% 0 0 round 14px);
  transition:clip-path .34s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
  mix-blend-mode:normal;
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:transparent !important;
  color:#fff;
}
.newsletter-submit:hover::before,
.newsletter-submit:focus-visible::before{
  clip-path:inset(0 0 0 0 round 14px);
}

/* Active/focused email field */
.newsletter-email:focus{
  border:2px solid #000;
  outline:none;
}

/* Validation/error state */
.newsletter-email.is-error,
.newsletter-email[aria-invalid="true"]{
  border:2px solid #f00 !important;
  outline:none;
}
.newsletter-feedback.is-error{
  color:#f00;
}

/* True shader window through the frosted glass.
   The glass blur is removed only behind the button footprint on hover. */
.newsletter-glass{
  --button-cutout-x: 30px;
  --button-cutout-right: 30px;
  --button-cutout-bottom: 58px;
  --button-cutout-height: 50px;
}
.newsletter-glass::after{
  content:"";
  position:absolute;
  left:var(--button-cutout-x);
  right:var(--button-cutout-right);
  bottom:var(--button-cutout-bottom);
  height:var(--button-cutout-height);
  border-radius:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity .34s cubic-bezier(.65,0,.35,1);
  /* Counter the glass backdrop blur in the button area by disabling it here. */
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* On hover the card itself is masked out under the button, so the iframe shader is direct. */
.newsletter-glass:has(.newsletter-submit:hover),
.newsletter-glass:has(.newsletter-submit:focus-visible){
  -webkit-mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
}

/* Use a transparent pseudo-layer over the button area; button remains above it. */
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:rgba(255,255,255,0) !important;
  color:#fff;
  border-color:transparent;
}

/* Focus/active field is 2px WHITE. Error red still wins. */
.newsletter-email:focus{
  border:2px solid #fff;
  outline:none;
}
.newsletter-email.is-error:focus,
.newsletter-email[aria-invalid="true"]:focus{
  border:2px solid #f00 !important;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  .newsletter-glass:has(.newsletter-submit:hover),
  .newsletter-glass:has(.newsletter-submit:focus-visible){
    -webkit-mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
    -webkit-mask-size:
      100% 100%,
      calc(100% - 60px) 50px;
    -webkit-mask-position:
      0 0,
      30px calc(100% - 58px);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-composite:xor;

    mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
    mask-size:
      100% 100%,
      calc(100% - 60px) 50px;
    mask-position:
      0 0,
      30px calc(100% - 58px);
    mask-repeat:no-repeat;
    mask-composite:exclude;
  }
}

/* v17 — exact button cutout + visible white label + red validation feedback */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)){
  .newsletter-glass:has(.newsletter-submit:hover),
  .newsletter-glass:has(.newsletter-submit:focus-visible){
    -webkit-mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
    -webkit-mask-size:
      100% 100%,
      calc(100% - 60px) 50px;
    -webkit-mask-position:
      0 0,
      30px calc(100% - 58px);
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-composite:xor;

    mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
    mask-size:
      100% 100%,
      calc(100% - 60px) 50px;
    mask-position:
      0 0,
      30px calc(100% - 58px);
    mask-repeat:no-repeat;
    mask-composite:exclude;
  }

  /* Give the punched window the SAME 14px rounded corners as the button. */
  .newsletter-glass:has(.newsletter-submit:hover)::before,
  .newsletter-glass:has(.newsletter-submit:focus-visible)::before{
    content:"";
    position:absolute;
    left:30px;
    right:30px;
    bottom:58px;
    height:50px;
    border-radius:14px;
    pointer-events:none;
  }
}

/* Keep the label above all transparency/masking effects. */
.newsletter-submit{
  z-index:5;
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

/* Every validation feedback/error message is red. */
.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"]{
  color:#f00 !important;
}
.newsletter-email.is-error + .newsletter-submit + .newsletter-feedback,
.newsletter-email[aria-invalid="true"] ~ .newsletter-feedback{
  color:#f00 !important;
}

/* v18 — black sweep, white hover label, white placeholder, pill errors */

/* No glass cutout on hover. */
.newsletter-glass:has(.newsletter-submit:hover),
.newsletter-glass:has(.newsletter-submit:focus-visible){
  -webkit-mask:none !important;
  mask:none !important;
}
.newsletter-glass:has(.newsletter-submit:hover)::before,
.newsletter-glass:has(.newsletter-submit:focus-visible)::before{
  content:none !important;
}

/* White button at rest; black layer sweeps left -> right on hover. */
.newsletter-submit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff !important;
  color:#000 !important;
  z-index:1;
}
.newsletter-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:#000 !important;
  border-radius:inherit;
  clip-path:inset(0 100% 0 0 round 14px);
  transition:clip-path .34s cubic-bezier(.65,0,.35,1);
  mix-blend-mode:normal !important;
  pointer-events:none;
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:#fff !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.newsletter-submit:hover::before,
.newsletter-submit:focus-visible::before{
  clip-path:inset(0 0 0 0 round 14px);
}

/* Placeholder */
.newsletter-email::placeholder{
  color:#fff !important;
  opacity:1;
}

/* Error feedback pill */
.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"],
.newsletter-email.is-error ~ .newsletter-feedback,
.newsletter-email[aria-invalid="true"] ~ .newsletter-feedback{
  display:table;
  min-height:0;
  margin-top:12px;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  color:#f00 !important;
  line-height:1.2;
}

/* v19 — square sweep rectangle + text intersection via difference */
.newsletter-submit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff !important;
  color:#000 !important;
  -webkit-text-fill-color:currentColor !important;
}

/* Square-edged black rectangle: button itself still keeps its rounded clipping. */
.newsletter-submit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#000 !important;
  border-radius:0 !important;
  clip-path:inset(0 100% 0 0) !important;
  transition:clip-path .34s cubic-bezier(.65,0,.35,1);
  mix-blend-mode:normal !important;
  pointer-events:none;
}
.newsletter-submit:hover::before,
.newsletter-submit:focus-visible::before{
  clip-path:inset(0 0 0 0) !important;
}

/* The label sits ABOVE the sweep and uses difference, so the black rectangle
   visibly intersects/inverts the letters as it crosses them. */
.newsletter-submit{
  text-indent:-9999px;
}
.newsletter-submit::after{
  content:"SUBSCRIBE";
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-indent:0;
  color:#fff;
  -webkit-text-fill-color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
}
.newsletter-submit:hover,
.newsletter-submit:focus-visible{
  background:#fff !important;
  color:#000 !important;
}

/* v20 — attached validation block, matching reference */
.newsletter-email.is-error,
.newsletter-email[aria-invalid="true"]{
  border:2px solid #f00 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

/* Error message becomes an attached block directly below the input.
   Keep the existing outer 14px corner radius on the bottom corners. */
.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"],
.newsletter-email.is-error ~ .newsletter-feedback,
.newsletter-email[aria-invalid="true"] ~ .newsletter-feedback{
  display:block !important;
  width:100%;
  box-sizing:border-box;
  min-height:0;
  margin:0 !important;
  padding:14px 15px;
  border-radius:0 0 14px 14px !important;
  background:#fff !important;
  color:#f00 !important;
  line-height:1.25;
}

/* The submit button follows below the attached error block. */
.newsletter-feedback.is-error + .newsletter-submit,
.newsletter-feedback[data-state="error"] + .newsletter-submit{
  margin-top:12px;
}

/* v21 — stitched animated error panel */
.newsletter-feedback{
 box-sizing:border-box;overflow:hidden;max-height:0;min-height:0!important;
 margin:0!important;padding:0 15px!important;opacity:0;transform:translateY(-8px);
 border-radius:0 0 14px 14px;
 transition:max-height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),opacity .24s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"],
.newsletter-email.is-error ~ .newsletter-feedback,
.newsletter-email[aria-invalid="true"] ~ .newsletter-feedback{
 display:block!important;width:100%;max-height:72px;margin:0!important;
 padding:14px 15px!important;background:#f00!important;color:#fff!important;
 border-radius:0 0 14px 14px!important;opacity:1;transform:translateY(0);line-height:1.25;
}
.newsletter-email.is-error,
.newsletter-email[aria-invalid="true"]{
 border:2px solid #f00!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
}
.newsletter-submit{
 transition:margin-top .42s cubic-bezier(.22,1,.36,1),color .28s cubic-bezier(.22,1,.36,1);
}

/* v22 — stitched input/error + 48px CTA separation + glass divider */

/* Input + error are one continuous component. */
.newsletter-email.is-error,
.newsletter-email[aria-invalid="true"]{
  margin-bottom:0 !important;
  border:2px solid #f00 !important;
  border-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

.newsletter-feedback{
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  max-height:0;
  min-height:0 !important;
  margin:0 !important;
  padding:0 15px !important;
  opacity:0;
  transform:translateY(-6px);
  transition:
    max-height .42s cubic-bezier(.22,1,.36,1),
    padding .42s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    transform .42s cubic-bezier(.22,1,.36,1);
}

.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"],
.newsletter-email.is-error ~ .newsletter-feedback,
.newsletter-email[aria-invalid="true"] ~ .newsletter-feedback{
  display:block !important;
  max-height:72px;
  margin:0 !important;
  padding:14px 15px !important;
  background:#f00 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-radius:0 0 14px 14px !important;
  opacity:1;
  transform:translateY(0);
  line-height:1.25;
}

/* CTA section: 48px breathing room from the input/error component. */
.newsletter-submit{
  position:relative;
  margin-top:48px !important;
}

/* Frosted/glass divider halfway through the 48px gap. */
.newsletter-submit::marker{ display:none; }
#newsletterForm{
  position:relative;
}
.newsletter-submit::after{
  /* existing ::after is used by the difference SUBSCRIBE label */
}

/* Divider is attached to the CTA and sits 24px above it. */
.newsletter-submit{
  --newsletter-divider-gap:24px;
}
.newsletter-submit:before{
  /* keep existing black sweep pseudo-element untouched */
}

/* Separate divider using the feedback element's following geometry via form pseudo-element. */
#newsletterForm::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
  z-index:0;
  /* Input is 50px + label spacing; JS-free placement tracks CTA by bottom offset. */
  bottom:74px;
}

/* Keep CTA/sweep above divider. */
.newsletter-submit{
  z-index:2;
}

/* Actual divider in document flow: 24px above + 24px below = 48px total gap. */
#newsletterForm::after{content:none !important;}
.newsletter-divider{
  width:100%;
  height:1px;
  margin:24px 0 23px;
  background:rgba(255,255,255,.32);
  box-shadow:0 0 12px rgba(255,255,255,.08);
  pointer-events:none;
}
.newsletter-divider + .newsletter-submit{
  margin-top:0 !important;
}

/* v23 — feedback belongs to input; divider bleeds to glass edges */

/* INPUT + ERROR: one stitched component */
.newsletter-email.is-error,
.newsletter-email[aria-invalid="true"]{
  margin-bottom:0 !important;
  border:2px solid #f00 !important;
  border-bottom:0 !important;
  border-radius:14px 14px 0 0 !important;
}

.newsletter-feedback{
  display:block;
  box-sizing:border-box;
  width:100%;
  overflow:hidden;
  max-height:0;
  min-height:0 !important;
  margin:0 !important;
  padding:0 15px !important;
  opacity:0;
  transform:translateY(-6px);
  border-radius:0 0 14px 14px;
  transition:
    max-height .42s cubic-bezier(.22,1,.36,1),
    padding .42s cubic-bezier(.22,1,.36,1),
    opacity .22s ease,
    transform .42s cubic-bezier(.22,1,.36,1);
}

.newsletter-feedback.is-error,
.newsletter-feedback[data-state="error"],
.newsletter-feedback[aria-invalid="true"]{
  max-height:72px;
  padding:14px 15px !important;
  background:#f00 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border-radius:0 0 14px 14px !important;
  opacity:1;
  transform:translateY(0);
  line-height:1.25;
}

/* DIVIDER: full width of the frosted glass, from left edge to right edge.
   Glass has 30px inner padding, so bleed it outward by exactly 30px. */
.newsletter-divider{
  width:calc(100% + 60px) !important;
  height:1px;
  margin:24px -30px 23px !important;
  background:rgba(255,255,255,.32);
  box-shadow:0 0 12px rgba(255,255,255,.08);
  pointer-events:none;
}

/* CTA stays after divider; error expansion pushes divider + CTA down naturally. */
.newsletter-divider + .newsletter-submit{
  margin-top:0 !important;
}

/* v24 — centered intro + additional paragraph spacing */
.newsletter-title,
.newsletter-copy{
  text-align:center !important;
  color:#fff;
}

.newsletter-copy{
  margin-bottom:58px !important;
}

.newsletter-field-label{
  color:#fff;
}

/* v25 — intro spacing + two-line success */
.newsletter-copy{
  margin-bottom:46px !important;
}
.newsletter-card-back{
  white-space:pre-line;
  line-height:1.25;
  color:#fff;
}

/* v26 — root-size white cursor + larger intro copy */
.newsletter-copy{
  font-size:19px !important; /* 15px + 4px */
}

/* Same 12px cursor-dot size as tokonoma.xyz root, white for newsletter. */
.newsletter-stage,
.newsletter-stage *{
  cursor:none !important;
}
.newsletter-cursor-dot{
  position:fixed;
  left:0;
  top:0;
  z-index:10000;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  translate:-50% -50%;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.newsletter-stage.is-open .newsletter-cursor-dot{
  opacity:1;
  visibility:visible;
}
@media (hover:none), (pointer:coarse){
  .newsletter-cursor-dot{display:none !important;}
}

/* v27 — cursor lives outside the frosted/backdrop-filter tree */
.newsletter-cursor-dot{
  position:fixed !important;
  left:0;
  top:0;
  z-index:2147483647 !important;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%) !important;
  translate:none !important;
  pointer-events:none !important;
  opacity:0;
  visibility:hidden;
}
body.newsletter-open .newsletter-cursor-dot{
  opacity:1;
  visibility:visible;
}

/* v28 — restore normal browser cursor */
.newsletter-stage,
.newsletter-stage *{
  cursor:auto !important;
}
.newsletter-close,
.newsletter-submit,
.newsletter-pulse{
  cursor:pointer !important;
}
.newsletter-email{
  cursor:text !important;
}
.newsletter-cursor-dot{
  display:none !important;
}


/* PRODUCTION DEDICATED PAGE */
html.newsletter-page,
html.newsletter-page body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#000;
}
.newsletter-page .newsletter-pulse,
.newsletter-page .newsletter-pulse-guard{
  display:none !important;
}
/* Root logo geometry, exactly matching desktop root. */
.newsletter-page .newsletter-overlay-logo{
  left:41px !important;
  top:32px !important;
  width:40.53px !important;
  height:58px !important;
}
/* Dedicated page uses normal browser cursors. */
.newsletter-page,
.newsletter-page *{ cursor:auto; }
.newsletter-page .newsletter-close,
.newsletter-page .newsletter-submit,
.newsletter-page .newsletter-overlay-logo{ cursor:pointer !important; }
.newsletter-page .newsletter-email{ cursor:text !important; }




/* Standalone newsletter logo — exact root desktop geometry */
.newsletter-page .newsletter-overlay-logo{
  position:fixed !important;
  left:41px !important;
  top:32px !important;
  right:auto !important;
  bottom:auto !important;
  width:40.53px !important;
  height:58px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  translate:none !important;
  z-index:2147483646 !important;
  display:block !important;
}
.newsletter-page .newsletter-overlay-logo img{
  display:block !important;
  width:40.53px !important;
  height:58px !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:contain !important;
}


/* FINAL standalone header geometry: identical to root .brand-nav > logo */
html.newsletter-page body .newsletter-overlay-logo{
  position:fixed !important;
  inset:auto !important;
  left:41px !important;
  top:32px !important;
  width:40.53px !important;
  height:58px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  rotate:none !important;
  line-height:0 !important;
  z-index:3003 !important;
}
html.newsletter-page body .newsletter-overlay-logo > img{
  position:static !important;
  display:block !important;
  width:40.53px !important;
  height:58px !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  rotate:none !important;
  object-fit:contain !important;
}


/* REAL EXIT SWEEP
   A visible full-height panel grows from the right edge across the newsletter.
   Navigation is delayed until the panel has fully covered the viewport. */
.newsletter-exit-sweep{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:0;
  z-index:2147483647;
  pointer-events:none;
  background:#000;
  will-change:width;
}
.newsletter-exit-sweep.is-active{
  width:100vw;
  transition:width .78s cubic-bezier(.65,0,.35,1);
}


/* OUMAHI.ART — final standalone header override.
   Matches the production homepage .top-logo geometry. */
html.newsletter-page body .newsletter-overlay-logo{
  position:fixed !important;
  inset:auto !important;
  left:32px !important;
  top:32px !important;
  width:min(60vw, 200px) !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  rotate:none !important;
  line-height:0 !important;
  z-index:3003 !important;
}
html.newsletter-page body .newsletter-overlay-logo > img{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  object-fit:contain !important;
}


/* OUMAHI newsletter — mobile frame alignment
   The glass CENTER sits exactly halfway between the rendered logo bottom and
   the live browser bottom. JS writes --newsletter-mobile-center-y in px. */
@media (max-width:700px){
  html.newsletter-page,
  html.newsletter-page body,
  .newsletter-page .newsletter-stage{
    width:100%;
    height:100%;
    min-height:100dvh;
  }

  .newsletter-page .newsletter-center{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    padding:0 !important;
    pointer-events:none;
  }

  .newsletter-page .newsletter-glass{
    position:absolute !important;
    left:50% !important;
    top:var(--newsletter-mobile-center-y, 50dvh) !important;
    box-sizing:border-box;
    width:calc(100% - 32px) !important;
    max-width:520px;
    padding:24px !important;
    margin:0 !important;
    transform:translate(-50%, -50%) !important;
  }

  /* Stop one physical pixel inside the glass border and remove the glow on
     mobile, so the divider can never appear outside the rounded frame. */
  .newsletter-page .newsletter-divider{
    width:calc(100% + 46px) !important;
    max-width:calc(100% + 46px) !important;
    margin:24px -23px 23px !important;
    box-shadow:none !important;
  }
}


/* OUMAHI newsletter — mobile keyboard interpolation
   JS continuously interpolates these values from VisualViewport instead of
   snapping between focus/blur states. The glass always uses the SAME center
   transform, so opening/closing the iOS keyboard cannot switch transform
   modes mid-animation. */
@media (max-width:700px){
  html.newsletter-page body .newsletter-overlay-logo,
  .newsletter-page .newsletter-close{
    will-change:transform, opacity;
    transform:translateY(var(--newsletter-mobile-header-y, 0px)) !important;
    opacity:var(--newsletter-mobile-header-opacity, 1) !important;
    transition:none !important;
  }

  html.newsletter-page.newsletter-keyboard-open body .newsletter-overlay-logo,
  html.newsletter-page.newsletter-keyboard-open body .newsletter-close{
    pointer-events:none !important;
  }

  html.newsletter-page body .newsletter-glass,
  html.newsletter-page.newsletter-keyboard-open body .newsletter-glass{
    top:var(--newsletter-mobile-center-y, 50dvh) !important;
    transform:translate(-50%, -50%) !important;
    transition:opacity .3s ease !important;
    will-change:top;
  }
}