/* ==========================================================================
   Taq Ventures — online presence grader
   Loaded after assets/styles.css on presence-grade.html
   Same line-based visual language as the rest of the site: no cards, no
   shadows, no second accent colour — rules, weight, and space only.
   ========================================================================== */

.pg-hero{
  padding: 84px 0 56px;
  border-bottom: 1px solid var(--line);
}
.pg-eyebrow{
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.pg-eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }
.pg-hero h1{
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.01em;
}
.pg-intro{
  color: var(--text);
  font-size: 17px;
  margin-bottom: 14px;
}
.pg-nowall{
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

/* ---- the input ---- */
.pg-tool{
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--line);
}
.pg-form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  max-width: 720px;
}
.pg-field{ display: flex; flex-direction: column; gap: 8px; }
.pg-field label{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-field input{
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s ease;
}
.pg-field input:hover{ border-color: var(--muted); }
.pg-field input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.pg-form .btn{ padding: 15px 22px; white-space: nowrap; }
.pg-form .btn[aria-busy="true"]{ opacity: 0.6; pointer-events: none; }

.pg-privacy{
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  max-width: 70ch;
}
.pg-error{
  margin-top: 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent-solid);
  background: var(--panel);
  font-size: 15px;
  max-width: 70ch;
}

/* ---- indeterminate progress: a travelling rule, not a spinner ---- */
.pg-progress{ margin-top: 24px; max-width: 720px; }
.pg-progress-bar{
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.pg-progress-bar span{
  display: block;
  height: 100%;
  width: 35%;
  background: var(--accent);
  animation: pg-travel 1.15s ease-in-out infinite;
  will-change: transform;
}
@keyframes pg-travel{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
.pg-progress p{
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}
@media (prefers-reduced-motion: reduce){
  .pg-progress-bar span{ animation: none; width: 100%; opacity: 0.5; }
}

/* ---- scorecard ---- */
.pg-results-wrap{ padding: 56px 0 0; }
.pg-scorecard{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.pg-grade{ display: flex; align-items: center; gap: 20px; }
.pg-grade-letter{
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 108px;
  line-height: 0.85;
  color: var(--accent-solid);
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.pg-score{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--text);
}
.pg-score-max{ color: var(--muted); font-size: 22px; }
.pg-band{
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}
.pg-summary-line{
  font-size: 17px;
  max-width: 58ch;
  margin-bottom: 12px;
}
.pg-checked{
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
}

/* ---- sections ---- */
.pg-section{
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}
.pg-section h2{
  font-size: 26px;
  margin-bottom: 8px;
}
.pg-section-note{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 26px;
}
.pg-section h2 + .pg-categories,
.pg-section h2 + .pg-fixes,
.pg-section h2 + .pg-wins{ margin-top: 26px; }

/* ---- category meters ---- */
.pg-category{
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 8px 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.pg-category:first-child{ border-top: none; }
.pg-category-label{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
}
.pg-category-score{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  text-align: right;
  color: var(--accent-solid);
}
.pg-meter{
  grid-column: 1 / -1;
  height: 2px;
  background: var(--line);
  margin-top: 4px;
}
.pg-meter span{
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  animation: pg-fill 0.5s ease-out both;
}
@keyframes pg-fill{ from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .pg-meter span{ animation: none; }
}
.pg-category-points{
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
}

/* ---- ranked fixes ---- */
.pg-fixes{ list-style: none; counter-reset: fix; }
.pg-fix{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.pg-fix:first-child{ border-top: none; }
.pg-fix-cost{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  color: var(--accent);
  line-height: 1.1;
}
.pg-fix-cost small{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-fix h3{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}
.pg-fix h3 .pg-flag{
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 2px 7px;
  margin-left: 10px;
  vertical-align: 2px;
}
.pg-fix h3 .pg-flag.miss{ color: var(--accent-solid); border-color: var(--accent); }
.pg-fix-detail{
  color: var(--muted);
  font-size: 15px;
  max-width: 66ch;
  margin-bottom: 12px;
}
.pg-fix-do{
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  font-size: 15px;
  max-width: 66ch;
}
.pg-fix-do strong{
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2px;
}

/* ---- passing checks ---- */
.pg-wins{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 32px;
}
.pg-wins li{
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.pg-wins li::before{
  content: "—";
  color: var(--accent);
  margin-right: 10px;
}
.pg-wins-empty{
  color: var(--muted);
  font-size: 15px;
}

/* ---- vitals note: shown while Google's speed API is still thinking, and
       again if it never answered ---- */
.pg-vitals-note{
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
  max-width: 62ch;
}

/* ---- blocking failures ----
   A page carrying noindex has exactly one problem worth reading about, so this
   sits above the categories rather than inside the ranked fix list. The accent
   is the same brand blue as everything else; the weight comes from position and
   the rule, not from a second colour the site does not have. */
.pg-blockers{
  padding: 34px 0 6px;
}
.pg-blockers h2{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-solid);
  margin-bottom: 16px;
}
.pg-blocker{
  border-left: 3px solid var(--accent-solid);
  background: var(--panel);
  padding: 18px 22px;
  max-width: 78ch;
}
.pg-blocker + .pg-blocker{ margin-top: 14px; }
.pg-blocker p{ font-size: 16px; }
.pg-blocker p + p{
  color: var(--muted);
  font-size: 14px;
  margin-top: 10px;
}
.pg-blocker-cap{
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  max-width: 78ch;
}

/* ---- caveats about the run ---- */
.pg-notes{
  margin-top: 26px;
  border-left: 3px solid var(--line);
  padding: 4px 0 4px 18px;
  max-width: 78ch;
}
.pg-notes p{
  color: var(--muted);
  font-size: 14px;
}
.pg-notes p + p{ margin-top: 10px; }

/* ---- checks that could not be measured ---- */
.pg-unmeasured li{
  padding: 14px 0;
  border-top: 1px solid var(--line);
  max-width: 78ch;
}
.pg-unmeasured strong{
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.pg-unmeasured span{
  color: var(--muted);
  font-size: 14px;
}

/* ---- the gated PDF download ----
   Two columns: why it is worth your details on the left, the form on the right.
   Collapses to one column early, because this is the only long form on the site
   and a cramped one does not get filled in. */
.pg-download{
  padding: 56px 0;
  background: var(--panel-veil);
  border-bottom: 1px solid var(--line);
}
.pg-download-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.pg-download-copy h2{
  font-size: 28px;
  margin-bottom: 14px;
}
.pg-download-copy p{
  font-size: 16px;
  color: var(--text);
  max-width: 46ch;
}
.pg-download-privacy{
  color: var(--muted);
  font-size: 13px;
  margin-top: 18px;
}
.pg-download-copy .pg-download-privacy{ font-size: 13px; color: var(--muted); }

.pg-download-form{
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 28px;
}
.pg-download-form .pg-field input{ font-size: 16px; padding: 12px 14px; }
.pg-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pg-optional{
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--line-strong);
}
.pg-consent{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.pg-consent input{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.pg-download-form .btn{ text-align: center; }
.pg-download-form .btn[aria-busy="true"]{ opacity: 0.6; pointer-events: none; }
.pg-download-form .pg-error{ margin-top: 0; }
.pg-download-done{
  border-left: 2px solid var(--accent);
  padding: 12px 16px;
  background: var(--panel);
  font-size: 14px;
}

/* ---- method note ---- */
.pg-method{ padding: 48px 0 64px; }
.pg-method h2{ font-size: 22px; margin-bottom: 14px; }
.pg-method p{
  color: var(--muted);
  font-size: 15px;
  max-width: 78ch;
}

@media (max-width: 900px){
  .pg-download-inner{ grid-template-columns: 1fr; gap: 30px; }
  .pg-download-copy p{ max-width: none; }
}
@media (max-width: 800px){
  .pg-scorecard{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px){
  .pg-hero{ padding: 56px 0 40px; }
  .pg-form{ grid-template-columns: 1fr; }
  .pg-form .btn{ width: 100%; text-align: center; }
  .pg-grade-letter{ font-size: 84px; padding-right: 18px; }
  .pg-section{ padding: 32px 0; }
  .pg-section h2{ font-size: 22px; }
  .pg-fix{ grid-template-columns: 44px 1fr; gap: 14px; }
  .pg-wins{ grid-template-columns: 1fr; }
  .pg-download{ padding: 40px 0; }
  .pg-download-copy h2{ font-size: 23px; }
  .pg-download-form{ padding: 20px; }
  .pg-field-row{ grid-template-columns: 1fr; }
  .pg-download-form .btn{ width: 100%; }
}