/* ==========================================================================
   Home page sections
   Hero · Build console · Roster · Services · Playbook · Testimonials ·
   Under the hood · FAQ · Contact
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) var(--space-section); }
.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-7); }
}
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { max-width: 12ch; }
.hero__lede { font-size: var(--step-1); color: var(--ink-3); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.hero__facts dt { font-weight: 800; font-stretch: 75%; font-size: var(--step-2); color: var(--ink); line-height: 1; }
.hero__facts dd { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
@media (max-width: 22rem) { .hero__facts { grid-template-columns: 1fr 1fr; } }

/* ---------- Build console (hero visual) ----------
   The finished state is the default. Each ":not(.is-…)" rule below describes an
   earlier build stage and only applies while JS is running the sequence (.motion-ok). */
.hero__visual { position: relative; padding-bottom: var(--space-8); }
.build { position: relative; }
.build__window {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.build__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.build__bar > i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.build__url {
  margin-left: 8px;
  flex: 1;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.build__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.build__status b { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }

.build__canvas {
  position: relative;
  display: grid;
  gap: 7%;
  aspect-ratio: 16 / 11;
  padding: 5% 6%;
  align-content: start;
  transition: background-color var(--dur-3);
}
.wf { display: flex; gap: 4%; align-items: center; }
.wf span { display: block; border-radius: 3px; transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3), opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); border: 1px solid transparent; }
.wf--nav .wf-logo { width: 9%; height: 10px; background: var(--ink); border-radius: 2px; }
.wf--nav .wf-link { width: 8%; height: 5px; background: var(--line-strong); }
.wf--nav .wf-link:first-of-type { margin-left: auto; }
.wf--nav .wf-btn { width: 13%; height: 12px; border-radius: var(--radius-pill); background: var(--signal); }
.wf--hero { align-items: stretch; }
.wf-copy { flex: 1.1; display: grid; gap: 7px; align-content: center; }
.wf-kicker { width: 30%; height: 5px; background: var(--signal) !important; }
.wf-h { width: 92%; height: 14px; background: var(--ink); }
.wf-h--short { width: 64%; }
.wf-p { width: 88%; height: 5px; background: var(--line-strong); margin-top: 2px; }
.wf-p--short { width: 70%; }
.wf-cta { display: flex !important; gap: 6px; margin-top: 6px; border: 0 !important; }
.wf-cta span { width: 26%; height: 13px; border-radius: var(--radius-pill); }
.wf-cta span:first-child { background: var(--ink); }
.wf-cta span:last-child { border-color: var(--line-strong); }
.wf-media { flex: 1; min-height: 6.5rem; border-radius: var(--radius-md) !important; overflow: hidden; position: relative;
  background:
    radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--signal) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-2), color-mix(in srgb, var(--ink) 18%, var(--surface-2))); }
.wf-media span { position: absolute; inset: auto 12% 14% 12%; height: 22%; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 85%, transparent); }
.wf--cards span { flex: 1; height: 3.2rem; border-radius: var(--radius-md); background: var(--surface-2); border-top: 3px solid var(--signal); }
.wf-badges { position: absolute; right: 5%; bottom: 6%; display: flex; gap: 6px; }
.wf-badges span {
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
  font: 600 9.5px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

/* Stage 0 → 1: wireframe not yet drawn */
.motion-ok .build:not(.is-drawn) .wf span,
.motion-ok .build:not(.is-drawn) .wf-media { opacity: 0; transform: scale(.94); }
/* Stage 1 → 2: blueprint lines, not yet styled */
.motion-ok .build:not(.is-styled) .build__canvas {
  background-image:
    linear-gradient(color-mix(in srgb, var(--blueprint) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--blueprint) 9%, transparent) 1px, transparent 1px);
  background-size: 12px 12px;
}
.motion-ok .build:not(.is-styled) .wf span,
.motion-ok .build:not(.is-built) .wf-media,
.motion-ok .build:not(.is-built) .wf--cards span {
  background: transparent !important;
  border: 1px dashed var(--blueprint) !important;
}
.motion-ok .build:not(.is-built) .wf-media span { opacity: 0; }
/* Stage 4: audit badges pending */
.motion-ok .build:not(.is-audited) .wf-badges span { opacity: 0; transform: translateY(6px); }
.wf-badges span:nth-child(2) { transition-delay: 90ms; }
.wf-badges span:nth-child(3) { transition-delay: 180ms; }
/* Stage 5: not live yet */
.motion-ok .build:not(.is-live) .build__status b { background: #e3a008; box-shadow: 0 0 0 3px rgb(227 160 8 / .25); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* Terminal: always dark, regardless of theme */
.build__term {
  position: absolute;
  left: -6%;
  bottom: calc(var(--space-8) * -1);
  width: min(72%, 23rem);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: #0f1115;
  border: 1px solid #262a31;
  box-shadow: var(--shadow-lg);
  color: #d6dbe3;
  font: 400 12px/1.85 var(--font-mono);
  overflow: hidden;
}
.t-line { white-space: pre; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.motion-ok .build .t-line:not(.is-shown) { opacity: 0; transform: translateY(4px); }
.t-prompt { color: #7aa2ff; }
.t-cmd { color: #fff; }
.t-cmd.is-typing::after { content: ""; display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: #ff6b3d; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.t-ok { color: #5fcf8e; }
.t-live { color: #ff6b3d; }
.t-dim { color: #8b93a1; }

.build__replay {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  border-radius: var(--radius-md);
}
.build__replay:hover { color: var(--ink); }
.build__replay svg { width: 14px; height: 14px; transition: transform var(--dur-3) var(--ease-out); }
.build__replay:hover svg { transform: rotate(-180deg); }

@media (max-width: 40rem) {
  .hero__visual { padding-bottom: 0; }
  .build__term { position: relative; left: auto; bottom: auto; width: auto; margin: calc(var(--space-6) * -1) var(--space-3) 0; font-size: 11px; }
  .build__replay { position: static; margin-top: var(--space-2); }
}

/* ---------- Roster ---------- */
.roster__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
/* On narrow screens the filter row scrolls sideways instead of wrapping. */
.roster__controls .segmented { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.roster__controls .segmented::-webkit-scrollbar { display: none; }
.roster__controls .segmented button { flex: none; }
.roster__list {
  display: grid;
  gap: var(--space-8) var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 56rem) { .roster__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.player__card { display: grid; gap: var(--space-5); }

/* Device stage. Sizes are in container units so the frames animate between
   "desktop" and "mobile" layouts using transforms only. */
.player__stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 70%),
    var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.player__stage::before {
  content: attr(data-num);
  position: absolute;
  left: 4cqw;
  bottom: -3cqw;
  font-weight: 900;
  font-stretch: 62%;
  font-size: 30cqw;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 16%, transparent);
  pointer-events: none;
}
.frame {
  position: absolute;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out);
  will-change: transform;
}
.frame img { width: 100%; height: auto; }
.frame--desktop {
  left: 6cqw;
  top: 7cqw;
  width: 78cqw;
  border-radius: 1.4cqw;
  border: 1px solid var(--line);
  transform-origin: 0 0;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 3.4cqw;
  padding: 0 1.4cqw;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.frame__bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--line-strong); }
.frame__bar span { margin-left: 1cqw; font-family: var(--font-mono); font-size: max(1.5cqw, 8px); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame--phone {
  right: 6cqw;
  bottom: 5cqw;
  width: 22cqw;
  padding: 1cqw;
  border-radius: 3.6cqw;
  background: #0f1115;
  transform-origin: 50% 50%;
}
.frame--phone img { border-radius: 2.6cqw; }

/* Mobile view: phone steps forward to centre stage, desktop recedes. */
.roster__list[data-view="mobile"] .frame--phone { transform: translate(-33cqw, -6.6cqw) scale(1.32); }
.roster__list[data-view="mobile"] .frame--desktop { transform: translate(-2cqw, 3cqw) scale(.9); opacity: .28; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .roster__list[data-view="desktop"] .player__card:hover .frame--phone { transform: translateY(-2.5cqw) rotate(-2deg); }
  .roster__list[data-view="desktop"] .player__card:hover .frame--desktop { transform: translateY(-1cqw); }
  .roster__list[data-view="mobile"] .player__card:hover .frame--phone { transform: translate(-33cqw, -7.6cqw) scale(1.34); }
}

.player__body { display: grid; gap: var(--space-3); align-content: start; }
.player__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.player__num { color: var(--signal); font-weight: 600; }
.player__num::before { content: "No."; margin-right: 0.35em; }
.player__private { padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); text-transform: none; letter-spacing: 0; }
.player__name { font-size: var(--step-3); }
.player__client { color: var(--ink); font-weight: 500; }
.player__summary { color: var(--ink-3); }

.player__built { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.player__built summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
}
.player__built summary::-webkit-details-marker { display: none; }
.player__built summary::after { content: "+"; font-size: 1.2em; color: var(--signal); transition: transform var(--dur-2) var(--ease-out); }
.player__built[open] summary::after { transform: rotate(45deg); }
.player__built ul { display: grid; gap: var(--space-2); padding: 0 0 var(--space-4); }
.player__built li { position: relative; padding-left: var(--space-5); color: var(--ink-2); font-size: var(--step--1); }
.player__built li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 2px; background: var(--signal); }

.player__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.player__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.player__tags li {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-2);
}

/* View-transition choreography for filtering */
::view-transition-group(*) { animation-duration: var(--dur-4); animation-timing-function: var(--ease-out); }

/* ---------- Services ---------- */
.services__list { border-top: 1px solid var(--line); }
.service {
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-3);
}
.service__num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); padding-top: 0.6em; transition: color var(--dur-2); }
.service__main h3 { font-size: var(--step-3); transition: transform var(--dur-3) var(--ease-out); }
.service__main p { margin-top: var(--space-2); max-width: 36rem; color: var(--ink-3); }
.service__deliverables, .service__proof { grid-column: 2; }
.service__deliverables { display: flex; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-2); }
.service__deliverables li { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
.service__proof { font-size: var(--step--1); color: var(--ink-3); }
.service:hover .service__num { color: var(--signal); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .service:hover .service__main h3 { transform: translateX(6px); }
}
@media (min-width: 56rem) {
  .service { grid-template-columns: 4rem minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .service__deliverables { grid-column: 3; grid-row: 1; justify-content: flex-end; padding-top: 0.7em; }
  .service__proof { grid-column: 2; }
}

/* ---------- Playbook ---------- */
.playbook__steps {
  position: relative;
  display: grid;
  gap: var(--space-7) var(--space-6);
}
@media (min-width: 56rem) { .playbook__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.play { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--ink); }
.play__num {
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  transition: color var(--dur-3);
}
.play:hover .play__num { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.play p { color: var(--ink-3); }
.play__out { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink) !important; }
.play__out span { display: block; font-size: var(--step--2); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* Scroll-linked progress bar across the three plays (progressive enhancement). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .play { border-top-color: var(--line); background: linear-gradient(var(--signal), var(--signal)) top left / 0% 2px no-repeat; margin-top: -2px; padding-top: calc(var(--space-5) + 2px); animation: play-fill linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
    @keyframes play-fill { to { background-size: 100% 2px; } }
  }
}

/* ---------- Testimonials ---------- */
.voices__list { display: grid; gap: var(--space-5); }
@media (min-width: 56rem) { .voices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voice {
  display: grid;
  gap: var(--space-5);
  align-content: space-between;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.voice blockquote { position: relative; padding-top: var(--space-6); color: var(--ink); font-size: var(--step-1); line-height: 1.45; }
.voice blockquote::before { content: "“"; position: absolute; top: -0.2em; left: -0.05em; font-size: 4rem; line-height: 1; font-weight: 800; color: var(--signal); }
.voice figcaption { display: grid; font-size: var(--step--1); }
.voice figcaption b { color: var(--ink); }
.voice figcaption span { color: var(--ink-3); }

/* ---------- Under the hood ---------- */
.hood__grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 56rem) { .hood__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hood .section-head { margin-bottom: 0; }
.gauge-panel {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: #0f1115;
  color: #d6dbe3;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-lg);
}
.gauge-panel__title { display: flex; justify-content: space-between; align-items: center; font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: #8b93a1; }
.gauge-panel__dot { width: 8px; height: 8px; border-radius: 50%; background: #5fcf8e; box-shadow: 0 0 0 4px rgb(95 207 142 / .2); }
.gauge-panel__list { margin-top: var(--space-4); }
.gauge-panel__list div { display: flex; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px dashed #2a2f37; font-size: var(--step--1); }
.gauge-panel__list dt { color: #aeb5c1; }
.gauge-panel__list dd { margin-left: auto; color: #fff; font-size: var(--step-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.gauge-panel__note { margin-top: var(--space-4); font-size: var(--step--2); color: #8b93a1; font-family: var(--font-sans); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: var(--space-6); }
@media (min-width: 56rem) {
  .faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
  .faq .section-head { position: sticky; top: 6rem; align-self: start; }
}
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 3rem;
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 600;
  font-stretch: 90%;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "";
  flex: none;
  width: 0.8rem; height: 0.8rem;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 100% 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 2px 100% no-repeat;
  transition: transform var(--dur-3) var(--ease-out);
}
.faq__list details[open] summary::after { transform: rotate(135deg); }
.faq__list summary:hover { color: var(--signal); }
.faq__a p { padding-bottom: var(--space-5); max-width: 38rem; color: var(--ink-3); }

/* Smooth height animation for <details> where supported. */
@supports (interpolate-size: allow-keywords) {
  .faq__list { interpolate-size: allow-keywords; }
  .faq__list details::details-content { height: 0; overflow: clip; transition: height var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
  .faq__list details[open]::details-content { height: auto; }
}

/* ---------- Contact ---------- */
.contact { background: var(--surface); }
.contact__grid { display: grid; gap: var(--space-7); }
@media (min-width: 62rem) { .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); } }
.contact__intro { display: grid; gap: var(--space-4); align-content: start; }
.contact__intro > p { font-size: var(--step-1); color: var(--ink-3); }
.contact__lines { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.contact__lines a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.contact__lines a:hover { border-color: var(--ink); }
.contact__lines svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--signal); }
.contact__lines small { display: block; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); font-weight: 400; }

.contact__form {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--paper);
}
.contact__row { display: grid; gap: var(--space-5); }
@media (min-width: 36rem) { .contact__row { grid-template-columns: 1fr 1fr; } }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.contact__legal { font-size: var(--step--2); color: var(--ink-3); }
.contact__status { font-weight: 500; }
.contact__status:empty { display: none; }
.contact__status[data-state="success"] { color: var(--success); }
.contact__status[data-state="error"] { color: var(--danger); }
.contact__form[aria-busy="true"] button[type="submit"] { opacity: .7; pointer-events: none; }