/* ============================================================================
   pjcpro.com — page styles. Tokens come from brand.css. The only token
   redefined here is --body-quiet; the reason is documented directly below.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CONTRAST OVERRIDE — measured, not guessed.

   brand.css ships --body-quiet at rgba(bone,.42), which composites to 3.78:1 on
   ink, 3.82:1 on surface and 3.77:1 on raised. Every use of it on this page is
   small text, which needs 4.5:1, so all three fail AA. The threshold alpha is
   .48; .52 is used here for headroom (5.2:1 on ink) while still reading clearly
   quieter than --body at .62.

   This is an upstream bug in the shared token, not a page-specific choice.
   Fixing it in PJC Brand/brand.css would correct it everywhere.
   ---------------------------------------------------------------------------- */
:root{ --body-quiet: rgba(247,243,237,.52); }

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--face-text);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* ---- shell ---------------------------------------------------------------- */
.wrap{width:min(1180px,100% - 48px);margin-inline:auto;}
@media (max-width:640px){.wrap{width:min(1180px,100% - 32px);}}

.rule{height:1px;background:var(--hairline);border:0;margin:0;}

/* ---- type ----------------------------------------------------------------- */
.display{
  font-family:var(--face-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  color:var(--heading);
  margin:0;
}
.d-hero{font-size:clamp(44px,7.4vw,84px);}
.d-sec {font-size:clamp(32px,4.6vw,var(--t-display-m));}
.stop{color:var(--accent);}

.eyebrow{
  font-family:var(--face-text);
  font-size:var(--t-nano);
  font-weight:600;
  letter-spacing:var(--tr-micro);
  text-transform:uppercase;
  color:var(--accent-quiet);
  margin:0;
}
.lead{
  font-size:clamp(17px,1.75vw,24px);
  line-height:var(--lh-lead);
  color:rgba(247,243,237,.78);
  font-weight:300;
  margin:0;
}
.body-l{font-size:var(--t-body-l);line-height:1.55;}
.quiet{color:var(--body-quiet);}
.small{font-size:var(--t-small);}

/* ---- section rhythm ------------------------------------------------------- */
section{padding-block:clamp(64px,9vw,var(--s-10));}
.sec-head{display:grid;gap:var(--s-4);max-width:760px;margin-bottom:clamp(40px,5vw,var(--s-8));}

/* ---- the standing disclosure --------------------------------------------- */
.disclose{
  border-left:2px solid var(--accent);
  padding:var(--s-4) 0 var(--s-4) var(--s-5);
  display:grid;gap:var(--s-2);
  max-width:620px;
}
.disclose p{margin:0;font-size:var(--t-small);line-height:1.55;color:rgba(247,243,237,.72);}
.disclose strong{color:var(--pjc-bone);font-weight:600;}

/* ---- hero ----------------------------------------------------------------- */
.hero{position:relative;padding-block:var(--s-2) clamp(56px,7vw,var(--s-9));overflow:hidden;}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,var(--s-8));align-items:end;
}
.hero-copy{display:grid;gap:var(--s-5);max-width:620px;padding-bottom:var(--s-2);}

/* the one warm light, built not photographed */
.pool{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 52% at 74% 40%, rgba(217,124,78,.24), transparent 68%),
    radial-gradient(42% 38% at 82% 26%, rgba(225,165,142,.13), transparent 72%);
}
.hero .wrap{position:relative;z-index:1;}

.portrait{position:relative;justify-self:center;align-self:end;width:100%;max-width:520px;}
.portrait img{width:100%;height:auto;filter:contrast(1.03) saturate(.98);}
.portrait::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(to top,var(--ground),transparent);pointer-events:none;
}

/* ---- lockup --------------------------------------------------------------- */
.masthead{padding-block:var(--s-5);position:relative;z-index:2;}
.lockup{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;}
.lockup .name{
  font-family:var(--face-display);text-transform:uppercase;font-size:var(--t-display-s);
  line-height:1;letter-spacing:var(--tr-display);color:var(--heading);
}
.lockup .desc{
  font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--accent);
}

/* ---- form ----------------------------------------------------------------- */
.signup{display:grid;gap:var(--s-3);max-width:520px;}
.fields{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-3);}
@media (max-width:560px){.fields{grid-template-columns:1fr;}}

.field{position:relative;display:grid;}
.field label{
  font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-nano);text-transform:uppercase;
  color:var(--body-quiet);margin-bottom:var(--s-2);
}
input[type=text],input[type=email]{
  font-family:var(--face-text);font-size:var(--t-body);color:var(--pjc-bone);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:14px var(--s-4);width:100%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
input::placeholder{color:rgba(247,243,237,.42);}
input:focus-visible{outline:none;border-color:var(--accent);background:var(--raised);}
input[aria-invalid=true]{border-color:var(--critical);}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.btn{
  font-family:var(--face-text);font-size:var(--t-small);font-weight:600;
  letter-spacing:var(--tr-nano);text-transform:uppercase;
  background:var(--accent);color:#1A0C05;border:1px solid var(--accent);
  border-radius:var(--radius);padding:16px var(--s-6);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  justify-self:start;
}
.btn:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--clay-300);outline-offset:3px;}
.btn:disabled{opacity:.55;cursor:not-allowed;}
@media (max-width:560px){.btn{justify-self:stretch;text-align:center;}}

.form-note{font-size:var(--t-micro);color:var(--body-quiet);margin:0;}
.form-msg{font-size:var(--t-small);margin:0;display:none;padding:var(--s-3) var(--s-4);border:1px solid;}
.form-msg[data-state=error]{display:block;color:#F0A3A3;border-color:rgba(221,82,82,.45);background:rgba(221,82,82,.08);}
.form-msg[data-state=ok]{display:block;color:#A8C9AF;border-color:rgba(110,155,120,.45);background:rgba(110,155,120,.08);}

/* ---- numbered list -------------------------------------------------------- */
.covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
.cover{background:var(--ground);padding:clamp(26px,3vw,var(--s-6)) clamp(22px,2.2vw,var(--s-5));display:grid;gap:var(--s-4);align-content:start;}
.cover .num{
  font-family:var(--face-display);font-size:var(--t-display-s);line-height:1;
  color:var(--accent);letter-spacing:var(--tr-display);
}
.cover h3{font-family:var(--face-text);font-size:var(--t-body-l);font-weight:600;color:var(--heading);margin:0;line-height:1.3;}
.cover p{margin:0;font-size:var(--t-small);}

/* ---- constraints list ----------------------------------------------------- */
.nots{display:grid;gap:0;max-width:840px;border-top:1px solid var(--hairline);}
.not{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:baseline;
  padding-block:var(--s-5);border-bottom:1px solid var(--hairline);
}
.not .mark{color:var(--accent);font-weight:600;font-size:var(--t-body);line-height:1.6;}
.not p{margin:0;color:rgba(247,243,237,.74);font-size:var(--t-body-l);line-height:1.5;}

/* ---- bio ------------------------------------------------------------------ */
.bio-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,5vw,var(--s-9));align-items:start;}
.bio-copy{display:grid;gap:var(--s-5);max-width:620px;}
.bio-copy p{margin:0;}
.proof{display:flex;gap:var(--s-8);flex-wrap:wrap;padding-top:var(--s-5);border-top:1px solid var(--hairline);}
.proof div{display:grid;gap:var(--s-2);}
.proof .n{font-family:var(--face-display);font-size:var(--t-display-s);line-height:1;color:var(--heading);letter-spacing:var(--tr-display);}
.proof .l{font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-nano);text-transform:uppercase;color:var(--body-quiet);}

.thesis{
  border-left:2px solid var(--accent);padding-left:var(--s-6);
  font-size:clamp(20px,2.4vw,26px);line-height:1.42;font-weight:300;
  color:var(--pjc-bone);margin:0;
}
.bio-portrait{position:relative;}
/* The plate is a dark subject on a dark ground — without a light behind it, it
   reads as a floating head. One warm source, same as the hero. */
.bio-portrait::before{
  content:"";position:absolute;z-index:-1;
  left:-14%;right:-14%;top:-6%;bottom:4%;
  background:radial-gradient(52% 46% at 52% 34%, rgba(217,124,78,.20), transparent 70%);
  pointer-events:none;
}
.bio-portrait img{width:100%;height:auto;}
.bio-portrait::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(to top,var(--ground),transparent);pointer-events:none;
}
@media (max-width:860px){
  .hero-grid,.bio-grid{grid-template-columns:1fr;}
  /* The portrait follows the offer on narrow screens. Above it, a 690px-tall
     plate pushes the headline and the form off the first screen entirely. */
  .portrait{max-width:320px;justify-self:start;align-self:auto;}
  .bio-portrait{max-width:320px;justify-self:start;}
  .hero-copy{max-width:none;padding-bottom:0;}
}
@media (max-width:640px){
  .lockup .name{font-size:var(--t-display-s);}
  .masthead{padding-block:var(--s-4) var(--s-3);}
  /* Shave enough to leave the CTA real breathing room above the fold on a
     short phone, not just barely inside it. */
  .hero-copy{gap:var(--s-4);}
  .hero .lead{font-size:16.5px;}
  .disclose{padding-block:var(--s-3);padding-left:var(--s-4);}
  .disclose p{font-size:14px;}
  .signup{gap:var(--s-2);}
  .fields{gap:var(--s-3);}
  input[type=text],input[type=email]{padding:13px var(--s-4);}
}

/* ---- how it works --------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
.fact{background:var(--surface);padding:var(--s-6) var(--s-5);display:grid;gap:var(--s-3);align-content:start;}
.fact dt{font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-nano);text-transform:uppercase;color:var(--body-quiet);}
.fact dd{margin:0;font-size:var(--t-body-l);font-weight:500;color:var(--heading);line-height:1.35;}

/* ---- closing capture ------------------------------------------------------ */
.close{position:relative;overflow:hidden;background:var(--surface);}
.close .pool{background:radial-gradient(48% 62% at 50% 0%, rgba(217,124,78,.18), transparent 70%);}
.close .wrap{position:relative;z-index:1;}
.close-inner{display:grid;gap:var(--s-6);justify-items:center;text-align:center;max-width:720px;margin-inline:auto;}
.close .signup{justify-items:center;margin-inline:auto;width:100%;}
.close .fields{width:100%;}
.close .btn{justify-self:center;}
.close .field label{justify-self:start;}

/* ---- footer --------------------------------------------------------------- */
footer{padding-block:var(--s-8) var(--s-7);border-top:1px solid var(--hairline);}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s-8);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;}}
.promise{font-family:var(--face-text);font-weight:600;font-size:var(--t-body);color:var(--heading);margin:0;}
.foot-legal{display:grid;gap:var(--s-4);}
.foot-legal p{margin:0;font-size:var(--t-micro);line-height:1.6;color:var(--body);}
.foot-links{display:flex;gap:var(--s-5);flex-wrap:wrap;padding-top:var(--s-4);border-top:1px solid var(--hairline);}
.foot-links a{
  font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-nano);text-transform:uppercase;
  color:var(--body-quiet);text-decoration:none;transition:color var(--dur) var(--ease);
}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--accent);}

/* ---- reveal --------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);}
.rise.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none;}}

/* ---- skip link ------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--s-5);top:var(--s-5);z-index:99;background:var(--accent);color:#1A0C05;padding:var(--s-3) var(--s-4);font-weight:600;}

/* ============================================================================
   LEGAL PAGES
   ============================================================================ */
.legal-head{padding-block:var(--s-7) var(--s-6);border-bottom:1px solid var(--hairline);}
.legal{max-width:720px;padding-block:clamp(48px,6vw,var(--s-9));}
.legal-head .lockup{display:inline-flex;}
.legal h1{margin:0 0 var(--s-5);}
.legal h2{
  font-family:var(--face-text);font-size:var(--t-body-l);font-weight:600;color:var(--heading);
  margin:var(--s-8) 0 var(--s-4);line-height:1.3;
}
.legal p,.legal li{color:rgba(247,243,237,.72);font-size:var(--t-body);line-height:1.68;}
.legal p{margin:0 0 var(--s-4);}
.legal ul{margin:0 0 var(--s-4);padding-left:var(--s-5);display:grid;gap:var(--s-3);}
.legal li::marker{color:var(--accent);}
.legal strong{color:var(--pjc-bone);font-weight:600;}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.legal a:hover{color:var(--accent-hover);}
.legal .updated{font-size:var(--t-micro);color:var(--body-quiet);margin-bottom:var(--s-7);}
.back{
  display:inline-block;font-size:var(--t-nano);font-weight:600;letter-spacing:var(--tr-nano);
  text-transform:uppercase;color:var(--accent);text-decoration:none;margin-top:var(--s-7);
}
.back:hover{color:var(--accent-hover);}