/* VYRDICT Studio: the approved hub glass, with readable Studio typography.
   Shared by Packages, Scoring and Contact. */
:root{
  --cola:#582f40;
  --cola-dark:#482633;
  --cola-muted:#684f5b;
  --stripe-cola:#76505d;
  --stripe-blue:#cbdce9;
  --stone:#f7f5ef;
  --stone-deep:#efede7;
  --letter-ink:var(--cola-dark);
  --letter-sub:var(--cola-muted);
  --letter-paper:var(--stone);
  --letter-line:rgba(96,62,72,.19);
  --letter-olive:var(--stripe-blue);
  --studio-body-size:17px;
  --studio-detail-size:15.5px;
}
body{background:#e2edf7;color:var(--cola-dark);font-weight:500}
body:before{
  inset:-3px;
  opacity:.72;
  filter:blur(.6px) saturate(.45) brightness(1.35) contrast(.84)!important;
  background-position:center center!important;
}
body:after{
  background:
    radial-gradient(ellipse at 12% 20%,rgba(243,195,214,.56),rgba(243,195,214,0) 45%),
    radial-gradient(ellipse at 86% 15%,rgba(250,239,184,.50),rgba(250,239,184,0) 39%),
    radial-gradient(ellipse at 78% 82%,rgba(204,224,204,.45),rgba(204,224,204,0) 42%),
    radial-gradient(ellipse at 22% 84%,rgba(195,216,245,.46),rgba(195,216,245,0) 50%),
    linear-gradient(115deg,rgba(224,237,249,.36),rgba(224,237,249,.16) 60%,rgba(233,242,249,.22)),
    linear-gradient(125deg,transparent 38%,rgba(255,255,255,.18) 48%,transparent 59%)!important;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,250% 100%!important;
}
a:focus-visible,button:focus-visible{outline:3px solid var(--cola);outline-offset:4px}
.letter-frame{max-width:980px;padding:44px 20px 36px}
.letter-top{max-width:820px;margin:0 auto 14px}
.letter-back,.letter-issue{
  display:inline-flex;align-items:center;min-height:40px;
  color:var(--cola-dark);font-size:13px;line-height:1.4;
  font-weight:700;letter-spacing:.04em;text-shadow:0 1px 2px #fff;
}
.letter-paper{
  max-width:820px;
  background:var(--stone)!important;background-image:none!important;
  border-color:rgba(255,255,255,.95);border-radius:8px;
  color:var(--cola-dark);backdrop-filter:none;
}
/* One stripe pattern behind the title panel keeps the upper and lower bands aligned. */
.letter-head{
  padding:0!important;
  background-color:var(--stripe-cola)!important;
  background-image:repeating-linear-gradient(90deg,
    transparent 0px,transparent 57px,
    var(--stripe-blue) 57px,var(--stripe-blue) 62px,
    transparent 62px,transparent 68px,
    var(--stripe-blue) 68px,var(--stripe-blue) 73px,
    transparent 73px,transparent 100px)!important;
  background-size:100px 100%!important;background-position:left top!important;
  background-repeat:repeat!important;border-bottom:0;text-align:center;overflow:hidden;
}
.stripe-band{background:none!important;background-image:none!important}
.stripe-top{height:52px}
.stripe-bottom{height:32px}
.title-card{
  position:relative;z-index:1;margin:-10px 24px -11px;
  background:var(--stone)!important;border:1px solid #fffdf8;
  border-radius:13px;padding:28px 34px;
  box-shadow:0 4px 14px rgba(57,33,45,.11);
}
.letter-title-panel{
  position:relative;background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0;padding:0;box-shadow:none;text-align:center;
}
.letter-meta{justify-content:center;gap:12px;color:var(--cola-muted);font-size:12px;font-weight:700}
.letter-meta>span:last-child{position:static;color:var(--cola-muted);font-size:12px}
.letter-label{gap:7px;color:var(--cola-dark)}
.letter-mark{color:var(--cola-dark)}
.letter-mark i{background:#d799ac}
.letter-head h1{
  font:400 clamp(40px,4.3vw,55px)/1.04 var(--letter-serif);
  letter-spacing:-.03em;color:var(--cola-dark);
  max-width:650px;margin:4px auto 18px;
}
.letter-head h1 em{font:italic 400 1em/1.04 var(--letter-serif);color:var(--cola-dark)}
.letter-lede{
  font:500 var(--studio-body-size)/1.65 var(--letter-sans);
  color:var(--cola-muted);max-width:650px;margin:0 auto;
}
.letter-body{
  padding:32px 48px 40px;
  background-color:var(--stone)!important;
  background-image:radial-gradient(circle,rgba(100,67,70,.052) .65px,transparent 1.1px)!important;
  background-size:26px 26px;color:var(--cola-dark);
}
.letter-body p{color:#594550;font-size:var(--studio-body-size);line-height:1.68;font-weight:500}
.letter-body h2{
  font:400 38px/1.12 var(--letter-serif);letter-spacing:-.03em;
  color:var(--cola-dark);margin:10px 0 18px;
}
.letter-kicker{color:#6d4f5d;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:.10em}
.intro-note{background:var(--stone-deep)!important;border-color:#b99da8;padding:13px 17px;margin:16px 0 26px}
.intro-note p{font-size:var(--studio-detail-size);color:var(--cola-muted)!important;line-height:1.7}
.offering{grid-template-columns:32px minmax(0,1fr);gap:16px;padding:25px 0;border-color:var(--letter-line)}
.offering .number{font-size:13px;line-height:1.5;margin-top:5px;color:#745362}
.offering h3{font:400 30px/1.15 var(--letter-serif);letter-spacing:-.03em;color:var(--cola-dark)}
.offering p{font-size:var(--studio-body-size);line-height:1.68;margin:10px 0}
.details{font-size:var(--studio-detail-size);line-height:1.7;font-weight:600;color:var(--cola-muted)!important}
.application{padding-top:38px}
.application>p{margin-bottom:24px}
.apply{gap:20px}
.formgrid{gap:18px}
.field{gap:8px}
.field label,.field .caption{font-size:15px;line-height:1.5;font-weight:700;color:var(--cola-dark)}
.field .optional{font-size:14px;color:var(--cola-muted)!important}
.field input,.field select,.field textarea{
  background:#fffefa!important;color:var(--cola-dark);
  border:1px solid #cdbbbd;font:500 16px/1.5 var(--letter-sans);
  padding:14px;border-radius:6px;
}
.field textarea{min-height:112px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#a77c90;outline:2px solid #d2dce8}
.field input::placeholder,.field textarea::placeholder{color:#73616b}
.submit{
  background:var(--cola);color:#fffaf7;border-color:var(--cola);
  padding:16px 18px;font:700 16px/1.5 var(--letter-sans);min-height:54px;
}
.submit:hover{background:#734354}
.form-help,.form-status{font-size:15px;line-height:1.65;color:var(--cola-muted)!important}
.form-help a,.contact-hero a{color:var(--cola-dark)}
.letter-foot{padding:22px 48px 28px;gap:22px;background:var(--stone-deep)!important;border-color:var(--letter-line)}
.progress{gap:10px}
.progress a{font-size:13px;line-height:1.6;letter-spacing:.02em;color:#684f5b}
.progress a[aria-current="page"],.nav-next a,.letter-bottom-note{color:var(--cola-dark)}
.progress .slash{font-size:13px;color:#806875}
.nav-next{flex-wrap:wrap;gap:16px}
.nav-next a{font-size:15px;line-height:1.5}
.nav-next .forward{background:var(--stripe-blue);border-color:#bbccd8;color:var(--cola-dark);padding:12px 17px;min-height:44px}
.nav-next .forward:hover{background:#b5c9da}
.factor{grid-template-columns:30px minmax(0,1fr) 44px;gap:16px;padding:22px 0;border-color:var(--letter-line)}
.factor-index,.factor-score{font-size:14px;line-height:1.5;margin-top:4px;color:var(--cola-dark)}
.factor h3{font:400 28px/1.15 var(--letter-serif);letter-spacing:-.03em;color:var(--cola-dark);margin-bottom:7px}
.factor p{font-size:var(--studio-body-size);line-height:1.65;color:var(--cola-muted)!important}
.score-example{gap:20px;padding:16px 0;margin:10px 0}
.score-example strong{font:700 36px/1.2 var(--letter-sans);color:var(--cola-dark);white-space:nowrap}
.score-example p{font-size:var(--studio-body-size)}
.decision-list{gap:0 24px}
.decision{grid-template-columns:90px minmax(0,1fr);gap:14px;padding:18px 0;border-color:var(--letter-line)}
.decision b{font-size:16px;line-height:1.55;color:var(--cola-dark)}
.decision p{font-size:var(--studio-detail-size);line-height:1.65;color:var(--cola-muted)!important}
.disclaimer{font-size:var(--studio-detail-size)!important;line-height:1.7!important;color:var(--cola-muted)!important}
.contact-hero{background:#e6e9eb!important;border:1px solid #c5d1da;padding:24px;margin:22px 0 30px}
.contact-hero p{font:400 30px/1.15 var(--letter-serif);letter-spacing:-.03em;color:var(--cola-dark);margin-bottom:12px}
.contact-hero a{font-size:16px;line-height:1.6}
.connect-row{border-color:var(--letter-line);padding:20px 0;gap:20px}
.connect-row strong{font:400 27px/1.15 var(--letter-serif);letter-spacing:-.03em;color:var(--cola-dark)}
.connect-row small{
  font:600 16px/1.55 var(--letter-sans);color:#593746!important;
  text-align:right;max-width:56%;overflow-wrap:anywhere;
}
.closing{font:400 32px/1.15 var(--letter-serif);letter-spacing:-.03em;padding:32px 0 12px;color:#744f61}
@media(max-width:700px){.decision-list{grid-template-columns:1fr}}
@media(max-width:620px){
  :root{--studio-body-size:16px;--studio-detail-size:15px}
  .letter-frame{padding:24px 12px 30px}
  .letter-top{padding-inline:3px;margin-bottom:10px}
  .letter-back{font-size:12px}
  .stripe-top{height:48px}
  .stripe-bottom{height:26px}
  .title-card{margin:-10px 14px -10px;padding:24px 18px;border-radius:11px}
  .letter-title-panel{padding:0!important}
  .letter-head h1{font-size:clamp(34px,8.4vw,40px);margin:0 auto 16px}
  .letter-body{padding:26px 22px 32px}
  .letter-body h2{font-size:34px}
  .letter-kicker{font-size:11px}
  .offering{grid-template-columns:25px minmax(0,1fr);gap:12px;padding:23px 0}
  .offering h3{font-size:28px}
  .formgrid{grid-template-columns:1fr;gap:20px}
  .letter-foot{padding:20px 22px 24px}
  .progress{gap:8px}
  .progress a{font-size:12px}
  .nav-next a{font-size:14px}
  .factor{grid-template-columns:24px minmax(0,1fr) 32px;gap:12px}
  .factor h3{font-size:26px}
  .score-example{gap:16px}
  .score-example strong{font-size:30px}
  .contact-hero{padding:20px}
  .contact-hero p{font-size:28px}
  .connect-row{gap:14px}
  .connect-row strong{font-size:25px}
  .connect-row small{font-size:15px;max-width:55%}
  .closing{font-size:29px}
}

.letter-lede a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Phone layouts keep controls easy to tap and long contact labels in one column. */
@media(max-width:620px){
 .letter-top{flex-wrap:wrap;gap:4px 12px}
 .letter-back,.letter-issue{min-height:44px}
 .letter-body,.title-card,.field,.formgrid{min-width:0}
 .field input,.field select,.field textarea{min-width:0;max-width:100%}
 .connect-row{flex-direction:column;align-items:flex-start;gap:6px}
 .connect-row small{text-align:left;max-width:100%;overflow-wrap:anywhere}
 .progress{align-items:center}
 .progress a,.nav-next a{display:inline-flex;align-items:center;min-height:44px}
}