/*
============================================================
OPENMIX — PGP ISOLATED PAGE CSS

The canonical:
- frame
- machine
- header
- language switcher
- navigation

come from site.css.

This file is allowed to affect ONLY .pgp-page.
============================================================
*/

/* ===== INLINE STYLE #1 ===== */
.pgp-page{
--bg:#0d0f0e;
  --panel:#171a18;
  --panel2:#111311;
  --line:#454a45;
  --text:#eeefe9;
  --muted:#979d95;
  --amber:#f0a72d;
  --cond:'Barlow Condensed',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Inter',sans-serif
}

.pgp-page,
.pgp-page *{
box-sizing:border-box
}

.pgp-page{
margin:0;min-height:100%;background:var(--bg);color:var(--text)
}

.pgp-page{
font-family:var(--sans);padding:24px
}

.pgp-page a{
color:inherit
}

.pgp-page .pgp-frame{
min-height:calc(100vh - 48px)
}

.pgp-page .pgp-old-header-disabled .topbar{
min-height:78px;
  padding:0 30px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.pgp-page .pgp-old-header-disabled .brand{
font:800 27px/1 var(--cond);
  text-transform:uppercase
}

.pgp-page .back{
min-height:38px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:#131613;
  text-decoration:none;
  font:600 10px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}

.pgp-page .pgp-hero{
padding:50px 42px 38px;
  border-bottom:1px solid var(--line)
}

.pgp-page .kicker{
color:var(--amber);
  font:600 9px/1 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase
}

.pgp-page h1{
margin:16px 0 20px;
  font:800 clamp(58px,9vw,104px)/.86 var(--cond);
  letter-spacing:-.035em;
  text-transform:uppercase
}

.pgp-page .lead{
max-width:720px;
  margin:0;
  color:#c5c9c2;
  font:500 15px/1.65 var(--sans)
}

.pgp-page .grid{
display:grid;
  grid-template-columns:1fr 1fr
}

.pgp-page .card{
min-width:0;
  padding:30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.pgp-page .card:nth-child(2n){
border-right:0
}

.pgp-page .card h2{
margin:0 0 18px;
  font:800 29px/1 var(--cond);
  text-transform:uppercase
}

.pgp-page .label{
margin-bottom:9px;
  color:var(--muted);
  font:600 8px/1 var(--mono);
  letter-spacing:.11em;
  text-transform:uppercase
}

.pgp-page .fingerprint{
padding:15px;
  border:1px solid #575d57;
  background:var(--panel2);
  color:#e9e1d2;
  overflow-wrap:anywhere;
  font:600 12px/1.55 var(--mono)
}

.pgp-page .actions{
display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px
}

.pgp-page .button{
min-height:39px;
  padding:0 13px;
  border:1px solid var(--line);
  background:#131613;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font:600 9px/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase
}

.pgp-page .button.primary{
border-color:#695129;
  color:#e8d8b8;
  background:rgba(240,167,45,.055)
}

.pgp-page .command{
margin-top:13px;
  padding:15px;
  border:1px solid #393e39;
  background:#101210;
  color:#adb2ab;
  overflow:auto;
  white-space:pre;
  font:500 10px/1.55 var(--mono)
}

.pgp-page p.copy{
color:#b6bbb4;
  font-size:14px;
  line-height:1.65
}

.pgp-page footer{
padding:20px 30px;
  color:var(--muted);
  font:500 9px/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}

@media(max-width:760px){
.pgp-page{
padding:10px
}

.pgp-page .pgp-frame{
min-height:calc(100vh - 20px)
}

.pgp-page .pgp-hero{
padding:38px 22px 30px
}

.pgp-page .pgp-old-header-disabled .topbar{
padding:0 20px
}

.pgp-page .grid{
grid-template-columns:1fr
}

.pgp-page .card{
border-right:0
}
}

/* ==========================================================
   CANONICAL PGP PAGE ALIGNMENT
   ========================================================== */

.pgp-page {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;

  background: var(--panel);
  color: var(--text);
}


/*
Neutralize legacy page containers.
The homepage .frame / .machine are now responsible
for the actual outer geometry.
*/

.pgp-page > .pgp-root,
.pgp-page > .pgp-shell,
.pgp-page > .shell,
.pgp-page > .page,
.pgp-page > .wrapper,
.pgp-page > .container,
.pgp-page > .content-shell,
.pgp-page > .page-shell,
.pgp-page > .app-shell,
.pgp-page > main {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
}


/*
Typography follows homepage language.
Only PGP content is affected.
*/

.pgp-page h1 {
  max-width: 1100px;

  margin:
    0
    0
    28px;

  color: var(--text);

  font:
    800
    clamp(68px, 6.7vw, 104px) / .84
    var(--cond);

  letter-spacing: -.04em;
  text-transform: uppercase;
}

.pgp-page h2 {
  margin:
    0
    0
    18px;

  color: var(--text);

  font:
    800
    clamp(36px, 4vw, 58px) / .9
    var(--cond);

  letter-spacing: -.025em;
  text-transform: uppercase;
}

.pgp-page h3 {
  margin:
    0
    0
    12px;

  color: var(--text);

  font:
    700
    22px / 1
    var(--cond);

  letter-spacing: -.01em;
  text-transform: uppercase;
}

.pgp-page p {
  color: #c5c9c2;
}

.pgp-page a {
  color: inherit;
}


/*
PGP/key material must always remain readable
and never blow out the viewport.
*/

.pgp-page pre {
  max-width: 100%;
  overflow-x: auto;

  scrollbar-width: thin;

  color: #d9ddd6;
  background: #101310;

  font-family: var(--mono);
}

.pgp-page code,
.pgp-page textarea,
.pgp-page input {
  font-family: var(--mono);
}

.pgp-page pre,
.pgp-page code {
  direction: ltr;
  text-align: left;
}

.pgp-page textarea,
.pgp-page input {
  max-width: 100%;
}


/*
Generic content safety.
*/

.pgp-page img,
.pgp-page svg {
  max-width: 100%;
}

.pgp-page table {
  max-width: 100%;
}

.pgp-page * {
  min-width: 0;
}


/*
Homepage-style first content spacing.
Works regardless of the legacy PGP wrapper name.
*/

.pgp-page > :first-child {
  max-width: 100%;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 780px) {

  .pgp-page h1 {
    font-size:
      clamp(
        48px,
        14vw,
        72px
      );

    line-height: .86;
  }

  .pgp-page h2 {
    font-size:
      clamp(
        34px,
        10vw,
        48px
      );
  }

  .pgp-page pre {
    font-size: 11px;
  }

}


@media (max-width: 390px) {

  .pgp-page h1 {
    font-size: 13vw;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .pgp-page *,
  .pgp-page *::before,
  .pgp-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

}

/* ==========================================================
   PGP HERO — FINAL ISOLATED GEOMETRY

   Do not use the global .hero class here.
   Homepage .hero is a separate component.
   ========================================================== */

.pgp-page .pgp-hero {
  display: block;
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 42px 52px 34px;

  border: 0;
  border-bottom: 1px solid var(--line);

  background: transparent;

  overflow: visible;
}

.pgp-page .pgp-hero .kicker {
  display: block;

  width: auto;
  max-width: 100%;

  margin: 0 0 15px;
  padding: 0;

  color: var(--amber);

  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pgp-page .pgp-hero h1 {
  display: block;

  width: auto;
  max-width: 100%;

  margin: 0 0 27px;
  padding: 0;

  color: var(--text);

  font:
    800
    clamp(68px, 6.7vw, 104px) / .84
    var(--cond);

  letter-spacing: -.04em;
  text-transform: uppercase;

  white-space: normal;
}

.pgp-page .pgp-hero .lead {
  display: block;

  width: 100%;
  max-width: 680px;

  margin: 0;
  padding: 0;

  color: #c5c9c2;

  font: 500 15px/1.6 var(--sans);

  text-align: left;
}


/* Tablet */

@media (max-width: 1050px) {

  .pgp-page .pgp-hero {
    padding:
      38px
      36px
      31px;
  }

}


/* Mobile */

@media (max-width: 780px) {

  .pgp-page .pgp-hero {
    display: block;

    padding:
      34px
      22px
      29px;

    text-align: center;
  }

  .pgp-page .pgp-hero .kicker {
    margin-bottom: 13px;
    text-align: center;
  }

  .pgp-page .pgp-hero h1 {
    width: 100%;

    margin:
      0
      auto
      23px;

    font-size:
      clamp(
        48px,
        14vw,
        72px
      );

    line-height: .86;

    text-align: center;
  }

  .pgp-page .pgp-hero .lead {
    max-width: 560px;

    margin-left: auto;
    margin-right: auto;

    font-size: 14px;
    line-height: 1.55;

    text-align: center;
  }

}


@media (max-width: 560px) {

  .pgp-page .pgp-hero {
    padding-left: 18px;
    padding-right: 18px;
  }

}


@media (max-width: 390px) {

  .pgp-page .pgp-hero {
    padding:
      30px
      15px
      26px;
  }

  .pgp-page .pgp-hero h1 {
    font-size: 13vw;
  }

}


/* ==========================================================
   OPENMIX — PGP AUTHENTICITY HERO
   FINAL UNIQUE COMPONENT

   This component intentionally shares ZERO layout classes
   with homepage hero or legacy PGP hero.
   ========================================================== */

.pgp-page .pgp-auth-hero {
  display: block;
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 0;

  margin: 0;
  padding: 0;

  border: 0;
  border-bottom: 1px solid var(--line);

  background: transparent;

  overflow: hidden;

  box-sizing: border-box;
}


.pgp-page .pgp-auth-hero-inner {
  display: block;
  position: relative;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 42px 52px 38px;

  box-sizing: border-box;
}


.pgp-page .pgp-auth-kicker {
  display: block;
  position: static;

  width: auto;
  max-width: 100%;

  margin: 0 0 16px;
  padding: 0;

  color: var(--amber);

  font: 600 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;

  text-align: left;

  transform: none;
}


.pgp-page .pgp-auth-title {
  display: block;
  position: static;

  width: auto;
  max-width: 100%;

  margin: 0 0 27px;
  padding: 0;

  color: var(--text);

  font:
    800
    clamp(72px, 7vw, 108px) / .82
    var(--cond);

  letter-spacing: -.045em;
  text-transform: uppercase;

  white-space: normal;

  text-align: left;

  transform: none;
}


.pgp-page .pgp-auth-lead {
  display: block;
  position: static;

  width: 100%;
  max-width: 720px;

  margin: 0;
  padding: 0;

  color: #c5c9c2;

  font:
    500
    15px / 1.6
    var(--sans);

  text-align: left;

  transform: none;
}


/* =========================
   TABLET
   ========================= */

@media (max-width: 1050px) {

  .pgp-page .pgp-auth-hero-inner {
    padding:
      38px
      36px
      34px;
  }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 780px) {

  .pgp-page .pgp-auth-hero-inner {
    padding:
      34px
      22px
      30px;
  }

  .pgp-page .pgp-auth-kicker {
    margin-bottom: 14px;
    text-align: center;
  }

  .pgp-page .pgp-auth-title {
    width: 100%;

    margin:
      0
      0
      24px;

    font-size:
      clamp(
        52px,
        14vw,
        76px
      );

    line-height: .84;

    text-align: center;
  }

  .pgp-page .pgp-auth-lead {
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;

    font-size: 14px;
    line-height: 1.55;

    text-align: center;
  }

}


@media (max-width: 560px) {

  .pgp-page .pgp-auth-hero-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

}


@media (max-width: 390px) {

  .pgp-page .pgp-auth-hero-inner {
    padding:
      30px
      15px
      27px;
  }

  .pgp-page .pgp-auth-title {
    font-size: 13vw;
  }

}

/* OPENMIX_MINIMAL_PUBLIC_KEY_STYLE_BEGIN */

.pgp-public-key-text{
  display:block;

  width:100%;
  height:130px;

  box-sizing:border-box;

  margin-top:16px;

  padding:12px 13px;

  resize:none;

  overflow-x:auto;
  overflow-y:auto;

  border:1px solid var(--line);

  outline:none;

  background:#0b0d0b;

  color:#aeb5ad;

  font:
    500 9px/1.5
    var(--mono);

  white-space:pre;

  scrollbar-width:thin;
}

.pgp-public-key-text:focus{
  border-color:#596159;
}

@media(max-width:760px){

  .pgp-public-key-text{
    height:116px;

    margin-top:14px;

    padding:10px 11px;

    font-size:8px;
  }

}

/* OPENMIX_MINIMAL_PUBLIC_KEY_STYLE_END */


/* OPENMIX_PGP_HERO_SPLIT_BEGIN */


/*
 * Desktop:
 *
 * PGP                          explanatory text
 *
 * Existing hero remains intact; only its internal
 * title/lead geometry changes.
 */

@media (min-width:761px){

  .pgp-auth-hero-inner{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    align-items:center !important;

    column-gap:
      clamp(
        36px,
        5vw,
        86px
      );
  }

  .pgp-auth-title{
    grid-column:1;

    align-self:center;

    margin:
      0 !important;
  }

  .pgp-auth-lead{
    grid-column:2;

    align-self:center;

    justify-self:stretch;

    width:100%;
    max-width:680px;

    margin:
      0 !important;

    box-sizing:border-box;
  }

}


/*
 * Mobile remains stacked.
 */

@media (max-width:760px){

  .pgp-auth-hero-inner{
    display:block !important;
  }

  .pgp-auth-lead{
    width:auto;

    max-width:none;

    margin-top:
      14px !important;
  }

}


/* OPENMIX_PGP_HERO_SPLIT_END */