/*
 * Emitra: public pages — a centre's website (/c/<slug>) and the SaaS pricing page. Light and dark from the Kit's
 * tokens; works from 320 px. The full centre home page comes in phase 13.
 */

.emt-sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* A centre's home */
.emt-centre {
  padding-block: var(--space-12) var(--space-16);
}

.emt-centre-head {
  max-width: 48rem;
}

.emt-centre-kicker {
  margin: 0 0 var(--space-2);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.emt-centre-head h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.emt-centre-lead {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--text-lg);
}

.emt-not-gov {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 48rem;
  margin-top: var(--space-6);
}

.emt-powered {
  margin-top: var(--space-8);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

/* Pricing */
.emt-pricing {
  padding-block: var(--space-12) var(--space-16);
}

.emt-pricing-head {
  max-width: 48rem;
  margin-bottom: var(--space-6);
}

.emt-pricing-head h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
}

.emt-interval {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.emt-plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}

.emt-plan-card h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.emt-plan-top {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-md);
}

.emt-price {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.emt-plan-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-plan-features li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-1) 0;
}

.emt-pricing-sub {
  margin: var(--space-10) 0 var(--space-4);
  font-size: var(--text-xl);
}

.emt-compare td {
  text-align: center;
}

/* Phase 2: the centre's site layout (resources/views/emt/layouts/centre.php) */
.emt-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.emt-site-main {
  flex: 1 0 auto;
}

.emt-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.emt-site-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
}

.emt-site-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.emt-site-logo {
  width: auto;
  max-width: 7rem;
  height: 2.5rem;
  object-fit: contain;
}

.emt-site-mark {
  display: inline-grid;
  flex: 0 0 2.5rem;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-fg);
  font-family: var(--font-heading);
  font-weight: 700;
}

.emt-site-names {
  display: grid;
  min-width: 0;
}

.emt-site-name {
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emt-site-tagline {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emt-site-nav {
  display: none;
}

.emt-site-nav ul,
.emt-site-menu-list,
.emt-footer-menu,
.emt-contact-links,
.emt-platform-points {
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.emt-site-nav a,
.emt-site-menu-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.emt-site-nav a:hover,
.emt-site-menu-list a:hover {
  background: var(--bg-subtle);
}

.emt-site-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
}

.emt-site-menu {
  position: relative;
}

.emt-site-menu > summary {
  list-style: none;
}

.emt-site-menu > summary::-webkit-details-marker {
  display: none;
}

.emt-site-menu-list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  width: min(16rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 64rem) {
  .emt-site-nav {
    display: block;
  }

  .emt-site-menu {
    display: none;
  }
}

/* The notice ticker: scrolls when motion is welcome, wraps otherwise */
.emt-ticker {
  border-bottom: 1px solid var(--brand-border);
  background: var(--brand-soft);
  font-size: var(--text-sm);
}

.emt-ticker-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
}

.emt-ticker-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  color: var(--brand-text);
  font-weight: 700;
}

.emt-ticker-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.emt-ticker-list {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  margin: 0;
  padding: 0 0 0 100%; /* starts at the right edge of the track */
  list-style: none;
  white-space: nowrap;
  animation: emt-ticker 28s linear infinite;
}

.emt-ticker-list a {
  color: var(--text);
}

.emt-ticker-track:hover .emt-ticker-list,
.emt-ticker-track:focus-within .emt-ticker-list {
  animation-play-state: paused;
}

@keyframes emt-ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emt-ticker-list {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    width: auto;
    padding: 0;
    white-space: normal;
    animation: none;
  }
}

/* Footer */
.emt-site-footer {
  margin-top: var(--space-12);
  padding-block: var(--space-10) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
}

.emt-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-8);
}

.emt-footer-col {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

.emt-footer-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-base);
}

.emt-footer-address {
  color: var(--text-muted);
  font-style: normal;
  overflow-wrap: anywhere;
}

.emt-footer-meta {
  margin: 0;
  color: var(--text-muted);
}

.emt-footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.emt-footer-menu a,
.emt-contact-links a {
  color: var(--text);
}

.emt-contact-links {
  display: grid;
  gap: var(--space-2);
}

.emt-contact-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow-wrap: anywhere;
}

.emt-footer-bottom {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.emt-footer-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
  color: var(--text-muted);
}

.emt-site-footer .emt-powered {
  margin: 0;
}

.emt-open {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-full);
  background: var(--danger-soft);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}

.emt-open-yes {
  background: var(--success-soft);
  color: var(--success);
}

.emt-hours {
  width: 100%;
  max-width: 22rem;
  border-collapse: collapse;
}

.emt-hours th,
.emt-hours td {
  padding: var(--space-1) 0;
  text-align: start;
  font-weight: 400;
}

.emt-hours td {
  color: var(--text-muted);
  text-align: end;
}

.emt-hours-today th,
.emt-hours-today td {
  color: var(--text);
  font-weight: 700;
}

.emt-holidays {
  margin: 0;
  color: var(--text-muted);
}

/* Home and pages */
.emt-centre-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.emt-centre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
}

.emt-page {
  max-width: 52rem;
  padding-block: var(--space-10) var(--space-12);
}

.emt-page-title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.emt-prose {
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.emt-prose h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

.emt-prose h3,
.emt-prose h4 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.emt-prose blockquote {
  margin: var(--space-4) 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--brand-border);
  color: var(--text-muted);
}

.emt-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.emt-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

/* The SaaS platform home (resources/views/pages/home.php) */
.emt-platform-points {
  display: grid;
  gap: var(--space-2);
  max-width: 40rem;
  margin: var(--space-8) auto 0;
  text-align: start;
}

.emt-platform-points li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.emt-platform-points .icon {
  flex: 0 0 auto;
  color: var(--success);
}

.emt-platform-note {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.emt-platform .hero-actions {
  flex-wrap: wrap;
}

/* Phase 5: the services catalogue — list, one service, the rate list, the downloads */
.emt-catalog,
.emt-service,
.emt-rates,
.emt-intake,
.emt-track {
  padding-block: var(--space-8) var(--space-12);
}

.emt-catalog-head {
  max-width: 48rem;
}

.emt-search {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.emt-search .input {
  flex: 1 1 auto;
  min-width: 0;
}

.emt-catalog-links,
.emt-rates-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
}

.emt-catalog-links a {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-6);
}

.emt-chip {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.emt-chip[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-text);
}

.emt-chip-n {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.emt-empty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-block: var(--space-6);
  color: var(--text-muted);
}

.emt-service-grid,
.emt-download-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-service-card .card-body {
  display: grid;
  gap: var(--space-2);
}

.emt-service-card .emt-card-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  overflow-wrap: anywhere;
}

.emt-popular {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
}

.emt-service-summary {
  margin: 0;
  color: var(--text-muted);
}

.emt-service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.emt-service-meta span {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.emt-crumbs a {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-service .emt-page-title,
.emt-intake .emt-page-title {
  overflow-wrap: anywhere;
}

.emt-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

.emt-checklist-public {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-checklist-public li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.emt-faq {
  padding-block: var(--space-2);
  border-top: 1px solid var(--border);
}

.emt-faq summary {
  cursor: pointer;
  font-weight: 600;
}

.emt-faq p {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
}

.emt-charges {
  border-color: var(--brand-border);
}

.emt-charges-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.emt-charges-list div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.emt-charges-list dt {
  color: var(--text-muted);
}

.emt-charges-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.emt-charges-total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-weight: 700;
}

.emt-service-actions {
  display: grid;
  gap: var(--space-2);
}

.emt-service-actions .btn {
  justify-content: center;
  white-space: normal;
}

.emt-rates-head {
  margin-bottom: var(--space-6);
}

.emt-rates-group {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.emt-rate-table td:not(:first-child),
.emt-rate-table th:not(:first-child) {
  text-align: end;
  white-space: nowrap;
}

.emt-download-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.emt-download-name {
  flex: 1 1 10rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Phase 6: the public forms and the tracking page */
.emt-intake-form,
.emt-track-form,
.emt-track-result,
.emt-done {
  max-width: 48rem;
  margin-top: var(--space-6);
}

.emt-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
  align-items: end;
}

.emt-form-grid .field {
  margin: 0;
  min-width: 0;
}

.emt-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.emt-errors,
.emt-warning {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 48rem;
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
}

.emt-warning {
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--text);
}

.emt-errors ul {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.emt-intake-total {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  font-weight: 600;
}

.emt-intake-files {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.emt-intake-files legend {
  padding-inline: var(--space-1);
  font-weight: 600;
}

.emt-intake-files .field,
.emt-captcha {
  margin: 0;
  min-width: 0;
}

.emt-intake-files .input {
  max-width: 100%;
}

.emt-consent-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}

.emt-consent-text {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0;
}

.emt-consent-box .hint {
  margin: 0;
}

.emt-captcha .input {
  max-width: 8rem;
}

.emt-number {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  overflow-wrap: anywhere;
}

.emt-status-line {
  margin: 0;
}

.emt-status {
  display: inline-block;
  padding: 0.15rem var(--space-3);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  font-weight: 600;
}

.emt-status-received,
.emt-status-submitted,
.emt-status-under_process {
  background: var(--info-soft);
  color: var(--brand-text);
}

.emt-status-documents_pending {
  background: var(--warning-soft);
  color: var(--warning);
}

.emt-status-ready,
.emt-status-delivered {
  background: var(--success-soft);
  color: var(--success);
}

.emt-status-rejected,
.emt-status-cancelled {
  background: var(--danger-soft);
  color: var(--danger);
}

.emt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.emt-steps li {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.emt-step-done {
  background: var(--success-soft);
  color: var(--success);
  font-weight: 600;
}

.emt-step-open {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.emt-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.emt-dl dt {
  color: var(--text-muted);
}

.emt-dl dd {
  margin: 0;
}

.emt-track-note h3,
.emt-track-result h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.emt-track-note p {
  margin: 0;
}

@media (max-width: 52rem) {
  .emt-service-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .emt-rate-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .emt-rate-table,
  .emt-rate-table tbody,
  .emt-rate-table tr,
  .emt-rate-table td {
    display: block;
    width: 100%;
  }

  .emt-rate-table tr {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border);
  }

  .emt-rate-table td,
  .emt-rate-table td:not(:first-child) {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.15rem 0;
    border: 0;
    text-align: start;
    white-space: normal;
  }

  .emt-rate-table td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--text-muted);
  }
}

@media (max-width: 26rem) {
  .emt-search .btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .emt-dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phases 7–9: the header search, portals, schemes with the finder, important links, the search page */
.emt-site-search {
  position: relative;
}

.emt-site-search > summary {
  list-style: none;
}

.emt-site-search > summary::-webkit-details-marker {
  display: none;
}

.emt-site-search-form {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  gap: var(--space-2);
  width: min(22rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.emt-site-search-form .input {
  flex: 1 1 auto;
  min-width: 0;
}

.emt-portal {
  padding-block: var(--space-8) var(--space-12);
}

.emt-portal-block {
  margin-top: var(--space-8);
  scroll-margin-top: var(--space-6);
}

.emt-block-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
}

.emt-entries,
.emt-link-list,
.emt-results,
.emt-rule-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-entry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-margin-top: var(--space-6);
}

.emt-entry-closed {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.emt-entry-main {
  flex: 1 1 16rem;
  min-width: 0;
}

.emt-entry-title {
  margin: 0;
  font-size: var(--text-base);
  overflow-wrap: anywhere;
}

.emt-entry-title a {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.emt-entry-text,
.emt-result-text {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.emt-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.emt-entry-meta > span {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-entry-apply {
  flex: 0 0 auto;
}

.emt-due {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.emt-due-soon {
  background: var(--warning-soft);
  color: var(--warning);
}

.emt-due-closed {
  background: var(--danger-soft);
  color: var(--danger);
}

.emt-closed-list {
  margin-top: var(--space-4);
}

.emt-closed-list > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-muted);
}

.emt-closed-list > .emt-entries {
  margin-top: var(--space-3);
}

.emt-link-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.emt-link-group {
  min-width: 0;
}

.emt-link-list {
  gap: var(--space-1);
}

.emt-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.emt-link:hover {
  background: var(--bg-subtle);
}

.emt-link > span:not(.badge) {
  flex: 1 1 8rem;
  min-width: 0;
}

.emt-official {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-scheme-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
  align-items: end;
  margin-block: var(--space-6);
}

.emt-scheme-q {
  grid-column: 1 / -1;
}

.emt-scheme-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.emt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.emt-tag {
  padding: 0.05rem var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.emt-scheme-body {
  display: grid;
  gap: var(--space-4);
  max-width: 48rem;
  margin-block: var(--space-6);
}

.emt-rule-list {
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.emt-rule-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.emt-finder-form {
  max-width: 56rem;
  margin-block: var(--space-6);
}

.emt-finder-results {
  margin-top: var(--space-6);
}

.emt-may {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin: 0;
  color: var(--success);
  font-size: var(--text-sm);
}

.emt-results {
  margin-top: var(--space-4);
}

.emt-result {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.emt-result-main {
  flex: 1 1 14rem;
  min-width: 0;
}

.emt-result-title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-kind {
  flex: 0 0 auto;
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-kind-service,
.emt-kind-scheme,
.emt-kind-item,
.emt-kind-link,
.emt-kind-post {
  background: var(--brand-soft);
  color: var(--brand-text);
}

@media print {
  .emt-site-header,
  .emt-site-footer,
  .emt-ticker,
  .emt-site-search,
  .emt-rates-actions,
  .emt-not-gov .icon {
    display: none !important;
  }

  .emt-rates {
    padding: 0;
  }
}

/* Phase 11 (R10, design §9): the useful tools — the index, a tool page, the crop box, results. Everything works at
   320 px: rows wrap, canvases and pictures never get wider than their box. */
.emt-privacy {
  display: inline-flex;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 48rem;
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: 600;
}

.emt-tool-group {
  margin-top: var(--space-8);
}

.emt-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.emt-tool-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.emt-tool-card:hover,
.emt-tool-card:focus-visible {
  border-color: var(--brand);
}

.emt-tool-card-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--brand-text);
}

.emt-tool-card-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.emt-tool {
  padding-block: var(--space-8) var(--space-12);
}

.emt-tool .emt-page-title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  overflow-wrap: anywhere;
}

.emt-tool-card-body {
  margin-top: var(--space-6);
}

.emt-tool-form {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.emt-tool-form + .emt-tool-form {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.emt-tool-form .field {
  min-width: 0;
  margin: 0;
}

.emt-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: flex-end;
}

.emt-tool-row > .field {
  flex: 1 1 10rem;
}

.emt-tool-size > .field {
  flex: 1 1 7rem;
}

.emt-tool-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
}

.emt-tool-pair .textarea {
  width: 100%;
  min-height: 9rem;
}

.emt-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.emt-tool-result {
  margin-top: var(--space-4);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-tool-result:empty {
  display: none;
}

.emt-tool-result[data-kind="ok"],
.emt-tool-out[data-kind="ok"] {
  color: var(--success);
}

.emt-tool-result[data-kind="warn"] {
  color: var(--text);
}

.emt-tool-result[data-kind="error"] {
  color: var(--danger);
}

.emt-tool-out {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-tool-dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.emt-tool-dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.emt-tool-dl dt {
  color: var(--text-muted);
}

.emt-tool-dl dd {
  margin: 0;
  font-weight: 600;
}

.emt-crop {
  display: grid;
  gap: var(--space-2);
}

.emt-crop-stage {
  position: relative;
  width: 100%;
  max-width: 45rem;
  touch-action: none;
}

.emt-crop-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.emt-crop-box {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45);
  cursor: move;
}

.emt-crop-box:focus-visible {
  outline: 3px solid var(--warning);
  outline-offset: 2px;
}

.emt-crop-stage {
  overflow: hidden;
}

.emt-tool-preview {
  margin: 0;
}

.emt-tool-preview img {
  display: block;
  max-width: min(100%, 20rem);
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.emt-tool-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-6);
}

.emt-tool-list:empty {
  display: none;
}

.emt-tool-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.emt-tool-item-name {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.emt-tool-table {
  width: 100%;
  max-width: 36rem;
}

.emt-tool-table th {
  font-weight: 500;
  text-align: start;
}

.emt-tool-letters summary {
  cursor: pointer;
  font-weight: 600;
}

.emt-land-custom {
  max-width: 10rem;
  margin-top: var(--space-2);
}

.emt-qr-box {
  max-width: 20rem;
}

.emt-qr-box canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.emt-tool-how {
  max-width: 48rem;
  margin-top: var(--space-8);
}

.emt-tool-steps {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-inline-start: var(--space-6);
}

/* Phase 12: booking an appointment */
.emt-book-day-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.emt-book-day-row .field {
  flex: 1 1 14rem;
  min-width: 0;
}

.emt-book-day {
  margin-bottom: var(--space-4);
}

.emt-slot-pick {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.emt-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-2);
}

.emt-slot-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.emt-slot-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.emt-slot-option .emt-sub,
.emt-review-head .emt-sub,
.emt-post-meta .emt-sub {
  display: inline;
}

.emt-booked .card + .card {
  margin-top: var(--space-4);
}

/* Phase 12: the latest updates */
.emt-post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.emt-post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.emt-post-image,
.emt-post-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.emt-post-hero {
  margin: var(--space-4) 0;
  border-radius: var(--radius);
}

.emt-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.emt-post-excerpt {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.emt-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.emt-share {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.emt-share-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.emt-share-url {
  width: 100%;
  max-width: 40rem;
  font-size: var(--text-sm);
}

.emt-post-more {
  margin-top: var(--space-6);
}

.emt-post .emt-prose,
.emt-updates .emt-card-title {
  overflow-wrap: anywhere;
}

/* Phase 12: reviews, the FAQ and the contact page's forms */
.emt-reviews-grid,
.emt-contact-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.emt-reviews-grid > *,
.emt-contact-forms > * {
  min-width: 0;
}

.emt-review-summary {
  margin: 0;
  font-size: var(--text-lg);
}

.emt-review-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-review {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.emt-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.emt-review-text {
  margin: var(--space-1) 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.emt-stars {
  color: var(--warning);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.emt-stars-off {
  color: var(--border);
}

.emt-rating-pick {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.emt-rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.emt-rating-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--warning);
  cursor: pointer;
}

.emt-rating-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.emt-faq-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.emt-faq-item {
  padding: var(--space-3) var(--space-4);
}

.emt-faq-q {
  font-weight: 600;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.emt-faq-a {
  margin-top: var(--space-2);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.emt-contact-reviews .emt-card-title,
.emt-review-form .emt-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.emt-book,
.emt-reviews {
  max-width: 64rem;
}

/* Phase 13 (R12.1): Hindi needs more room between lines (matras above and below); touch targets of at least 44 px. */
.emt-site:lang(hi),
.emt-platform-home:lang(hi) {
  line-height: 1.75;
}

.emt-site:lang(hi) h1,
.emt-site:lang(hi) h2,
.emt-site:lang(hi) h3,
.emt-platform-home:lang(hi) h1,
.emt-platform-home:lang(hi) h2,
.emt-platform-home:lang(hi) h3 {
  line-height: 1.45;
}

.emt-site a:focus-visible,
.emt-site summary:focus-visible,
.emt-home-banners:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Phase 13 (R12.2): the home of a centre (resources/views/emt/centre/home.php) */
.emt-home {
  padding-bottom: var(--space-12);
}

.emt-home-hero {
  padding-block: var(--space-12) var(--space-8);
  background:
    radial-gradient(60rem 24rem at 100% 0%, var(--brand-soft), transparent 70%),
    linear-gradient(180deg, var(--bg-subtle), var(--bg));
  border-bottom: 1px solid var(--border);
}

.emt-home-hero-inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.emt-home-hero-inner .emt-centre-state,
.emt-home-hero-inner .emt-centre-actions {
  justify-content: center;
}

.emt-home-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}

.emt-home-search {
  display: grid;
  gap: var(--space-2);
  max-width: 40rem;
  margin: var(--space-6) auto 0;
  text-align: start;
}

.emt-home-search-label {
  font-weight: 600;
}

.emt-home-search-row {
  display: flex;
  gap: var(--space-2);
}

.emt-home-search-row .input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  font-size: var(--text-lg);
}

.emt-home-search-row .btn {
  flex: 0 0 auto;
  min-height: 3rem;
}

.emt-home-banners {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.emt-home-banner {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.emt-home-banner-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.emt-home-banner-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.emt-home-banner-text {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface));
}

.emt-home-banner-title {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 5rem;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-home-banner-title .icon {
  flex: 0 0 auto;
  color: var(--brand-text);
}

.emt-home-section {
  padding-top: var(--space-10);
}

.emt-home-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.emt-home-h2 {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
}

.emt-home-h2 .icon {
  color: var(--brand-text);
}

.emt-home-more {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.emt-home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-home-tile {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  height: 100%;
  min-height: 4rem;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.emt-home-tile:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-md);
}

.emt-home-tile-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-text);
}

.emt-home-tile-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.emt-home-posts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-home-post {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.emt-home-post-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-home-post-text {
  margin: 0;
  color: var(--text-muted);
}

.emt-home-link-groups,
.emt-home-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
}

.emt-home-link-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.emt-home-link-list a {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}

.emt-home-contact .emt-contact-links {
  margin-top: var(--space-3);
}

@media (max-width: 30rem) {
  .emt-home-hero {
    padding-block: var(--space-8) var(--space-6);
  }

  .emt-home-search-row {
    flex-direction: column;
  }
}

/* Phase 13 (R12.2, R16.2): the platform home "/" in the SaaS profile (resources/views/pages/home.php). The hero's
   visual — a form with ticks, a receipt with a QR block, the status chip — is drawn here, no pictures. */
.emt-platform-home {
  overflow-x: clip;
}

.emt-ph-hero {
  padding-block: var(--space-12) var(--space-16);
  text-align: start;
  background:
    radial-gradient(50rem 30rem at 85% 10%, var(--brand-soft), transparent 70%),
    linear-gradient(180deg, var(--bg-subtle), var(--bg));
}

.emt-ph-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.emt-ph-hero-text h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
}

.emt-ph-hero-text .lead {
  margin-top: var(--space-4);
  color: var(--text-muted);
}

.emt-ph-eyebrow {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--brand-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.emt-ph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.emt-ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.emt-ph-chips li {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.emt-ph-chips .icon {
  color: var(--success);
}

.emt-ph-art {
  margin: 0;
}

.emt-ph-counter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--surface), var(--bg-subtle));
  box-shadow: var(--shadow-xl);
}

.emt-ph-form,
.emt-ph-receipt {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.emt-ph-form {
  position: relative;
  padding-bottom: var(--space-10);
}

.emt-ph-form-head {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emt-ph-form-head .icon {
  flex: 0 0 auto;
  color: var(--brand-text);
}

.emt-ph-checks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.emt-ph-check {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  overflow-wrap: anywhere;
}

.emt-ph-tick {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-sm);
  background: var(--success);
  color: #fff;
  animation: emt-ph-tick 0.4s var(--ease) both;
}

.emt-ph-check[data-i="1"] .emt-ph-tick { animation-delay: 0.15s; }
.emt-ph-check[data-i="2"] .emt-ph-tick { animation-delay: 0.3s; }
.emt-ph-check[data-i="3"] .emt-ph-tick { animation-delay: 0.45s; }

@keyframes emt-ph-tick {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.emt-ph-status {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-3);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: 700;
  animation: emt-ph-pulse 2.4s var(--ease) 1.4s infinite;
}

@keyframes emt-ph-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--success-soft); }
  50% { box-shadow: 0 0 0 6px var(--success-soft); }
}

.emt-ph-receipt {
  border-style: dashed;
  font-size: var(--text-sm);
  transform: rotate(1.5deg);
}

.emt-ph-receipt-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  justify-content: space-between;
  margin: 0 0 var(--space-2);
}

.emt-ph-receipt-no {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.emt-ph-receipt-rows {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.emt-ph-receipt-rows div {
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.emt-ph-receipt-rows dt,
.emt-ph-receipt-rows dd {
  margin: 0;
}

.emt-ph-receipt-rows dt {
  color: var(--text-muted);
}

.emt-ph-receipt-total {
  padding-top: var(--space-1);
  border-top: 1px dashed var(--border-strong);
  font-weight: 700;
}

.emt-ph-receipt-total dt {
  color: var(--text);
}

.emt-ph-receipt-foot {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.emt-ph-qr {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(9, 1fr);
  width: 4rem;
  height: 4rem;
  padding: 3px;
  border-radius: var(--radius-xs);
  background: #fff;
}

.emt-ph-q {
  display: block;
}

.emt-ph-q-on {
  background: #0b2b24;
}

.emt-ph-receipt-note {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.emt-ph-section {
  padding-block: var(--space-12);
}

.emt-ph-band {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

.emt-ph-head {
  max-width: 44rem;
  margin-bottom: var(--space-6);
}

.emt-ph-h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  line-height: var(--leading-tight);
}

.emt-ph-sub {
  margin: var(--space-2) 0 0;
  color: var(--text-muted);
}

.emt-ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-ph-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.emt-ph-feature {
  height: 100%;
}

.emt-ph-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-text);
}

.emt-ph-h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
}

.emt-ph-text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.emt-ph-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-ph-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.emt-ph-step-n {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--brand-fg);
  font-family: var(--font-heading);
  font-weight: 700;
}

.emt-ph-step-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.emt-ph-plans {
  background: linear-gradient(135deg, var(--brand-soft), var(--surface));
  border-color: var(--brand-border);
}

.emt-ph-narrow {
  max-width: 48rem;
}

.emt-ph-faq {
  display: grid;
  gap: var(--space-2);
}

.emt-ph-qa {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.emt-ph-qa > summary {
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: 600;
}

.emt-ph-qa > p {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-muted);
}

.emt-ph-cta {
  text-align: center;
}

.emt-ph-cta .emt-ph-narrow {
  margin-inline: auto;
}

.emt-ph-cta .emt-ph-actions {
  justify-content: center;
}

.emt-ph-demo {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

.emt-ph-logins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.emt-ph-login-role,
.emt-ph-login-what {
  margin: 0;
}

.emt-ph-login-id {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.emt-ph-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 56rem) {
  .emt-ph-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 30rem) {
  .emt-ph-hero {
    padding-block: var(--space-8) var(--space-10);
  }

  .emt-ph-counter {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .emt-ph-receipt {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emt-ph-tick,
  .emt-ph-status {
    animation: none;
  }
}

/* Phase 13 (R15.1, RULE 2 point 3): the demo sign-ins on /login (the Kit's [data-demo-logins] box with Emitra's rows,
   resources/views/emt/demo/logins.php). The Kit's .alert is a flex row, so ".alert.stack" put every sign-in side by
   side and a 390 px phone's page grew to 1,800 px (the other Kit products' fix). One under another; long addresses
   wrap. */
.alert.stack[data-demo-logins] {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.alert.stack[data-demo-logins] > * {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.alert.stack[data-demo-logins] .cluster {
  --cluster-gap: var(--space-2);
}

.alert.stack[data-demo-logins] .small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.alert.stack[data-demo-logins] .btn {
  max-width: 100%;
  height: auto;
  min-height: 2.75rem;
  padding-block: var(--space-1);
  line-height: 1.3;
  white-space: normal;
  text-align: start;
}

/* Phase 13 (RULE 2 point 6): the tools index and the home's link groups / tools / demo sign-ins. */
.emt-tools .emt-block-title {
  margin-top: var(--space-8);
}

.emt-home-link-group {
  min-width: 0;
}

.emt-home-tools .emt-home-tile-icon {
  background: var(--accent-soft);
}

.emt-ph-login {
  min-width: 0;
}