@font-face{font-family:'Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(../fonts/plexsans-latin.woff2) format('woff2')}
@font-face{font-family:'Plex Cond';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plexcond-700-latin.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plexmono-500-latin.woff2) format('woff2')}
:root{
  --art-weathered-hazard:url(../IEEE3173/PNG/512px/Weathered/edc_fill_weathered_1.png);
  --art-weathered-free:url(../IEEE3173/PNG/512px/Weathered/edc_free_fill_weathered_1.png);
}

/* ---------------------------------------------------------------
   Tokens. Teal is the system accent, shared with Botmark so the two
   IEEE sites read as siblings. Neutrals are graphite-slate (painted
   steel, the substrate of real signage) rather than warm paper.

   Amber is NOT the brand colour here; it is reserved for the places
   where yellow carries meaning: the mark's own artwork, the ISO 7010
   triangle (amber is that standard's spec, not a choice), the hazard
   chip, and the caution stripe. Everything cool around it makes the
   one warm thing on the page the symbol itself.

   Accent polarity is handled the way Botmark does it: teal is dark on
   light grounds and bright on dark ones, with --on-accent flipping to
   match, so a button never lands light-on-light.
   --------------------------------------------------------------- */
:root{
  --teal:#1F6B63;
  --teal-bright:#5FCEBE;
  --teal-soft:#A7EADF;
  --teal-mist:#CEEFEB;

  --accent:#1F6B63;
  --on-accent:#FFFFFF;
  --accent-hover:#17544E;

  --hazard:#F4C738;
  --hazard-deep:#DD9619;
  --hazard-pale:#F7E7BC;
  --free:#81991C;

  --ink:#15161C;
  --bg:#F4F4F1;
  --surface:#FFFFFF;
  --surface-alt:#E9EAE4;
  --text:#15161C;
  --text-soft:#585C66;
  --border:#D9DAD2;
  --rule:#C6C8BE;
  --link:#1F6B63;
  --accent-text:#1F6B63;
  --grid-line:rgba(21,22,28,.07);
  --shadow:0 1px 2px rgba(21,22,28,.05), 0 8px 24px rgba(21,22,28,.06);
  --plate:#101116;
  --on-plate:#F2F2EE;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D0E13;
    --surface:#181A21;
    --surface-alt:#121319;
    --text:#EDEEF2;
    --text-soft:#9BA0AC;
    --border:#272A33;
    --rule:#333743;
    --link:#5FCEBE;
    --accent:#5FCEBE;
    --on-accent:#0D0E13;
    --accent-hover:#8CDDD0;
    --accent-text:#5FCEBE;
    --grid-line:rgba(237,238,242,.06);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
    --plate:#05060A;
  }
}
:root[data-theme="dark"]{
  --bg:#0D0E13;
  --surface:#181A21;
  --surface-alt:#121319;
  --text:#EDEEF2;
  --text-soft:#9BA0AC;
  --border:#272A33;
  --rule:#333743;
  --link:#5FCEBE;
  --accent:#5FCEBE;
  --on-accent:#0D0E13;
  --accent-hover:#8CDDD0;
  --accent-text:#5FCEBE;
  --grid-line:rgba(237,238,242,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --plate:#05060A;
}
:root[data-theme="light"]{
  --bg:#F4F4F1;
  --surface:#FFFFFF;
  --surface-alt:#E9EAE4;
  --text:#15161C;
  --text-soft:#585C66;
  --border:#D9DAD2;
  --rule:#C6C8BE;
  --link:#1F6B63;
  --accent:#1F6B63;
  --on-accent:#FFFFFF;
  --accent-hover:#17544E;
  --accent-text:#1F6B63;
  --grid-line:rgba(21,22,28,.07);
  --shadow:0 1px 2px rgba(21,22,28,.05), 0 8px 24px rgba(21,22,28,.06);
  --plate:#101116;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Plex Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:1.02rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
img,svg{max-width:100%}
a{color:var(--link)}
/* The offset puts the ring on the page ground, not the control, so the accent
   reads against it. The plate is dark in both themes, so controls sitting on it
   need the bright teal instead. */
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:2px}
.plate :focus-visible,.film :focus-visible,.deeptime :focus-visible{outline-color:var(--teal-bright)}

h1,h2,h3,.wordmark,.stat-num{
  font-family:'Plex Cond','Plex Sans',ui-sans-serif,sans-serif;
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.2vw,4.5rem);line-height:.99;letter-spacing:-.005em}
h2{font-size:clamp(1.95rem,3.8vw,2.75rem);line-height:1.05;letter-spacing:-.005em}
h3{font-family:'Plex Sans',sans-serif;font-weight:600;font-size:1.02rem;line-height:1.35;letter-spacing:0}

/* Mono is the annotation voice: eyebrows, designations, spec data. */
.eyebrow,.spec,.toggle button,.chip,.field-std,.dl-fine{
  font-family:'Plex Mono',ui-monospace,monospace;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.7rem;
}
.eyebrow{
  display:inline-block;color:var(--text-soft);
  padding-bottom:14px;
}
.eyebrow b{color:var(--text);font-weight:500}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.prose p{max-width:66ch}
.prose p + p{margin-top:1.1em}
.prose strong{font-weight:600;color:var(--text)}

section{padding:86px 0;border-top:1px solid var(--border)}
section.alt{background:var(--surface-alt)}
.sec-head{max-width:62ch;margin-bottom:44px}
.sec-head h2{margin-bottom:14px}
.sec-head p{color:var(--text-soft)}

/* --- the mark ------------------------------------------------------
   Four style layers stack; the active one is revealed. Colour art keeps
   its own fills; fill/outline inherit currentColor; the weathered art is
   a PNG used as a mask so it also takes the ink colour.
   ------------------------------------------------------------------ */
.mark{position:relative;display:block;width:100%;aspect-ratio:1/1;color:var(--text)}
.mark-layer{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .3s ease;
}
.mark[data-style="color"]    .mark-layer[data-style="color"],
.mark[data-style="fill"]     .mark-layer[data-style="fill"],
.mark[data-style="outline"]  .mark-layer[data-style="outline"],
.mark[data-style="weathered"] .mark-layer[data-style="weathered"]{opacity:1}
.mark-weathered{
  background-color:currentColor;
  -webkit-mask-image:var(--art);mask-image:var(--art);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}

/* --- header --------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent);padding:10px 16px;font-weight:600}
.skip:focus{left:0}

header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:28px;padding:12px 0}
.wordmark{
  display:flex;align-items:center;gap:11px;
  font-size:1.22rem;letter-spacing:.005em;
  color:var(--text);text-decoration:none;
}
.wordmark .mark{width:26px;flex:none}
.nav ul{display:flex;gap:24px;list-style:none;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--text-soft);text-decoration:none;font-size:.9rem;font-weight:600}
.nav a:hover{color:var(--text)}
.nav .nav-cta{
  background:var(--accent);color:var(--on-accent);
  padding:7px 16px;border-radius:3px;
}
.nav .nav-cta:hover{background:var(--accent-hover);color:var(--on-accent)}
@media (max-width:860px){.nav ul li:not(:last-child){display:none}}

/* --- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:.94rem;text-decoration:none;
  padding:13px 24px;border-radius:3px;
  border:2px solid var(--accent);
  transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--rule)}
.btn.ghost:hover{background:transparent;border-color:var(--text)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* --- hero ----------------------------------------------------------- */
.hero{border-top:none;padding:76px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero .lede{margin-top:22px;font-size:1.16rem;color:var(--text-soft);max-width:46ch}

/* A mounted sign: dark bezel, light sign face. The face matters. The colour mark
   is drawn with black keylines for a light ground, so on a dark one its contours
   disappear into the background and the blades merge. */
.plate{
  background:var(--plate);
  border-radius:4px;
  padding:14px;
  box-shadow:var(--shadow);
}
.plate-face{
  background:#F2F1EA;
  border-radius:2px;
  padding:clamp(26px,4.5vw,48px);
  display:grid;place-items:center;
}
.plate-face .mark{max-width:330px;color:var(--ink)}
.plate-caption{
  display:block;margin-top:12px;
  text-align:center;color:var(--text-soft);
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  /* justify-self, never `margin:0 auto`. Auto margins cancel a grid item's stretch,
     which drops it to shrink-to-fit, and every mark layer is absolutely positioned,
     so the mark's max-content width is 0 and the whole plate collapses. */
  .hero-figure{width:100%;max-width:420px;justify-self:center}
}

/* --- caution stripe: the one loud gesture, used once ---------------- */
.stripe{
  height:10px;
  background:repeating-linear-gradient(
    -45deg,var(--hazard) 0 14px,var(--ink) 14px 28px
  );
}

/* --- film ----------------------------------------------------------- */
.film{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  background:var(--plate);color:var(--on-plate);
  border-radius:4px;overflow:hidden;box-shadow:var(--shadow);
}
.film-body{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.film-body h2{color:#fff;margin-bottom:12px}
.film-body p{color:#A9ADB8;max-width:44ch}
.film-body .eyebrow{color:#7E838F}
.film-body .eyebrow b{color:var(--teal-bright)}
.film-art{
  position:relative;min-height:260px;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 120% at 70% 30%,rgba(95,206,190,.10),transparent 62%),
    #08090D;
  border-left:1px solid rgba(255,255,255,.07);
}
.film-art .mark{width:44%;max-width:150px;color:rgba(255,255,255,.16)}
.play{
  position:absolute;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:var(--on-accent);
  text-decoration:none;font-weight:600;font-size:.92rem;
  padding:12px 20px;border-radius:3px;
  transition:background .16s ease;
}
.play:hover{background:var(--accent-hover)}
.film-meta{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:#7E838F;
}
@media (max-width:820px){
  .film{grid-template-columns:1fr}
  .film-art{border-left:none;border-top:1px solid rgba(255,255,255,.07)}
}

/* --- the case: prose + facts ---------------------------------------- */
.case-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.facts{display:flex;flex-direction:column;gap:14px}
.fact{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:3px;
  padding:20px 22px;
}
.fact h3{margin-bottom:5px}
.fact p{font-size:.93rem;color:var(--text-soft)}
@media (max-width:900px){.case-grid{grid-template-columns:1fr;gap:40px}}

/* --- symbol showcase ------------------------------------------------ */
.showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:34px}
.showcase-head .sec-head{margin-bottom:0}
.toggle{display:flex;gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;flex:none}
.toggle button{
  background:transparent;color:var(--text-soft);
  border:none;border-right:1px solid var(--rule);
  padding:10px 16px;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.toggle button:last-child{border-right:none}
.toggle button:hover{color:var(--text)}
.toggle button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* Four style names will not sit on one row on a small phone, so the switch becomes
   a 2x2 block rather than overflowing the page. */
@media (max-width:560px){
  .showcase-head{flex-direction:column;align-items:stretch}
  .toggle{display:grid;grid-template-columns:1fr 1fr}
  .toggle button{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:10px 8px}
  .toggle button:nth-child(2n){border-right:none}
  .toggle button:nth-child(n+3){border-bottom:none}
}

.mark-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mark-card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:34px 28px 28px;text-align:center;box-shadow:var(--shadow);
}
.mark-card .mark{width:158px;margin:0 auto 20px}
.mark-card.free .mark{color:var(--text)}
.chip{
  display:inline-block;padding:4px 10px;border-radius:2px;margin-bottom:12px;
  background:var(--hazard);color:var(--ink);
}
.mark-card.free .chip{background:var(--free);color:var(--ink)}
.mark-card h3{font-size:1.15rem;margin-bottom:8px}
.mark-card p{color:var(--text-soft);font-size:.93rem;max-width:46ch;margin:0 auto}
@media (max-width:700px){.mark-grid{grid-template-columns:1fr}}

/* --- anatomy: a spec sheet, drawn on the drafting grid --------------- */
.anatomy{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
  margin-top:64px;padding-top:56px;border-top:1px solid var(--border);
}
.drafting{
  position:relative;padding:34px;border:1px solid var(--border);border-radius:3px;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/22px 22px,
    var(--surface);
}
.drafting .mark{max-width:330px;margin:0 auto}
.anatomy dl{display:flex;flex-direction:column;gap:22px}
.anatomy dt{
  display:flex;align-items:center;gap:10px;
  font-weight:600;font-size:1rem;margin-bottom:4px;
}
.anatomy dt::before{
  content:"";width:9px;height:9px;flex:none;
  background:var(--accent);
}
.anatomy dd{color:var(--text-soft);font-size:.95rem;max-width:52ch;padding-left:19px}
@media (max-width:900px){.anatomy{grid-template-columns:1fr;gap:40px}}

/* --- deep time ------------------------------------------------------ */
.deeptime{background:var(--plate);color:var(--on-plate);border-top:none}
.deeptime h2{color:#fff}
.deeptime .eyebrow{color:#7E838F}
.deeptime .eyebrow b{color:var(--teal-bright)}
.deeptime .prose p{color:#A9ADB8}
.deeptime .prose strong{color:#fff}
.deeptime-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.erosion{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.erosion figure{text-align:center}
.erosion .mark{color:#fff;margin-bottom:14px}
.erosion figcaption{
  font-family:'Plex Mono',monospace;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.13em;color:#7E838F;
}
@media (max-width:900px){.deeptime-grid{grid-template-columns:1fr;gap:44px}}

/* --- in the field: the mark inside each standard's frame ------------
   These are depictions of physical labels, so they stay literal (white
   ground, black art, each standard's own colour) in both themes.
   ------------------------------------------------------------------- */
.field-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.field-card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:26px 20px 20px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.field-stage{
  height:150px;display:grid;place-items:center;margin-bottom:20px;
}
.field-card h3{font-size:.98rem;margin-bottom:4px}
.field-std{color:var(--text-soft);letter-spacing:.1em;margin-bottom:8px}
.field-card p{font-size:.86rem;color:var(--text-soft);margin-top:auto}

/* GHS: red-bordered diamond, white ground */
.ghs{
  width:104px;height:104px;background:#fff;
  border:7px solid #D0021B;transform:rotate(45deg);
  display:grid;place-items:center;
}
.ghs .mark{width:64px;transform:rotate(-45deg);color:#0B0C10}

/* ISO 7010: black-edged amber triangle */
.iso{position:relative;width:126px;height:110px}
.iso-tri{
  position:absolute;inset:0;
  background:#0B0C10;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.iso-tri::after{
  content:"";position:absolute;left:9px;right:9px;bottom:7px;top:14px;
  background:var(--hazard);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.iso .mark{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  width:56px;color:#0B0C10;z-index:1;
}

/* ANSI Z535: header bar over a white panel */
.ansi{width:120px;background:#fff;border:2px solid #0B0C10}
.ansi-bar{
  background:#F07C00;color:#0B0C10;
  font-family:'Plex Cond',sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.1em;padding:3px 0;
  border-bottom:2px solid #0B0C10;
}
/* Explicit ink, like the other two frames: these panels are white in both themes,
   so a mark left on the theme's text colour turns white-on-white in dark mode. */
.ansi .mark{width:60px;margin:12px auto;color:#0B0C10}

/* EDC-Free: a green roundel */
.roundel{
  width:112px;height:112px;border-radius:50%;
  background:var(--free);display:grid;place-items:center;
}
.roundel .mark{width:66px;color:#fff}

@media (max-width:960px){.field-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.field-grid{grid-template-columns:1fr}}

/* --- downloads ------------------------------------------------------ */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl-card{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.dl-card h3{font-size:1.1rem;margin-bottom:8px}
.dl-card p{font-size:.92rem;color:var(--text-soft);margin-bottom:22px}
.dl-card .btn{align-self:flex-start;margin-top:auto}
.dl-fine{display:block;margin-top:12px;color:var(--text-soft);letter-spacing:.08em}
.note{
  margin-top:32px;padding:22px 24px;
  border:1px dashed var(--rule);border-radius:3px;
  max-width:78ch;
}
.note h3{margin-bottom:6px}
.note p{font-size:.92rem;color:var(--text-soft)}
@media (max-width:900px){.dl-grid{grid-template-columns:1fr}}

/* --- the standard --------------------------------------------------- */
.std-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.ieee-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
  padding:32px;box-shadow:var(--shadow);
}
.ieee-panel .eyebrow{padding-bottom:10px}
.ieee-panel .stat-num{
  font-size:3.4rem;line-height:1;color:var(--text);
  display:block;margin-bottom:6px;
}
.ieee-panel p{color:var(--text-soft);font-size:.94rem;margin-bottom:22px}
.ieee-panel .btn{width:100%;justify-content:center}
@media (max-width:900px){.std-grid{grid-template-columns:1fr;gap:40px}}

/* --- advocate ------------------------------------------------------- */
.advocate{text-align:center;border-top:none}
.advocate .sec-head{margin:0 auto 0;text-align:center}
.advocate .btn-row{justify-content:center}

/* --- footer --------------------------------------------------------- */
footer{
  border-top:1px solid var(--border);
  padding:44px 0;color:var(--text-soft);font-size:.9rem;
}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--text-soft)}
footer a:hover{color:var(--text)}
footer .credits{max-width:60ch}

/* --- film ------------------------------------------------------------
   Played inline, with the browser's own controls. No overlay, no lightbox,
   nothing the viewer has to work out how to escape.
   -------------------------------------------------------------------- */
.film-wrap{max-width:940px;margin:0 auto}
.film-wrap video{
  width:100%;height:auto;display:block;
  border-radius:4px;background:#08090D;
  box-shadow:var(--shadow);
}

/* --- contact form ---------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.contact-aside .fact{margin-top:14px}
.newsletter-form{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:32px;box-shadow:var(--shadow);
}
.newsletter-form-header-title{font-size:clamp(1.6rem,3vw,2rem);margin-bottom:8px}
.newsletter-form-header-description p{color:var(--text-soft);font-size:.95rem;margin-bottom:26px}
.newsletter-form-field-label{
  display:block;margin-bottom:6px;
  font-family:'Plex Mono',ui-monospace,monospace;font-weight:500;
  text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--text-soft);
}
.newsletter-form-field-element{
  width:100%;padding:12px 14px;
  background:var(--bg);color:var(--text);
  border:1px solid var(--rule);border-radius:3px;
  font-family:'Plex Sans',ui-sans-serif,system-ui,sans-serif;font-size:1rem;
}
.newsletter-form-field-element:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.field.checkbox label{color:var(--text-soft);line-height:1.5}
.field.checkbox input{accent-color:var(--accent);width:17px;height:17px}
.newsletter-form-button{
  background:var(--accent);color:var(--on-accent);
  border:2px solid var(--accent);border-radius:3px;
  font-family:'Plex Sans',sans-serif;font-weight:600;font-size:.94rem;
  padding:13px 26px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.newsletter-form-button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.newsletter-form-button[disabled]{opacity:.6;cursor:progress}