/* Balanced centered copy for phones and tablet compositions only. */
@media (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body[data-page="home"] .reference-offer h2 {
    max-width:100%;
    font-size:clamp(22px,5.5vw,28px);
    line-height:1.26;
    letter-spacing:-.025em;
    text-align:center;
  }
  body[data-page="home"] .reference-title strong { font-size:calc(clamp(2.2rem,11.5vw,3.2rem) * 1.95); }
  body[data-page="home"] .home-offer-line,
  body[data-page="home"] .home-description-line { display:block; }
  body[data-page="home"] .reference-offer p {
    max-width:min(100%,220px);
    margin-top:18px;
    text-wrap:balance;
    line-height:1.6;
    text-align:center;
  }
}
@media (min-width:601px) and (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body[data-page="home"] .reference-offer p { max-width:min(100%,280px);font-size:15px; }
}

/* Match the visible line widths with natural type, without scaling glyphs. */
@media (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body[data-page="home"] .home-offer-line,
  body[data-page="home"] .home-description-line { width:max-content;max-width:100%;margin-inline:auto;white-space:nowrap; }
  body[data-page="home"] .reference-cross,
  body[data-page="home"] .reference-star { display:none; }
}

/* Quiet light brackets frame the tablet/phone copy without adding another label. */
@media (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body[data-page="home"] .reference-portal .reference-offer {
    position:relative;
    inset:auto;
    top:0!important;
  }
  body[data-page="home"] .reference-offer::before,
  body[data-page="home"] .reference-offer::after {
    content:"";
    position:absolute;
    top:50%;
    width:clamp(12px,2.5vw,28px);
    height:clamp(48px,8vw,72px);
    transform:translateY(-50%);
    border-top:1px solid rgb(204 182 255 / 32%);
    border-bottom:1px solid rgb(204 182 255 / 32%);
    pointer-events:none;
    opacity:.8;
  }
  body[data-page="home"] .reference-offer::before {
    left:0;
    border-left:1px solid rgb(204 182 255 / 32%);
    background:linear-gradient(90deg,rgb(164 122 240 / 5%),transparent);
  }
  body[data-page="home"] .reference-offer::after {
    right:0;
    border-right:1px solid rgb(204 182 255 / 32%);
    background:linear-gradient(-90deg,rgb(164 122 240 / 5%),transparent);
  }
}

/* Final type metrics are declared before the first visible frame.
   These values preserve the former fitted Kanit/Arial composition. */
@media (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
 body[data-page="home"] .reference-title strong {font-size:calc(clamp(2.2rem,11.5vw,3.2rem) * 1.9814);letter-spacing:.03503em}
 body[data-page="home"] .reference-title>span {font-size:clamp(2.2rem,11.5vw,3.2rem);letter-spacing:-.045em}
 body[data-page="home"] .home-offer-line:first-child {font-size:1.05em;letter-spacing:-.016013em}
}

/* Keep the two desktop crosses beside the tablet wordmark. */
@media (min-width:601px) and (max-width:820px), (min-width:821px) and (max-width:1180px) and (orientation:portrait), (min-width:821px) and (max-width:1366px) and (hover:none) and (pointer:coarse) {
  body[data-page="home"] :is(.reference-cross--top-left, .reference-cross--top-right) {
    display: grid;
    place-items: center;
    top: calc(6.75rem + env(safe-area-inset-top, 0px));
    width: 1rem;
    height: 1.6rem;
    font-size: 1.5rem;
  }
  body[data-page="home"] .reference-cross--top-left { left: calc(31% - 4.5rem); }
  body[data-page="home"] .reference-cross--top-right { right: calc(31% - 4.5rem); }
  body[data-page="home"] .reference-cross--top-left::after { content: none; }
}