/* Mobile-only About page refinement. Desktop layout remains untouched. */
.about-mobile-feedback{display:none}

@media (max-width:760px){
  .portal-content[data-extra-page="about"]{
    display:grid;
    gap:12px;
    padding-bottom:18px;
  }

  .portal-content[data-extra-page="about"] .about-hero{
    margin:0;
    padding:18px;
    border-radius:13px;
    box-shadow:0 10px 26px rgba(8,34,25,.08);
  }

  .portal-content[data-extra-page="about"] .about-hero .extra-kicker{
    font-size:9px;
    letter-spacing:.15em;
  }

  .portal-content[data-extra-page="about"] .about-hero h2{
    margin:7px 0 9px;
    font-size:22px;
    line-height:1.18;
  }

  .portal-content[data-extra-page="about"] .about-hero p{
    font-size:12px;
    line-height:1.5;
    color:#d3e4dc;
  }

  .portal-content[data-extra-page="about"] .about-layout{
    display:block;
  }

  /* Mobile keeps only two cards: purpose + feedback/contact. */
  .portal-content[data-extra-page="about"] .about-purpose-card{
    display:none;
  }

  .portal-content[data-extra-page="about"] .contact-card{
    padding:18px;
    border-radius:13px;
  }

  .portal-content[data-extra-page="about"] .about-contact-desktop{
    display:none;
  }

  .portal-content[data-extra-page="about"] .about-mobile-feedback{
    display:block;
  }

  .portal-content[data-extra-page="about"] .about-mobile-feedback .section-kicker{
    font-size:9px;
    letter-spacing:.15em;
    color:#b9e968;
  }

  .portal-content[data-extra-page="about"] .about-mobile-feedback h2{
    margin:7px 0 7px;
    color:#fff;
    font-size:21px;
    line-height:1.2;
    font-weight:600;
  }

  .portal-content[data-extra-page="about"] .about-mobile-feedback p{
    margin:0;
    color:#bdd1c8;
    font-size:11px;
    line-height:1.5;
  }

  .portal-content[data-extra-page="about"] .contact-list{
    margin-top:15px;
  }

  .portal-content[data-extra-page="about"] .contact-list>a{
    min-height:58px;
    padding:11px 36px 11px 42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    border-bottom:1px solid #315247;
  }

  .portal-content[data-extra-page="about"] .contact-list>a::before{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    border:1px solid rgba(185,233,104,.28);
    border-radius:8px;
    display:grid;
    place-items:center;
    color:#b9e968;
    font-size:10px;
    font-weight:900;
  }

  .portal-content[data-extra-page="about"] .contact-whatsapp::before{content:'W'}
  .portal-content[data-extra-page="about"] .contact-signal::before{content:'S'}
  .portal-content[data-extra-page="about"] .contact-mail::before{content:'@'}

  .portal-content[data-extra-page="about"] .contact-list>a>span{
    margin:0 0 3px;
    font-size:8px;
    letter-spacing:.08em;
  }

  .portal-content[data-extra-page="about"] .contact-list>a>b{
    font-size:12px;
    line-height:1.25;
    word-break:break-word;
  }

  .portal-content[data-extra-page="about"] .contact-list>a>strong{
    right:2px;
    font-size:15px;
  }

  .portal-content[data-extra-page="about"] .contact-list>a:hover{
    padding-left:42px;
  }
}

@media (max-width:360px){
  .portal-content[data-extra-page="about"] .about-hero,
  .portal-content[data-extra-page="about"] .contact-card{padding:15px}
  .portal-content[data-extra-page="about"] .about-hero h2{font-size:20px}
  .portal-content[data-extra-page="about"] .about-mobile-feedback h2{font-size:19px}
}