/* Puptown Lounge — Page-Specific Styles & Blueprints                         */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */

.hero-block {
  width:100%;
  padding-block-start:clamp(2.5rem, 6vw, 4.5rem);
  padding-block-end:clamp(2rem, 5vw, 4rem);
  border-bottom:3px solid var(--border-strong);
  background-color:var(--bg-ground);
  position:relative;
}

.hero-block-surface {
  background-color:var(--bg-surface);
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);

  align-items:start;
}

@media (min-width: 920px) {
  .hero-grid {
    grid-template-columns:1.15fr 0.85fr;
    gap:var(--space-2xl);
    align-items:center;
  }
}

.hero-header-area {
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}

.hero-meta-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.75rem 1.25rem;
}

.hero-title {
  font-size:var(--text-4xl);
  line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--text-main);
  margin:0;
  text-wrap:balance;
}

.hero-standfirst {
  font-size:var(--text-lg);
  line-height:var(--lh-snug);
  color:var(--text-muted);
  max-width:58ch;
  margin-block-start:0.25rem;
}

.hero-quick-specs {
  border-top:2px solid var(--border-strong);
  border-bottom:2px solid var(--border-strong);
  background-color:var(--bg-surface);
  padding:1.25rem 1.5rem;
  margin-block-start:var(--space-md);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:1.25rem;
}

.quick-spec-item {
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.quick-spec-item .spec-label {
  font-size:0.75rem;
}

.quick-spec-item .spec-val {
  font-size:var(--text-xl);
  line-height:1.15;
}

.hero-aside-frame {
  border:2px solid var(--border-strong);
  background-color:var(--bg-surface);
  overflow:hidden;
  box-shadow:0 16px 32px rgba(20, 34, 45, 0.08);
}

.hero-aside-frame img {
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  display:block;
}

.hero-aside-caption {
  padding:0.875rem 1.15rem;
  background-color:var(--bg-surface-alt);
  border-top:1px solid var(--border-hairline);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  color:var(--text-muted);
}

/* 2. Full-Width Photographic Interstitials                                  */
/* -------------------------------------------------------------------------- */

.photo-divider-full {
  width:100%;
  border-bottom:2px solid var(--border-strong);
  background-color:var(--bg-dark);
  position:relative;
  overflow:hidden;
}

.photo-divider-frame {
  width:100%;
  aspect-ratio:16 / 9;
  position:relative;
}

.photo-divider-frame img {
  width:100%;
  height:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}

.photo-divider-bar {
  background-color:var(--bg-surface);
  border-top:2px solid var(--border-strong);
  padding:0.75rem var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem 1.5rem;
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
}

.photo-divider-title {
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.photo-divider-meta {
  color:var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* 3. Sizing & Load Rate Calculator Tool                                      */

.calc-section {
  width:100%;
  padding-block:var(--space-3xl);
  background-color:var(--bg-surface);
  border-bottom:2px solid var(--border-strong);
}

.calc-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
}

@media (min-width: 900px) {
  .calc-grid {
    grid-template-columns:1.15fr 0.85fr;
    gap:var(--space-2xl);
    align-items:start;
  }
}

.calc-control-sheet {
  background-color:var(--bg-surface-alt);
  border:2px solid var(--border-strong);
  padding:clamp(1.25rem, 3vw, 2.25rem);
}

.calc-control-group {
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--border-hairline);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

.calc-control-group:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.calc-legend {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--text-main);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.segmented-control {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background-color:var(--border-strong);
  padding:2px;
  border:1px solid var(--border-strong);
}

.segmented-radio-label {
  background-color:var(--bg-surface);
  padding:0.75rem 1rem;
  text-align:center;
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:600;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  transition:background-color var(--dur-fast), color var(--dur-fast);
  user-select:none;
}

.segmented-radio-label input[type="radio"] {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.segmented-radio-label:has(input:checked) {
  background-color:var(--text-main);
  color:#fff;
}

.segmented-radio-label:hover {
  background-color:var(--bg-surface-alt);
}

.segmented-radio-label:has(input:checked):hover {
  background-color:var(--text-main);
}

.segmented-radio-label:focus-within {
  outline:2px solid var(--accent-mint);
  outline-offset:1px;
}

.calc-stepper-wrap {
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.calc-stepper-btn {
  width:44px;
  height:44px;
  min-height:44px;
  background-color:var(--bg-surface);
  border:1px solid var(--border-strong);
  color:var(--text-main);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  font-weight:700;
  transition:background-color var(--dur-fast), color var(--dur-fast);
}

.calc-stepper-btn:hover {
  background-color:var(--accent-mint);

  border-color:var(--accent-mint);
  color:#fff;
}

.calc-stepper-btn:active {
  background-color:var(--accent-mint-hover);
  color:#fff;
}

.calc-stepper-btn:focus-visible {
  outline:2px solid var(--accent-mint);
  outline-offset:2px;
}

.calc-stepper-input {
  width:90px;
  height:44px;
  text-align:center;
  font-family:var(--fowo-526);
  font-size:var(--text-lg);
  font-weight:700;
  border:1px solid var(--border-strong);
  background-color:var(--bg-surface);
  color:var(--text-main);
}

.calc-stepper-input:focus {
  outline:2px solid var(--accent-mint);
}

.calc-addons-grid {
  display:grid;

  grid-template-columns:1fr;
  gap:0.75rem;
}

.calc-addon-choice {
  background-color:var(--bg-surface);
  border:1px solid var(--border-hairline);
  padding:0.75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:border-color var(--dur-fast), background-color var(--dur-fast);
}

.calc-addon-choice:hover {
  border-color:var(--text-main);
}

.calc-addon-choice:has(input:checked) {
  border-color:var(--accent-mint);
  background-color:var(--accent-mint-subtle);
}

.calc-addon-label-side {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-size:var(--text-sm);
}

.calc-addon-price {
  font-family:var(--fowo-526);
  font-weight:700;
  font-size:var(--text-sm);
  color:var(--text-main);
}

.calc-result-card {
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow:0 12px 28px rgba(20, 34, 45, 0.08);
  position:relative;
}

@media (min-width: 900px) {
  .calc-result-card {
    position:sticky;
    top:6rem;
  }
}

.calc-result-header {
  border-bottom:2px solid var(--border-strong);
  padding-bottom:1rem;
  margin-bottom:1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.calc-total-display {
  display:flex;
  align-items:baseline;
  gap:0.5rem;
  margin-block-end:1rem;
}

.calc-total-number {
  font-family:var(--fowo-526);
  font-size:clamp(2.5rem, 4vw, 3.75rem);
  font-weight:700;
  line-height:1;
  color:var(--text-main);
}

.calc-total-unit {
  font-family:var(--fowo-526);
  font-size:var(--text-base);
  color:var(--text-muted);
}

.calc-breakdown-list {
  display:flex;
  flex-direction:column;
  gap:0.625rem;
  padding-block:1.25rem;
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);
  margin-block:1rem;
  font-size:var(--text-sm);
}

.calc-breakdown-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.calc-breakdown-row span:last-child {
  font-family:var(--fowo-526);
  font-weight:600;
}

.calc-formula-callout {
  padding:0.875rem 1rem;
  background-color:var(--bg-surface-alt);
  border-left:3px solid var(--accent-mint);
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  line-height:var(--lh-snug);
  color:var(--text-muted);
  margin-block:1.25rem;
}

.calc-disclaimer {
  font-size:var(--text-xs);
  color:var(--text-muted);
  line-height:var(--lh-snug);
  margin-block-start:1rem;
}

/* -------------------------------------------------------------------------- */
/* 4. Service Ledgers & Operating Schedules                                  */
/* -------------------------------------------------------------------------- */

.service-block {
  width:100%;
  padding-block:var(--space-3xl);
  border-bottom:2px solid var(--border-strong);
}

.service-header-row {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:var(--space-xl);
  padding-bottom:1rem;
  border-bottom:2px solid var(--border-strong);
}

.service-headline-group {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}

.service-rate-badge {
  background-color:var(--bg-surface);
  border:1px solid var(--border-strong);
  padding:0.5rem 1rem;
  display:flex;
  align-items:baseline;
  gap:0.5rem;
}

.service-rate-figure {
  font-family:var(--fowo-526);
  font-size:var(--text-2xl);
  font-weight:700;
  color:var(--accent-mint);
  line-height:1;
}

.service-rate-label {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  color:var(--text-muted);
  text-transform:uppercase;
}

.service-grid-details {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
}

@media (min-width: 860px) {
  .service-grid-details {
    grid-template-columns:1.2fr 0.8fr;
  }
}

.equipment-tags-grid {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:1rem;
}

.equipment-chip {
  padding:0.4rem 0.75rem;
  background-color:var(--bg-surface);
  border:1px solid var(--border-strong);
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}

/* -------------------------------------------------------------------------- */
/* 5. FAQ Accordion                                                           */
/* -------------------------------------------------------------------------- */

.faq-accordion {
  border-top:2px solid var(--border-strong);
  margin-block-start:var(--space-xl);
}

.faq-item {
  border-bottom:1px solid var(--border-hairline);
  background-color:var(--bg-surface);
  transition:background-color var(--dur-fast);
}

.faq-item:hover {
  background-color:var(--bg-surface-alt);
}

.faq-trigger {
  width:100%;
  min-height:52px;
  padding:1.15rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font-family:var(--fowo-2f8);
  font-weight:700;
  font-size:var(--text-lg);
  color:var(--text-main);
  transition:color var(--dur-fast);
}

.faq-trigger:hover {
  color:var(--accent-mint);
}

.faq-trigger:focus-visible {
  outline:2px solid var(--accent-mint);
  outline-offset:-2px;
}

.faq-icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-out);
}

.faq-item.is-open .faq-icon {
  transform:rotate(180deg);
}

.faq-content {
  display:none;
  padding:0 1.25rem 1.5rem 1.25rem;
  font-size:var(--text-base);
  line-height:var(--lh-body);
  color:var(--text-main);
}

.faq-item.is-open .faq-content {
  display:block;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.contact-layout {
  display:flex;
  flex-direction:column;
  gap:var(--space-2xl);
  padding-block:var(--space-3xl);
  width:100%;
}

@media (min-width: 900px) {
  .contact-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:var(--space-3xl);
  }
}

.contact-info-col {
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  min-width:0;
  width:100%;
  max-width:100%;
}

.contact-inquiry-card {
  min-width:0;
  max-width:100%;
}

.facility-card {
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1.25rem, 3vw, 2.25rem);
}

.facility-address-block {
  padding-block:1rem;
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline);
  margin-block:1.25rem;
  font-size:var(--text-base);
  line-height:1.6;
}

.contact-inquiry-card {
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1.25rem, 3vw, 2.5rem);
  box-shadow:0 12px 28px rgba(20, 34, 45, 0.08);
}

.contact-inquiry-header {
  border-bottom:2px solid var(--border-strong);
  padding-bottom:1rem;
  margin-bottom:1.5rem;
}

/* -------------------------------------------------------------------------- */
/* 7. Legal Architecture A: Framed Document Card (privacy.html)               */
/* -------------------------------------------------------------------------- */

.legal-framed-ground {
  width:100%;
  padding-block:clamp(2rem, 5vw, 4rem);
  background-color:var(--bg-ground);
}

.doc-frame {
  max-width:960px;
  margin-inline:auto;
  background-color:var(--bg-surface);
  border:1px solid var(--border-hairline);
  box-shadow:0 20px 48px rgba(20, 34, 45, 0.08);
  padding:clamp(1.5rem, 5vw, 3.75rem);
  border-radius:var(--radius-sm);
}

.doc-masthead {
  border-bottom:2px solid var(--border-strong);
  padding-bottom:2rem;
  margin-bottom:2.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.doc-meta-strip {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 2rem;
  padding:0.75rem 1rem;
  background-color:var(--bg-surface-alt);
  border:1px solid var(--border-hairline);
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  color:var(--text-muted);
}

.doc-clause {
  margin-block-end:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--border-hairline);
}

.doc-clause:last-of-type {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.clause-heading {
  font-family:var(--fowo-2f8);
  font-size:var(--text-2xl);
  font-weight:700;
  margin-bottom:1rem;
  color:var(--text-main);
  display:flex;
  align-items:baseline;
  gap:0.75rem;
}

.clause-tag {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:600;
  color:var(--accent-mint);
  text-transform:uppercase;
}

.hezo0fb {
  font-size:var(--text-base);
  line-height:var(--lh-body);
}

.hezo0fb p {
  margin-bottom:1rem;
}

.hezo0fb ul {
  padding-left:1.25rem;
  margin-bottom:1rem;
}

.hezo0fb li {
  margin-bottom:0.4rem;
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.hata09a-section {
  width:100%;
  padding-block:clamp(2rem, 5vw, 4rem);
  background-color:var(--bg-ground);
}

.hata09a-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
}

@media (min-width: 900px) {
  .hata09a-grid {
    grid-template-columns:280px 1fr;
    gap:var(--space-2xl);
    align-items:start;
  }
}

.sticky-index-aside {
  position:relative;
}

@media (min-width: 900px) {
  .sticky-index-aside {
    position:sticky;
    top:6rem;
  }
}

.sticky-index-card {
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:1.25rem;
}

.sticky-index-title {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
  border-bottom:1px solid var(--border-hairline);
  padding-bottom:0.5rem;
  margin-bottom:1rem;
}

.sticky-index-nav {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  list-style:none;
  padding:0;
  margin:0;
}

.sticky-index-link {
  display:flex;
  align-items:baseline;
  gap:0.625rem;
  padding:0.5rem 0.625rem;
  font-family:var(--fowo-1a7);
  font-size:var(--text-sm);
  color:var(--text-main);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.sticky-index-num {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:700;
  color:var(--text-muted);
}

.sticky-index-link:hover {
  background-color:var(--bg-surface-alt);
  color:var(--accent-mint);
}

.sticky-index-link.is-active {
  border-left-color:#075c47;
  background-color:var(--accent-mint-subtle);
  color:#075c47;
  font-weight:600;
}

.sticky-index-link.is-active .sticky-index-num {
  color:#075c47;
}

.mobile-jump-wrapper {
  display:block;
  margin-bottom:1.5rem;
}

@media (min-width: 900px) {
  .mobile-jump-wrapper {
    display:none;
  }
}

.mobile-jump-select {
  width:100%;
  min-height:44px;
  padding:0.75rem 1rem;
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  font-family:var(--fowo-526);
  font-size:var(--text-sm);
  color:var(--text-main);
}

.hata09a-main {
  display:flex;
  flex-direction:column;
  gap:var(--space-2xl);
}

.hata09a-main {
  min-width:0;
  max-width:100%;
}

.index-clause-block {
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1rem, 3.5vw, 2.5rem);
  min-width:0;
  max-width:100%;
}

.index-clause-header {
  border-bottom:2px solid var(--border-strong);
  padding-bottom:0.875rem;
  margin-bottom:1.25rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.5rem;
}

@media (min-width: 600px) {
  .index-clause-header {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:0.75rem;
  }
}

.index-clause-header h2 {
  min-width:0;
  width:100%;
}

@media (min-width: 600px) {
  .index-clause-header h2 {
    flex:1 1 200px;
    width:auto;
  }
}

.index-clause-badge {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:700;
  background-color:var(--text-main);
  color:#fff;
  padding:0.25rem 0.5rem;
  white-space:nowrap;
  flex-shrink:0;
}

/* 9. Legal Architecture C: Dated Rail (terms.html)                           */

.gazuaf6-section {
  width:100%;
  padding-block:clamp(2rem, 5vw, 4rem);
  background-color:var(--bg-ground);
}

.rail-container {
  display:flex;
  flex-direction:column;
  gap:var(--space-2xl);
  position:relative;
}

@media (min-width: 860px) {
  .rail-container {
    padding-left:200px;
  }
  .rail-spine-line {
    position:absolute;
    left:175px;
    top:0;
    bottom:0;
    width:2px;
    background-color:var(--border-strong);
  }
}

.rail-clause-item {
  position:relative;
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1.25rem, 3vw, 2.25rem);
}

.rail-date-marker {
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:1rem;
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:700;
  text-transform:uppercase;
  color:var(--accent-mint);
}

@media (min-width: 860px) {
  .rail-date-marker {
    position:absolute;
    left:-200px;
    top:2rem;
    width:160px;
    justify-content:flex-end;
    text-align:right;
    margin-bottom:0;
    padding-right:1.5rem;
  }
  .rail-clause-item::before {
    content:"";
    position:absolute;
    left:-32px;
    top:2.3rem;
    width:14px;
    height:14px;
    background-color:var(--accent-mint);
    border:2px solid var(--border-strong);
    border-radius:50%;
  }
}

.rail-clause-title {
  font-family:var(--fowo-2f8);
  font-size:var(--text-xl);
  font-weight:700;
  border-bottom:1px solid var(--border-hairline);
  padding-bottom:0.75rem;
  margin-bottom:1rem;
}

/* -------------------------------------------------------------------------- */

.data-spec-table-wrap {
  width:100%;
  overflow-x:auto;
  border:2px solid var(--border-strong);
  margin-block:1.5rem;
}

.data-spec-table {
  width:100%;
  min-width:580px;
  border-collapse:collapse;
  background-color:var(--bg-surface);
  font-size:var(--text-sm);
}

.data-spec-table th {
  background-color:var(--bg-surface-alt);
  border-bottom:2px solid var(--border-strong);
  padding:0.75rem 1rem;
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-main);
  text-align:left;
}

.data-spec-table td {
  padding:0.75rem 1rem;
  border-bottom:1px solid var(--border-hairline);
  vertical-align:top;
  color:var(--text-main);
}

.data-spec-table tr:hover td {
  background-color:var(--bg-surface-alt);
}

.data-spec-table tr:last-child td {
  border-bottom:none;
}

.id-badge {
  font-family:var(--fowo-526);
  font-size:var(--text-xs);
  font-weight:700;
  padding:0.2rem 0.5rem;
  background-color:var(--bg-surface-alt);
  border:1px solid var(--border-hairline);
  color:var(--text-main);
  display:inline-block;
}

/* 11. 404 Error Page Layout                                                  */

.error-page-section {
  width:100%;
  min-height:65vh;
  display:flex;
  align-items:center;
  padding-block:var(--space-4xl);
  background-color:var(--bg-ground);
}

.error-spec-card {
  max-width:680px;
  margin-inline:auto;
  background-color:var(--bg-surface);
  border:2px solid var(--border-strong);
  padding:clamp(1.5rem, 4vw, 3rem);
  box-shadow:0 16px 36px rgba(20, 34, 45, 0.1);
}

.error-code-badge {
  font-family:var(--fowo-526);
  font-size:var(--text-3xl);
  font-weight:800;
  color:var(--accent-alert);
  line-height:1;
  margin-bottom:1rem;
}

.error-links-cluster {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

/* -------------------------------------------------------------------------- */
/* 12. Fluidity & Viewport Verification (320px – 1920px)                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .hero-quick-specs {
    grid-template-columns:1fr;
    gap:1rem;
  }
  .spec-sheet {
    padding:0.875rem;
  }
  .calc-control-sheet {
    padding:0.875rem;
  }
  .doc-frame {
    padding:0.875rem;
  }
  .rail-clause-item {
    padding:0.875rem;
  }
  .index-clause-block {
    padding:0.875rem;
  }
  .segmented-control {
    grid-template-columns:1fr;
  }
  .index-clause-header {
    flex-direction:column;
    align-items:flex-start;
    gap:0.5rem;
  }
}