/* GXPERIA shared design tokens — extracted from existing calculator suite */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink: #1b2440;
  --paper: #f2f4fa;
  --paper-raised: #ffffff;
  --line: #dfe3ef;
  --blue: #28418c;
  --blue-deep: #1c2f66;
  --periwinkle: #8b96d6;
  --teal: #2caf93;
  --teal-dim: #2caf9320;
  --amber: #b4772a;
  --red: #a8402c;
  --muted: #6b7280;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--blue-deep);}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
}

.mono{font-family:'IBM Plex Mono', monospace;}

.serif-h{
  font-family:'Fraunces', serif;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* Masthead reused across every page in the suite */
.gx-masthead{
  padding:22px 36px;
  border-bottom:1px solid var(--line);
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--paper-raised);
}
.gx-masthead::after{
  content:"";
  position:absolute;
  left:36px; right:36px; bottom:-1px;
  height:3px;
  background:repeating-linear-gradient(90deg, var(--teal) 0 6px, transparent 6px 12px);
}
.gx-logo{width:44px; height:44px; object-fit:contain; flex-shrink:0;}
.gx-brand-row{display:flex; align-items:baseline; gap:10px;}
.gx-brand-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:19px;
  color:var(--blue-deep);
}
.gx-brand-tagline{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
}
.gx-masthead-spacer{flex:1;}
.gx-masthead-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--blue);
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:3px;
  background:var(--paper-raised);
  cursor:pointer;
}
.gx-masthead-link:hover{border-color:var(--blue); color:var(--blue-deep);}

.gx-signature-block{
  padding:18px 36px 28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  max-width:1080px;
  margin:0 auto;
}
.gx-sig-name{font-family:'Fraunces', serif; font-size:14.5px; color:var(--blue-deep); font-weight:600;}
.gx-sig-title{font-size:11.5px; color:var(--muted);}
.gx-sig-site{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--teal);}

/* Badge used for locked/unlocked state */
.gx-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:3px;
  border:1px solid var(--line);
}
.gx-badge.locked{color:var(--amber); border-color:#b4772a55; background:#b4772a12;}
.gx-badge.unlocked{color:var(--teal); border-color:#2caf9355; background:var(--teal-dim);}