/* Ultima Memoria Information Age Card — doctor developer package, integrated.
   Classes renamed to uic-* (avoid collisions); Google Fonts @import + preview body{} removed;
   variables scoped to .uic-information-card. Source: developer package (Jun 17). */
/*
Ultima Memoria – Information Age Card
Developer package CSS
Final approved desktop + mobile layout.
*/


/* Explicit positioning for the left upload block.
   This avoids paragraph margin collapsing and makes the visual gap reliable. */
.uic-upload-text-left {
  height: 78px;
}

.uic-upload-text-left .uic-upload-caption,
.uic-upload-text-left .uic-upload-result {
  margin: 0;
}

.uic-upload-text-left .uic-upload-result {
  position: absolute;
  left: 0;
  top: 24px;
}


/* Align the right gold result with the left gold result. */
.uic-upload-text-right .uic-upload-caption,
.uic-upload-text-right .uic-upload-result-large {
  margin: 0;
}

.uic-upload-text-right .uic-upload-result-large {
  position: absolute;
  left: 0;
  top: 24px;
}

.uic-upload-text-right .uic-upload-note {
  position: absolute;
  left: 0;
  top: 48px;
  margin: 0;
}



.uic-information-card {
  --uic-cream: #FDFAF1;
  --uic-footer: #EFE9D7;
  --uic-gold: #8B6F3E;
  --uic-line: #D8CDBB;
  --uic-blue: #1F2E4B;
  --uic-white: #FFFFFF;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
}


.uic-information-card,
.uic-information-card * {
  box-sizing: border-box;
}

.uic-information-card {
  position: relative;
  width: 734px;
  height: 580px;
  overflow: hidden;
  background: var(--uic-cream);
  border: 1px solid var(--uic-gold);
  border-radius: 6px;
  color: var(--uic-blue);
  font-family: var(--font-serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
}


.uic-information-card p,
.uic-information-card h1,
.uic-information-card h2,
.uic-information-card h3 {
  margin: 0;
}

.uic-information-card strong {
  font-weight: 600;
}

.uic-information-card em {
  font-style: italic;
}

.uic-card-line {
  position: absolute;
  background: var(--uic-line);
}

.uic-card-line.is-gold {
  background: var(--uic-gold);
  opacity: 0.55;
}

.uic-line-header {
  left: 16px;
  top: 97px;
  width: 506px;
  height: 1px;
}

.uic-line-top-body {
  left: 16px;
  top: 185px;
  width: 702px;
  height: 1px;
}

.uic-line-middle {
  left: 16px;
  top: 300px;
  width: 702px;
  height: 1px;
}

.uic-line-upload {
  left: 16px;
  top: 415px;
  width: 702px;
  height: 1px;
}

.uic-line-footer {
  left: 0;
  top: 531px;
  width: 734px;
  height: 1px;
}

.uic-line-v-head {
  left: 274px;
  top: 115px;
  width: 1px;
  height: 53px;
}

.uic-line-v-body {
  left: 50%;
  transform: translateX(-50%);
  top: 185px;
  width: 1px;
  height: 230px;
}

.uic-line-v-upload {
  left: 50%;
  transform: translateX(-50%);
  top: 449px;
  width: 1px;
  height: 68px;
}

.uic-line-v-footer {
  left: 50%;
  transform: translateX(-50%);
  top: 541px;
  width: 1px;
  height: 31px;
}

.uic-icon {
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
}

.uic-icon-small {
  width: 27px;
  height: 27px;
}

.uic-icon-info-top {
  left: 16px;
  top: 27px;
}

.uic-icon-storage {
  left: 291px;
  top: 117.5px;
}

.uic-icon-harddrive {
  left: 16px;
  top: 229px;
}

.uic-icon-ruler {
  left: 385px;
  top: 229px;
}

.uic-icon-electricity {
  left: 16px;
  top: 344px;
}

.uic-icon-euro {
  left: 385px;
  top: 344px;
}

.uic-icon-cloud {
  left: 16px;
  top: 448px;
}

.uic-icon-time {
  left: 385px;
  top: 448px;
}

.uic-icon-footer {
  left: 30px;
  top: 544px;
}

.uic-title {
  position: absolute;
  left: 92px;
  top: 28px;
  width: 430px;
  color: var(--uic-blue);
  font-size: 20.5px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.uic-subtitle {
  position: absolute;
  left: 94px;
  top: 57px;
  width: 300px;
  color: var(--uic-gold);
  font-size: 18px;
  line-height: 22px;
  font-style: italic;
  font-weight: 400;
}

.uic-badge {
  position: absolute;
  top: 20px;
  right: 16px;
  width: 180px;
  height: 140px;
  border-radius: 7px;
  background: var(--uic-gold);
  color: var(--uic-white);
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.uic-badge-number {
  display: block;
  font-size: 45px;
  line-height: 48px;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "onum" 0;
  letter-spacing: 0.02em;
}

.uic-badge-unit {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.uic-badge-caption {
  display: block;
  width: 166px;
  margin: 11px auto 0;
  font-size: 8.9px;
  line-height: 14.2px;
  font-weight: 600;
}

.uic-intro {
  position: absolute;
  left: 16px;
  top: 115.4px;
  width: 242px;
  color: var(--uic-blue);
  font-size: 12.4px;
  line-height: 17.4px;
  font-weight: 400;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
}

.uic-zb-definition {
  position: absolute;
  left: 355px;
  top: 121.3px;
  width: 167px;
  color: var(--uic-blue);
  font-size: 8.2px;
  line-height: 13.2px;
}

.uic-zb-definition .lead,
.uic-zb-definition .amount {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
}

.uic-zb-definition .amount {
  white-space: nowrap;
}

.uic-zb-definition .sub {
  display: block;
  margin-top: 3px;
  font-size: 8.9px;
  line-height: 11px;
  font-weight: 400;
}

.uic-section-title {
  position: absolute;
  color: var(--uic-gold);
  font-size: 9.3px;
  line-height: 12.4px;
  font-weight:  500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.uic-title-data {
  left: 16px;
  top: 198px;
  width: 300px;
}

.uic-title-space {
  left: 386px;
  top: 198px;
  width: 310px;
}

.uic-title-power {
  left: 16px;
  top: 313px;
  width: 320px;
}

.uic-title-cost {
  left: 386px;
  top: 313px;
  width: 320px;
}

.uic-section-text {
  position: absolute;
  color: var(--uic-blue);
  font-size: 11px;
  line-height: 17.8px;
  font-weight: 400;
}

.uic-section-text .emphasis {
  font-weight: 600;
}

.uic-data-text {
  left: 87px;
  top: 226px;
  width: 244px;
}

.uic-space-text {
  left: 455px;
  top: 226px;
  width: 242px;
}

.uic-power-text {
  left: 84px;
  top: 332px;
  width: 258px;
}

.uic-cost-text {
  left: 455px;
  top: 341px;
  width: 252px;
}

.uic-section-note {
  display: block;
  margin-top: 5px;
  color: var(--uic-blue);
  font-size: 9px;
  line-height: 11.6px;
  font-style: italic;
  font-weight: 400;
}


.uic-power-text .uic-section-note {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
}
.uic-upload-title {
  position: absolute;
  left: 52px;
  top: 428px;
  width: 630px;
  color: var(--uic-gold);
  font-size: 9.7px;
  line-height: 13px;
  font-weight:  500;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.uic-upload-text-left {
  position: absolute;
  left: 84px;
  top: 451px;
  width: 260px;
}

.uic-upload-text-right {
  position: absolute;
  left: 455px;
  top: 451px;
  width: 240px;
}

.uic-upload-caption {
  color: var(--uic-blue);
  font-size: 11.4px;
  line-height: 15.8px;
  font-weight: 600;
}

.uic-upload-result {
  margin-top: 38px;
  color: var(--uic-gold);
  font-size: 16.8px;
  line-height: 18.8px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.uic-upload-result-large {
  margin-top: 24px;
  color: var(--uic-gold);
  font-size: 16.8px;
  line-height: 18.8px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.uic-upload-note {
  display: block;
  margin-top: 5px;
  color: var(--uic-blue);
  font-size: 9.5px;
  line-height: 11.4px;
  font-style: italic;
  font-weight: 400;
}

.uic-footer {
  position: absolute;
  left: 0;
  top: 531px;
  bottom: 0;
  width: 734px;
  height: auto;
  background: var(--uic-footer);
}

.uic-footer-source {
  position: absolute;
  left: 84px;
  top: 551px;
  width: 260px;
  color: var(--uic-blue);
  font-size: 7.4px;
  line-height: 9.3px;
  font-weight: 400;
}

.uic-footer-disclaimer {
  position: absolute;
  left: 395px;
  top: 541px;
  width: 292px;
  color: var(--uic-blue);
  font-size: 7.3px;
  line-height: 9.4px;
  font-weight: 400;
}

@media (max-width: 760px) {
  .uic-information-card-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

  
/* Footer corrections */
.uic-icon-footer {
  top: 542px;
}

.uic-footer-source {
  top: 550.85px;
}

.uic-footer-disclaimer {
  left: 395px;
  width: 323px; /* 734px card width - 395px left start - 16px right margin */
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
}


/* Footer icon horizontally centred under the left upload/cloud icon above.
   Cloud icon: left 16px, width 48px → centre 40px.
   Footer icon: width 27px → left 26.5px. */
.uic-icon-footer {
  left: 26.5px;
}


/* Cloud and time icons vertically centred on the middle vertical upload divider.
   Divider: top 449px + height 68px = centre 483px.
   Icons: 48px high → top 459px. */
.uic-icon-cloud,
.uic-icon-time {
  top: 459px;
}


/* Vertically centre the text block to the right of the cloud icon.
   Cloud icon: top 459px, height 48px → centre 483px.
   Text block visible height: 42.8px → top 461.6px.
   Internal line spacing remains unchanged. */
.uic-upload-text-left {
  top: 461.6px;
}


/* Vertically centre the text block to the right of the time icon.
   Time icon: top 459px, height 48px → centre 483px.
   Internal line spacing remains unchanged. */
.uic-upload-text-right {
  top: 453.6px;
}


/* Vertically centre the middle text blocks to their respective 48px icons,
   without changing the internal line spacing. */
.uic-data-text,
.uic-space-text {
  top: 253px;
  transform: translateY(-50%);
}

.uic-power-text,
.uic-cost-text {
  top: 368px;
  transform: translateY(-50%);
}



/* Mobile adaptation based on the 734px programme-card breakpoint.
   Desktop remains unchanged; below 734px the absolute desktop layout is converted
   into a readable stacked grid instead of horizontal scrolling. */
@media (max-width: 734px) {


  .uic-information-card-scroll {
    width: 100%;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
  }

  .uic-information-card {
    width: 100%;
    max-width: 734px;
    height: auto;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "info title"
      ". subtitle"
      "badge badge"
      "intro intro"
      "storage zb"
      "title-data title-data"
      "harddrive data"
      "title-space title-space"
      "ruler space"
      "title-power title-power"
      "electricity power"
      "title-cost title-cost"
      "euro cost"
      "upload-title upload-title"
      "cloud upload-left"
      "time upload-right"
      "footer-icon footer-source"
      "footer-disclaimer footer-disclaimer";
    column-gap: 12px;
    row-gap: 0;
    padding: 18px 16px 0;
  }

  .uic-card-line,
  .uic-footer {
    display: none !important;
  }

  .uic-information-card > :not(.uic-card-line):not(.uic-footer) {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .uic-icon {
    width: 34px;
    height: 34px;
    align-self: center;
    justify-self: start;
  }

  .uic-icon-small {
    width: 24px;
    height: 24px;
  }

  .uic-icon-info-top { grid-area: info; }
  .uic-title { grid-area: title; }
  .uic-subtitle { grid-area: subtitle; }
  .uic-badge { grid-area: badge; }
  .uic-intro { grid-area: intro; }
  .uic-icon-storage { grid-area: storage; }
  .uic-zb-definition { grid-area: zb; }
  .uic-title-data { grid-area: title-data; }
  .uic-icon-harddrive { grid-area: harddrive; }
  .uic-data-text { grid-area: data; }
  .uic-title-space { grid-area: title-space; }
  .uic-icon-ruler { grid-area: ruler; }
  .uic-space-text { grid-area: space; }
  .uic-title-power { grid-area: title-power; }
  .uic-icon-electricity { grid-area: electricity; }
  .uic-power-text { grid-area: power; }
  .uic-title-cost { grid-area: title-cost; }
  .uic-icon-euro { grid-area: euro; }
  .uic-cost-text { grid-area: cost; }
  .uic-upload-title { grid-area: upload-title; }
  .uic-icon-cloud { grid-area: cloud; }
  .uic-upload-text-left { grid-area: upload-left; }
  .uic-icon-time { grid-area: time; }
  .uic-upload-text-right { grid-area: upload-right; }
  .uic-icon-footer { grid-area: footer-icon; }
  .uic-footer-source { grid-area: footer-source; }
  .uic-footer-disclaimer { grid-area: footer-disclaimer; }

  .uic-title {
    font-size: clamp(18px, 5.1vw, 23px);
    line-height: 1.06;
    letter-spacing: 0.045em;
    align-self: center;
  }

  .uic-subtitle {
    margin-top: 4px;
    color: var(--uic-gold);
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.15;
  }

  .uic-badge {
    width: 100%;
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 7px;
    height: auto;
  }

  .uic-badge-number {
    font-size: 42px;
    line-height: 43px;
  }

  .uic-badge-unit {
    font-size: 17px;
    line-height: 19px;
  }

  .uic-badge-caption {
    width: auto;
    max-width: 260px;
    font-size: 9.4px;
    line-height: 1.35;
  }

  .uic-intro {
    margin-top: 16px;
    font-size: 12.4px;
    line-height: 1.42;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .uic-icon-storage,
  .uic-zb-definition {
    margin-top: 16px;
  }

  .uic-zb-definition {
    font-size: 9.4px;
    line-height: 1.35;
  }

  .uic-zb-definition .sub {
    font-size: 9.2px;
    line-height: 1.25;
  }

  .uic-section-title,
  .uic-upload-title {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--uic-line);
    font-size: 9.8px;
    line-height: 1.25;
    letter-spacing: 0.05em;
  }

  .uic-section-text {
    margin-top: 9px;
    font-size: 11.2px;
    line-height: 1.38;
  }

  .uic-section-note {
    margin-top: 5px;
    font-size: 9px;
    line-height: 1.3;
  }

  .uic-icon-harddrive,
  .uic-icon-ruler,
  .uic-icon-electricity,
  .uic-icon-euro,
  .uic-icon-cloud,
  .uic-icon-time {
    margin-top: 9px;
  }

  .uic-upload-title {
    font-size: 10px;
    line-height: 1.3;
  }

  .uic-upload-text-left,
  .uic-upload-text-right {
    height: auto;
    margin-top: 11px;
  }

  .uic-upload-text-left .uic-upload-caption,
  .uic-upload-text-left .uic-upload-result,
  .uic-upload-text-right .uic-upload-caption,
  .uic-upload-text-right .uic-upload-result-large,
  .uic-upload-text-right .uic-upload-note {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0;
  }

  .uic-upload-caption {
    font-size: 11.2px;
    line-height: 1.35;
  }

  .uic-upload-result,
  .uic-upload-result-large {
    margin-top: 8px !important;
    font-size: 15.4px;
    line-height: 1.12;
  }

  .uic-upload-note {
    margin-top: 5px !important;
    font-size: 9.2px;
    line-height: 1.25;
  }

  .uic-icon-footer {
    margin-top: 18px;
    align-self: center;
  }

  .uic-footer-source {
    margin-top: 18px;
    align-self: center;
    font-size: 8.3px;
    line-height: 1.25;
  }

  .uic-footer-disclaimer {
    margin: 12px -16px 0;
    padding: 12px 16px 14px;
    background: var(--uic-footer);
    border-top: 1px solid rgba(139, 111, 62, 0.55);
    font-size: 8px;
    line-height: 1.35;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

@media (max-width: 380px) {


  .uic-information-card {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    padding: 16px 14px 0;
  }

  .uic-icon {
    width: 30px;
    height: 30px;
  }

  .uic-icon-small {
    width: 22px;
    height: 22px;
  }

  .uic-title {
    font-size: 17px;
  }

  .uic-subtitle {
    font-size: 14px;
  }

  .uic-badge-number {
    font-size: 38px;
    line-height: 39px;
  }

  .uic-badge-unit {
    font-size: 15.5px;
  }

  .uic-intro,
  .uic-section-text {
    font-size: 10.9px;
  }

  .uic-footer-disclaimer {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}



/* Mobile: gold badge in one horizontal line:
   181 Zettabyte | Estimated ... */
@media (max-width: 734px) {
  .uic-badge {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 12px 14px;
    min-height: 0;
  }

  .uic-badge-number,
  .uic-badge-unit,
  .uic-badge-caption {
    display: inline;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .uic-badge-number {
    font-size: 28px;
    line-height: 1;
    margin-right: 5px;
  }

  .uic-badge-unit {
    font-size: 15px;
    line-height: 1;
    margin-right: 8px;
  }

  .uic-badge-unit::after {
    content: " |";
    margin-left: 8px;
  }

  .uic-badge-caption {
    font-size: 9.4px;
    line-height: 1.2;
    text-align: left;
  }
}

@media (max-width: 380px) {
  .uic-badge {
    padding: 11px 12px;
  }

  .uic-badge-number {
    font-size: 25px;
  }

  .uic-badge-unit {
    font-size: 13.5px;
    margin-right: 6px;
  }

  .uic-badge-unit::after {
    margin-left: 6px;
  }

  .uic-badge-caption {
    font-size: 8.8px;
  }
}



/* Mobile: keep the pipe together with "Estimated" so there is no line break
   between the pipe and the following word. */
@media (max-width: 734px) {
  .uic-badge-unit::after {
    content: "";
    margin-left: 0;
  }

  .uic-badge-caption::before {
    content: "\00a0|\00a0";
    white-space: nowrap;
  }
}



/* Mobile: force the gold badge into a single line. */
@media (max-width: 734px) {
  .uic-badge {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 12px;
    gap: 0;
  }

  .uic-badge-number,
  .uic-badge-unit,
  .uic-badge-caption {
    display: inline;
    white-space: nowrap;
    max-width: none;
  }

  .uic-badge-number {
    font-size: 22px;
    line-height: 1;
    margin-right: 4px;
    flex: 0 0 auto;
  }

  .uic-badge-unit {
    font-size: 12.8px;
    line-height: 1;
    margin-right: 0;
    flex: 0 0 auto;
  }

  .uic-badge-caption {
    font-size: 7.1px;
    line-height: 1.1;
    flex: 0 1 auto;
    min-width: 0;
  }

  .uic-badge-caption::before {
    content: "\00a0|\00a0";
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .uic-badge {
    padding: 9px 10px;
  }

  .uic-badge-number {
    font-size: 20px;
    margin-right: 3px;
  }

  .uic-badge-unit {
    font-size: 11.5px;
  }

  .uic-badge-caption {
    font-size: 6.4px;
  }
}



/* Mobile badge hard-fix: keep the complete badge text on one physical line. */
@media (max-width: 734px) {
  .uic-badge {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 8px !important;
  }

  .uic-badge-number,
  .uic-badge-unit,
  .uic-badge-caption {
    display: inline-block !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .uic-badge-number {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1 !important;
    margin-right: 3px !important;
  }

  .uic-badge-unit {
    font-size: clamp(10px, 3.0vw, 12.8px) !important;
    line-height: 1 !important;
    margin-right: 0 !important;
  }

  .uic-badge-unit::after {
    content: "" !important;
    margin-left: 0 !important;
  }

  .uic-badge-caption {
    font-size: clamp(5.7px, 1.72vw, 7.1px) !important;
    line-height: 1 !important;
  }

  .uic-badge-caption::before {
    content: "\00a0|\00a0" !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .uic-badge {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .uic-badge-number {
    font-size: 18px !important;
    margin-right: 2px !important;
  }

  .uic-badge-unit {
    font-size: 10px !important;
  }

  .uic-badge-caption {
    font-size: 5.7px !important;
  }
}



/* Mobile badge refinement:
   - "181" same size as "Zettabyte"
   - more space around the pipe
   - left-aligned inside the badge */
@media (max-width: 734px) {
  .uic-badge {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .uic-badge-number,
  .uic-badge-unit {
    font-size: clamp(10px, 3.0vw, 12.8px) !important;
    line-height: 1 !important;
  }

  .uic-badge-number {
    margin-right: 4px !important;
  }

  .uic-badge-unit {
    margin-right: 0 !important;
  }

  .uic-badge-caption::before {
    content: "\00a0\00a0|\00a0\00a0" !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .uic-badge {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .uic-badge-number,
  .uic-badge-unit {
    font-size: 10px !important;
  }

  .uic-badge-caption::before {
    content: "\00a0\00a0|\00a0\00a0" !important;
  }
}



/* Mobile: move the text below the gold badge lower. */
@media (max-width: 734px) {
  .uic-intro {
    margin-top: 24px !important;
  }
}



/* Mobile: inset separator line between intro text and the first storage field. */
@media (max-width: 734px) {
  .uic-intro::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--uic-line);
    margin: 18px 0 0;
  }
}



/* Mobile: match the visible distance from the storage icon to the separator line below
   to the 16px distance from the separator line above to the storage icon.
   Only the first separator after the storage row is adjusted. */
@media (max-width: 734px) {
  .uic-title-data {
    margin-top: 12px !important;
  }
}



/* Mobile: vertically centre the storage/ZB text against the storage icon. */
@media (max-width: 734px) {
  .uic-zb-definition {
    align-self: center !important;
    margin-top: 16px !important;
  }
}



/* Mobile: apply the same spacing/centering logic to the following sections.
   The separator line below each icon/text row now starts after a 16px visual gap.
   Text blocks are vertically centred against their respective icons. */
@media (max-width: 734px) {
  .uic-title-space,
  .uic-title-power,
  .uic-title-cost,
  .uic-upload-title {
    margin-top: 12px !important;
  }

  .uic-data-text,
  .uic-space-text,
  .uic-power-text,
  .uic-cost-text,
  .uic-upload-text-left,
  .uic-upload-text-right {
    align-self: center !important;
  }

  .uic-icon-harddrive,
  .uic-icon-ruler,
  .uic-icon-electricity,
  .uic-icon-euro,
  .uic-icon-cloud,
  .uic-icon-time {
    align-self: center !important;
  }
}



/* Mobile: real vertical centring of each text block against its icon.
   The previous align-self rule was not sufficient because margin-top values
   were still shifting the grid items. */
@media (max-width: 734px) {
  .uic-icon-storage,
  .uic-icon-harddrive,
  .uic-icon-ruler,
  .uic-icon-electricity,
  .uic-icon-euro,
  .uic-icon-cloud,
  .uic-icon-time,
  .uic-zb-definition,
  .uic-data-text,
  .uic-space-text,
  .uic-power-text,
  .uic-cost-text,
  .uic-upload-text-left,
  .uic-upload-text-right {
    align-self: center !important;
  }

  .uic-zb-definition,
  .uic-data-text,
  .uic-space-text,
  .uic-power-text,
  .uic-cost-text,
  .uic-upload-text-left,
  .uic-upload-text-right {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .uic-icon-storage,
  .uic-icon-harddrive,
  .uic-icon-ruler,
  .uic-icon-electricity,
  .uic-icon-euro,
  .uic-icon-cloud,
  .uic-icon-time {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* spacing from each title line to the following icon/text row */
  .uic-icon-storage,
  .uic-icon-harddrive,
  .uic-icon-ruler,
  .uic-icon-electricity,
  .uic-icon-euro,
  .uic-icon-cloud,
  .uic-icon-time {
    padding-top: 16px !important;
  }

  .uic-zb-definition,
  .uic-data-text,
  .uic-space-text,
  .uic-power-text,
  .uic-cost-text,
  .uic-upload-text-left,
  .uic-upload-text-right {
    padding-top: 16px !important;
  }
}



/* Mobile: divider line between the last two fields (cloud/upload and time/upload),
   with 16px space above and below, and aligned to the card content width
   so 16px remain at the left and right card edges. */
@media (max-width: 734px) {
  .uic-upload-text-left {
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .uic-icon-cloud {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .uic-upload-text-left::after {
    content: "";
    position: absolute;
    left: -54px; /* 42px icon column + 12px column gap */
    bottom: 0;
    width: calc(100% + 54px);
    height: 1px;
    background: var(--uic-line);
  }
}

@media (max-width: 380px) {
  .uic-upload-text-left::after {
    left: -46px; /* 36px icon column + 10px column gap */
    width: calc(100% + 46px);
  }
}



/* Mobile: visible divider as its own grid row between the last two fields.
   This replaces the previous pseudo-line on the text block, which could be hidden
   by the row layout in some browsers. */
@media (max-width: 734px) {
  .uic-information-card {
    grid-template-areas:
      "info title"
      ". subtitle"
      "badge badge"
      "intro intro"
      "storage zb"
      "title-data title-data"
      "harddrive data"
      "title-space title-space"
      "ruler space"
      "title-power title-power"
      "electricity power"
      "title-cost title-cost"
      "euro cost"
      "upload-title upload-title"
      "cloud upload-left"
      "upload-divider upload-divider"
      "time upload-right"
      "footer-icon footer-source"
      "footer-disclaimer footer-disclaimer" !important;
  }

  .uic-upload-text-left::after {
    content: none !important;
  }

  .uic-upload-text-left,
  .uic-icon-cloud {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .uic-icon-time,
  .uic-upload-text-right {
    padding-top: 0 !important;
  }

  .uic-information-card::after {
    content: "";
    grid-area: upload-divider;
    display: block;
    height: 1px;
    background: var(--uic-line);
    margin: 16px 0;
  }
}



/* Mobile: left-align the upload-section headline. */
@media (max-width: 734px) {
  .uic-upload-title {
    text-align: left !important;
    justify-self: stretch !important;
  }
}



/* Mobile-only structural footer.
   This avoids pseudo-background and overlap problems. */
.uic-mobile-footer {
  display: none;
}

@media (max-width: 734px) {
  .uic-information-card {
    grid-template-areas:
      "info title"
      ". subtitle"
      "badge badge"
      "intro intro"
      "storage zb"
      "title-data title-data"
      "harddrive data"
      "title-space title-space"
      "ruler space"
      "title-power title-power"
      "electricity power"
      "title-cost title-cost"
      "euro cost"
      "upload-title upload-title"
      "cloud upload-left"
      "upload-divider upload-divider"
      "time upload-right"
      "mobile-footer mobile-footer" !important;
  }

  /* Hide the original desktop footer pieces in mobile. */
  .uic-footer,
  .uic-icon-footer,
  .uic-footer-source,
  .uic-footer-disclaimer {
    display: none !important;
  }

  .uic-mobile-footer {
    grid-area: mobile-footer;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px;
    margin: 16px -16px 0;
    padding: 14px 16px 14px;
    background: #EFE9D7;
    border-top: 1px solid var(--uic-line);
  }

  .uic-mobile-footer-icon {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
    justify-self: start;
    align-self: start;
    margin: 0;
  }

  .uic-mobile-footer-text {
    min-width: 0;
    align-self: start;
  }

  .uic-mobile-footer-source {
    margin: 0;
    color: var(--uic-blue);
    font-family: var(--font-serif);
    font-size: 8.3px;
    line-height: 1.25;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
  }

  .uic-mobile-footer-divider {
    display: block;
    width: 190px;
    max-width: 100%;
    height: 1px;
    background: rgba(139, 111, 62, 0.55);
    margin: 5px 0 6px;
  }

  .uic-mobile-footer-disclaimer {
    margin: 0;
    color: var(--uic-blue);
    font-family: var(--font-serif);
    font-size: 8px;
    line-height: 1.35;
    font-weight: 400;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .uic-mobile-footer-icon {
    width: 30px;
    height: 30px;
  }

  .uic-mobile-footer-source {
    font-size: 6.6px;
  }

  .uic-mobile-footer-divider {
    width: 170px;
  }

  .uic-mobile-footer-disclaimer {
    font-size: 7.6px;
  }
}



/* Mobile footer: extend background colour and top line fully to the right edge. */
@media (max-width: 734px) {
  .uic-mobile-footer {
    justify-self: stretch !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 16px 0 0 0 !important;
    transform: translateX(-16px) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer {
    width: calc(100% + 28px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-14px) !important;
  }
}



/* Mobile footer width correction:
   Remove the transform-based shift. The footer is now full-bleed by using the
   card's mobile padding values as negative margins on both sides. */
@media (max-width: 734px) {
  .uic-mobile-footer {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-bottom: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer {
    width: auto !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    transform: none !important;
  }
}



/* Mobile footer: horizontally centre the footer icon on the same axis
   as the icon column above. */
@media (max-width: 734px) {
  .uic-mobile-footer-icon {
    justify-self: start !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer-icon {
    justify-self: start !important;
    margin-left: 0 !important;
  }
}



/* Mobile footer: make the footer info icon the same size as the icon above. */
@media (max-width: 734px) {
  .uic-mobile-footer-icon {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer-icon {
    width: 30px !important;
    height: 30px !important;
  }
}



/* Mobile footer icon: visual size correction.
   The information SVG has more internal whitespace than the other icons,
   so equal CSS width/height still looks smaller. It is scaled up slightly,
   while its centre remains aligned with the icon column above. */
@media (max-width: 734px) {
  .uic-mobile-footer-icon {
    width: 38px !important;
    height: 38px !important;
    margin-left: -2px !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer-icon {
    width: 34px !important;
    height: 34px !important;
    margin-left: -2px !important;
  }
}



/* Final mobile footer icon correction:
   No visual scaling and no margin correction.
   The footer icon uses exactly the same CSS box size as the mobile icons above. */
@media (max-width: 734px) {
  .uic-mobile-footer-icon {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: start !important;
    object-fit: contain !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer-icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* Mobile footer icon: exact alignment with the icon above.
   No cropped SVG, no scaling trick, no negative margin.
   Left edge = 16px from the card edge; size = same as the mobile icons above. */
@media (max-width: 734px) {
  .uic-mobile-footer {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .uic-mobile-footer-icon {
    width: 34px !important;
    height: 34px !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .uic-mobile-footer-icon {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* Mobile footer icon: match the actual computed size of the middle-section icons.
   Middle-section icons are 42×42px on mobile and 36×36px below 380px. */
@media (max-width: 734px) {
  .uic-mobile-footer-icon {
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: start !important;
    align-self: start !important;
    object-fit: contain !important;
  }
}

@media (max-width: 380px) {
  .uic-mobile-footer-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}



/* Mobile badge: enlarge only the text after "Zettabyte" without forcing a second line. */
@media (max-width: 734px) {
  .uic-badge-caption {
    font-size: clamp(6.2px, 1.9vw, 7.8px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .uic-badge-caption {
    font-size: 6.2px !important;
    white-space: nowrap !important;
  }
}



/* Mobile badge: make the caption after "Zettabyte" a bit larger, still single-line. */
@media (max-width: 734px) {
  .uic-badge-caption {
    font-size: clamp(6.5px, 2vw, 8.2px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .uic-badge-caption {
    font-size: 6.5px !important;
    white-space: nowrap !important;
  }
}



/* Mobile badge: make the caption after "Zettabyte" larger again, while keeping it on one line. */
@media (max-width: 734px) {
  .uic-badge-caption {
    font-size: clamp(6.8px, 2.1vw, 8.6px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .uic-badge-caption {
    font-size: 6.8px !important;
    white-space: nowrap !important;
  }
}



/* Mobile title: deliberate two-line headline instead of forced one-line shrinkage. */
.uic-title-line-1,
.uic-title-line-2 {
  display: inline;
}

@media (max-width: 734px) {
  .uic-title {
    line-height: 1.03 !important;
  }

  .uic-title-line-1,
  .uic-title-line-2 {
    display: block !important;
  }
}

@media (min-width: 735px) {
  .uic-title-line-1::after {
    content: " ";
  }
}



/* Mobile: increase the gap between the title and the subtitle. */
@media (max-width: 734px) {
  .uic-subtitle {
    margin-top: 10px !important;
  }
}



/* Mobile: increase the space above the title slightly. */
@media (max-width: 734px) {
  .uic-title {
    margin-top: 6px !important;
  }
}


/* Integration override: render the desktop card at its native 734px — NO transform:scale.
   Scaling sub-pixels the 1px divider lines. Center it; a few px bleed into empty side gutters. */
@media (min-width:735px){
  .aic-fit{ container-type:normal !important; aspect-ratio:auto !important; overflow:visible !important; display:flex !important; justify-content:center !important; }
  .aic-fit > .uic-information-card{ position:relative !important; top:auto !important; left:auto !important; transform:none !important; }
}