/* MASTER-UI-ENGINE — product website design layer.
   The engine's own tokens are loaded first (/engine/design-tokens/engine.css);
   this file adds the marketing identity: a spec-sheet look — hairlines, mono
   labels, an acid accent, hard corners. Motion uses engine composite tokens so
   the kit's prefers-reduced-motion block disables it. */

:root {
  --paper: #f5f4f0;
  --panel: #ffffff;
  --panel-2: #eeece6;
  --ink: #131519;
  --muted: #5c6673;
  --line: #dedbd2;
  --line-strong: #c7c3b8;
  --accent: #b7e92a;
  --accent-ink: #101315;
  --accent-text: #3d6b0a;
  --accent-soft: #e8f5c8;
  --shadow-lift: 0 1px 0 rgba(19, 21, 25, 0.06), 0 12px 32px -18px rgba(19, 21, 25, 0.28);

  --shell: 78rem;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --rad: 7px;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

html.dark {
  --paper: #0b0c0f;
  --panel: #121418;
  --panel-2: #171a20;
  --ink: #edeff2;
  --muted: #98a2af;
  --line: #22262d;
  --line-strong: #333944;
  --accent: #c9f24a;
  --accent-ink: #0b0c0f;
  --accent-text: #d3f56b;
  --accent-soft: #1a2010;
  --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.5), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
}

body.page {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
}

a { color: var(--accent-text); text-decoration-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
a:hover { text-decoration-color: currentColor; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--line); }
.section.tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.section.flush { border-top: 0; }
.grid-2 { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .grid-2 { grid-template-columns: 1.05fr 0.95fr; } }

.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--accent); flex: none; }

.sec-title { font-size: clamp(1.75rem, 3.6vw, 2.7rem); max-width: 34ch; }
.sec-lede { color: var(--muted); font-size: 1.02rem; max-width: 60ch; margin: 0.9rem 0 0; }
.num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.1em; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 54ch; }
.mono { font-family: var(--font-mono); font-size: 0.86rem; }
.hide-sm { display: none; }
@media (min-width: 48rem) { .hide-sm { display: revert; } }

/* Grid and flex children default to min-width:auto, which lets one long token
   (a nowrap tab label, a file path) widen the whole track and clip the page. */
.grid-2 > *, .showcase > *, .showcase-body > *, .showcase-rail > *, .frame > *,
.frame-bar > *, .frame-tabs > *, .compare > *, .compare-col > *, .tpl-grid > *,
.tpl-body > *, .spec > .row > *, .steps > li, .metrics > *, .band .shell > *,
.cta-row > *, .hero-facts li, .foot-grid > * { min-width: 0; }

.eyebrow { text-wrap: balance; }
.hero-title { text-wrap: balance; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.75rem var(--gut);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.nav-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-brand span { color: var(--accent-text); }
.nav-links { display: flex; align-items: center; gap: 1.35rem; flex: 1 1 auto; }
.nav-links .btn-primary { margin-inline-start: auto; }
.site-header .nav-spacer { display: none; }
.nav-spacer { flex: 1 1 auto; }
.nav-link {
  font-size: 0.85rem; color: var(--muted); text-decoration: none;
  padding-block: 0.35rem; border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-spacer { flex: 1 1 auto; }
.theme-toggle {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: var(--rad); padding: 0.4rem 0.6rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: transparent; border: 0; padding: 0.5rem; cursor: pointer;
}
.menu-toggle i { display: block; width: 18px; height: 2px; background: var(--ink); }
@media (min-width: 62rem) { .menu-toggle { display: none; } }
@media (max-width: 61.9rem) {
  .nav-links {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0.5rem var(--gut) 1.25rem;
    background: var(--panel); border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links .nav-link { width: 100%; padding-block: 0.7rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-links .btn-primary { margin-top: 0.9rem; }
}

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  border-radius: var(--rad); padding: 0.72rem 1.15rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--motion-transform, 140ms ease), background-color var(--motion-colors, 140ms ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(var(--lift-hover, -1px)); background: color-mix(in srgb, var(--accent) 88%, white); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .nav-link:focus-visible, .theme-toggle:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}
.btn-lg { padding: 0.9rem 1.4rem; font-size: 0.98rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.75rem) clamp(2.25rem, 5vw, 4rem); }
.hero-grid-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  opacity: 0.55;
}
.hero-grid-bg::after {
  content: ""; position: absolute; width: 34rem; aspect-ratio: 1; pointer-events: none;
  inset-block-start: -18rem; inset-inline-end: -12rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
}
.hero .shell { position: relative; }
.hero-title { font-size: clamp(2.15rem, 5.2vw, 4rem); max-width: 21ch; }
.hero-title em { font-style: normal; color: var(--accent-text); }
.hero-mark {
  display: inline-block; width: 0.5em; height: 0.5em; background: var(--accent);
  margin-inline-end: 0.18em; vertical-align: baseline;
}
.hero-lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--muted); max-width: 46ch; margin: 1.4rem 0 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1.9rem 0 0; padding: 0; list-style: none; }
.hero-facts li { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.hero-facts b { color: var(--ink); font-weight: 500; }

/* browser frame holding a real engine page */
.frame {
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); overflow: hidden;
  box-shadow: var(--shadow-lift);
  transition: transform var(--motion-transform, 160ms ease), border-color var(--motion-colors, 160ms ease), box-shadow var(--motion-colors, 160ms ease);
}
@media (hover: hover) {
  .frame:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
}
.frame-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.frame-dots { display: flex; gap: 5px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.frame-url {
  flex: 1 1 0; min-width: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.25rem 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-size { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.frame-stage { position: relative; overflow: hidden; height: clamp(20rem, 38vw, 30rem); background: #d9d7cf; }
html.dark .frame-stage { background: #1b1e24; }
.frame-view { display: block; width: 100%; height: 100%; border: 0; background: #fff; transform-origin: top left; }
@media (max-width: 40rem) { .frame-stage { height: 18rem; } }
.frame-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; padding: 0.45rem 0.6rem; border-top: 1px solid var(--line); background: var(--panel-2); }
.frame-tab-group, .frame-widths { display: flex; flex-wrap: wrap; gap: 2px; }
.frame-widths { margin-inline-start: auto; }
.frame-tabs button {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 0.3rem 0.55rem; cursor: pointer;
}
.frame-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel); border-color: var(--line); }
.frame-tabs [data-width][aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
@media (max-width: 40rem) { .frame-view { height: 18rem; } }

/* ---------- comparison ---------- */
.compare { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
@media (min-width: 52rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { background: var(--panel); padding: clamp(1.25rem, 3vw, 2rem); }
.compare-col.neg { background: var(--panel-2); }
.compare-col h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.compare-col.neg h3 { color: var(--muted); }
.mark-list { list-style: none; display: grid; gap: 0.75rem; margin: 0; padding: 0; }
.mark-list li { position: relative; padding-inline-start: 1.6rem; font-size: 0.94rem; color: var(--muted); }
.mark-list li::before {
  position: absolute; inset-inline-start: 0; top: 0.1rem;
  font-family: var(--font-mono); font-size: 0.8rem; content: "\2715"; color: #b4544a;
}
.mark-list.pos li { color: var(--ink); }
.mark-list.pos li::before { content: "\2713"; color: var(--accent-text); }
.note { font-size: 0.8rem; color: var(--muted); margin-top: 1.1rem; }

/* ---------- spec rows (benefits) ---------- */
.spec { border-top: 1px solid var(--line); }
.spec > .row {
  display: grid; gap: 0.4rem 2rem; padding-block: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 56rem) { .spec > .row { grid-template-columns: 4.5rem 1fr 1.25fr; align-items: baseline; } }
.spec .row > .num { font-size: 0.8rem; }
.spec .row h3 { font-size: 1.22rem; }
.spec .row p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.spec .row h3 .tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  background: var(--accent-soft); border-radius: 4px; padding: 0.15rem 0.4rem; margin-inline-start: 0.5rem;
  vertical-align: 0.15em;
}

/* ---------- showcase ---------- */
.showcase { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .showcase { grid-template-columns: 15rem 1fr; gap: 2.5rem; } }
.showcase-rail { display: flex; gap: 0.35rem; overflow-x: auto; padding-bottom: 0.4rem; }
.showcase-rail [role="tab"] {
  flex: none; display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--rad);
  padding: 0.55rem 0.75rem; cursor: pointer; white-space: nowrap;
}
.showcase-rail [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--panel); border-color: var(--line); }
@media (min-width: 62rem) { .showcase-rail { flex-direction: column; overflow: visible; } }
.showcase-body { min-width: 0; }
.showcase-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin-top: 0.9rem; }
.showcase-meta .chip { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; }
.link-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: 0.86rem; }

/* ---------- templates grid ---------- */
.tpl-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.tpl-card {
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  transition: transform var(--motion-transform, 160ms ease), border-color var(--motion-colors, 160ms ease), box-shadow var(--motion-colors, 160ms ease);
}
@media (hover: hover) {
  .tpl-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-lift); }
}
.tpl-shot { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.tpl-shot iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(0.3); transform-origin: top left; pointer-events: none; }
.tpl-shot::after {
  content: "Open preview"; position: absolute; inset: auto 0 0 0;
  display: grid; place-items: center; height: 2.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-ink); background: var(--accent);
  opacity: 0; transition: opacity var(--motion-colors, 140ms ease);
}
.tpl-card:hover .tpl-shot::after, .tpl-card:focus-within .tpl-shot::after { opacity: 1; }
.tpl-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tpl-body h3 { font-size: 1.05rem; }
.tpl-body p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.tpl-foot { margin-top: auto; display: flex; gap: 0.9rem; align-items: center; font-size: 0.82rem; }

/* ---------- terminal ---------- */
.term { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #0d0f13; }
html.dark .term { background: #101319; }
.term-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #22262d; }
.term-bar .frame-dots i { background: #333944; }
.term-title { font-family: var(--font-mono); font-size: 0.7rem; color: #8b95a3; margin-inline-start: auto; }
.term pre { margin: 0; padding: clamp(0.9rem, 2.4vw, 1.3rem); overflow-x: auto; }
.term code { font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.75; color: #dfe4ea; white-space: pre; }
.term .prompt { color: var(--accent); }
.term .out { color: #8b95a3; }
.term .flag { color: #7fb3ff; }
.copy-btn {
  font-family: var(--font-mono); font-size: 0.7rem; color: #dfe4ea; background: #1b1f26;
  border: 1px solid #2a2f38; border-radius: 5px; padding: 0.25rem 0.55rem; cursor: pointer;
}
.copy-btn:hover { border-color: #4a5261; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--panel); padding: 1.25rem 1.3rem 1.4rem; }
.steps li > b { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-text); letter-spacing: 0.1em; }
.steps li h3 { font-size: 1.04rem; margin: 0.5rem 0 0.35rem; }
.steps li p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ---------- metrics ---------- */
.metrics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
@media (min-width: 40rem) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--panel); padding: 1.2rem 1.3rem; }
.metric b { display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; }
.metric span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- band + form ---------- */
/* Deliberately theme-independent: this band is the dark surface on both themes,
   so it must not read --ink/--paper, which swap. */
.band { background: #101318; color: #f2f5f8; padding-block: clamp(2.75rem, 7vw, 5rem); }
html.dark .band { background: #06070a; }
.band .shell { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 56rem) { .band .shell { grid-template-columns: 1.2fr 0.8fr; } }
.band h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.band p { color: rgba(238, 242, 246, 0.72); margin: 0.8rem 0 0; max-width: 48ch; }
.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.form-row input {
  flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 0.92rem;
  color: #eef2f6; background: #171c23; border: 1px solid #2b333d;
  border-radius: var(--rad); padding: 0.7rem 0.85rem;
}
.form-row input::placeholder { color: #7f8a97; }
.form-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.band .btn-ghost { color: #eef2f6; border-color: #3b444f; }
.band .btn-ghost:hover { border-color: #eef2f6; }
.form-status { font-family: var(--font-mono); font-size: 0.76rem; margin-top: 0.7rem; min-height: 1.2em; color: rgba(238, 242, 246, 0.6); }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="error"] { color: #ff9b8a; }
.fine { font-size: 0.78rem; color: rgba(238, 242, 246, 0.5); margin-top: 0.9rem; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  width: 100%; text-align: start; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  padding: 1.15rem 0;
}
.faq-q::after { content: "+"; font-family: var(--font-mono); color: var(--muted); font-weight: 400; }
.faq-q[aria-expanded="true"]::after { content: "\2212"; }
.faq-a { display: none; padding: 0 0 1.2rem; color: var(--muted); font-size: 0.96rem; max-width: 68ch; margin: 0; }
.faq-a.is-open { display: block; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--panel); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .foot-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.foot-col h3 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot-col a { font-size: 0.88rem; color: var(--ink); text-decoration: none; }
.foot-col a:hover { color: var(--accent-text); }
.foot-note { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }

/* ---------- misc ---------- */
.skip-link {
  position: absolute; inset-inline-start: 0.5rem; top: -3rem; z-index: 60;
  background: var(--accent); color: var(--accent-ink); padding: 0.5rem 0.8rem;
  border-radius: var(--rad); font-size: 0.85rem; transition: top 120ms ease;
}
.skip-link:focus { top: 0.5rem; }
html:not(.mue-js) .reveal { opacity: 1; }
.reveal { opacity: 0; transform: translateY(var(--reveal-shift, 14px)); }
.reveal.in { opacity: 1; transform: none; transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }