/* Search Market Fit - tool widget styles, on Hawk Academy brand.
   Relies on /css/styles.css for site :root tokens + chrome. Defines the
   diagnostic form + results widget in brand, and aliases the status tokens the
   app.js script references (--good/warn/bad, --fit-partial). */
:root {
  --good-fg:#0e9f6e; --good-bg:#e6f6ef;
  --warn-fg:#b45309; --warn-bg:#fdf3d7;
  --bad-fg:#dc2626;  --bad-bg:#fdecec;
  --fit-partial:#2f6fd0;
  --paper-2:#ECEAE6; --line:#E8E6E2; --line-2:#D5D3CF;
}

/* ---------- hero ---------- */
.tool-hero { background: var(--color-black); padding: 116px 0 56px; text-align: center; position: relative; overflow: hidden; }
.tool-hero::before { content:''; position:absolute; top:30px; right:8%; width:100px; height:100px; border-radius:50%; background: var(--color-yellow); opacity:.6; }
.tool-hero::after { content:''; position:absolute; bottom:40px; left:6%; width:50px; height:50px; border-radius:50%; background: var(--color-lavender); opacity:.4; }
.tool-hero .hero__label { display:inline-block; font-family: var(--font-body); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color: var(--color-cyan); margin-bottom:16px; }
.tool-hero h1 { font-family: var(--font-heading); font-size: clamp(32px,5vw,48px); font-weight:600; color: var(--color-white); line-height:1.15; max-width:720px; margin:0 auto 16px; }
.tool-hero h1 span { color: var(--color-lavender); }
.tool-hero p { color: var(--color-light-body); max-width:620px; margin:0 auto; font-size:17px; line-height:1.7; }
.tool-hero .credit { font-size:13px; color: rgba(255,255,255,.4); margin-top:14px; }
.tool-hero .credit a { color: rgba(255,255,255,.65); text-decoration: underline; }

/* ---------- body / layout ---------- */
.tool-body { background: var(--color-off-white); padding: 52px 0 100px; }
.tool-wrap { max-width: 760px; margin: 0 auto; }
.card { background: var(--color-white); border:1px solid var(--line); border-radius: var(--radius-card); padding: 28px; margin: 18px 0; }
.card:first-child { margin-top: 0; }

/* ---------- form ---------- */
.field { margin-bottom: 18px; }
.field label { display:block; font-family: var(--font-heading); font-weight:600; font-size:15px; color: var(--color-dark-text); margin-bottom:7px; }
.field label .sub { font-family: var(--font-body); font-weight:400; color: var(--color-body-text); font-size:13px; }
.field input, .field select {
  width:100%; padding:13px 15px; font-family: var(--font-body); font-size:15px;
  border:1px solid var(--line-2); border-radius:10px; background: var(--color-white); color: var(--color-dark-text); transition: border-color .15s, box-shadow .15s;
}
.field select { cursor:pointer; }
.field input:focus, .field select:focus { outline:none; border-color: var(--color-lavender); box-shadow:0 0 0 3px rgba(173,186,255,.35); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row2 { grid-template-columns:1fr; } }

/* diagnostic questions */
.qlead { font-family: var(--font-body); font-size:.9rem; color: var(--color-body-text); margin: 6px 0 0; }
.q { padding:16px 0; border-top:1px solid var(--line); }
.q:first-of-type { border-top:0; padding-top:14px; }
.q .qt { font-family: var(--font-body); font-weight:600; font-size:.96rem; color: var(--color-dark-text); margin-bottom:10px; line-height:1.5; }
.q .qt em { font-style: normal; color: var(--color-dark-text); border-bottom: 2px solid var(--color-lavender); }
.q .qh { font-weight:400; color: var(--color-body-text); font-size:.84rem; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opt { cursor:pointer; } .opt input { position:absolute; opacity:0; pointer-events:none; }
.opt span { display:inline-block; border:1px solid var(--line-2); border-radius:var(--radius-pill); padding:8px 16px; font-size:.9rem; color: var(--color-body-text); transition: all .12s; }
.opt:hover span { border-color: var(--color-lavender); }
.opt input:checked + span { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }

.btn {
  appearance:none; cursor:pointer; border:0; border-radius: var(--radius-pill);
  background: var(--gradient-cta); color: var(--color-black);
  font-family: var(--font-body); font-weight:600; font-size:15px; padding:15px 32px; transition: opacity .2s;
}
.btn:hover { opacity:.85; } .btn:disabled { opacity:.55; cursor:progress; }

/* ---------- states ---------- */
.hint { font-family: var(--font-body); font-size:13px; color: var(--color-body-text); }
.hidden { display:none !important; }
.err { background: var(--bad-bg); color: var(--bad-fg); border:1px solid rgba(220,38,38,.25); padding:14px 16px; border-radius:10px; font-size:14px; margin-top:16px; }
.foot { color: var(--color-body-text); font-size:13px; text-align:center; padding:34px 0 0; }
.foot a { color: var(--color-dark-text); text-decoration:underline; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color: var(--color-black); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; } @keyframes spin { to { transform: rotate(360deg); } }

/* ---------- section heading ---------- */
.sec-h { display:flex; align-items:baseline; gap:10px; margin: 30px 0 6px; }
.sec-h h2 { font-family: var(--font-heading); font-weight:600; font-size:20px; color: var(--color-dark-text); margin:0; }
.sec-h .meta { font-size:13px; color: var(--color-body-text); margin-left:auto; }

/* ---------- score ring + verdict ---------- */
.scorebar { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.ring { --p:0; --c: var(--good-fg); position:relative; width:108px; height:108px; flex:0 0 auto; border-radius:50%; background: conic-gradient(var(--c) calc(var(--p)*1%), var(--paper-2) 0); }
.ring::after { content:''; position:absolute; inset:10px; background: var(--color-white); border-radius:50%; }
.ring .num { position:absolute; inset:0; display:grid; place-items:center; font-family: var(--font-heading); font-size:2.1rem; font-weight:700; z-index:1; }
.verdict { font-family: var(--font-heading); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; }
.verdict small { display:block; font-family: var(--font-body); font-weight:400; font-size:.88rem; color: var(--color-body-text); letter-spacing:0; margin-top:4px; }

/* ---------- breakdown bars ---------- */
.sub { display:grid; gap:14px; margin-top:6px; }
.subrow .top { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; font-weight:600; margin-bottom:6px; color: var(--color-dark-text); }
.subrow .top span:last-child { color: var(--color-body-text); font-weight:600; white-space:nowrap; }
.track { height:9px; background: var(--paper-2); border-radius:999px; overflow:hidden; }
.fill { height:100%; border-radius:999px; background: var(--gradient-cta); }

/* ---------- insight callout ---------- */
.insight { background: rgba(173,186,255,.14); border:1px solid rgba(173,186,255,.4); border-radius:12px; padding:13px 15px; font-size:.94rem; color: var(--color-dark-text); line-height:1.55; margin-top:10px; }
.insight strong { color: var(--color-dark-text); }
.next { background: rgba(1,255,255,.07); border:1px solid rgba(1,255,255,.35); border-radius:12px; padding:14px 16px; font-size:.95rem; color: var(--color-dark-text); line-height:1.55; }
.next strong { color: var(--color-dark-text); }

/* ---------- stat tiles + chips ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:0 0 6px; }
.stat { background: var(--color-off-white); border-radius:12px; padding:14px 16px; }
.stat .v { font-family: var(--font-heading); font-size:1.5rem; font-weight:600; color: var(--color-dark-text); }
.stat .l { font-size:.74rem; color: var(--color-body-text); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.chip { display:inline-block; background: var(--color-off-white); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:.82rem; color: var(--color-body-text); margin:2px; }

/* ---------- table ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th, .tbl td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); color: var(--color-dark-text); }
.tbl th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--color-body-text); font-weight:700; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- educational CTA ---------- */
.cta { background: var(--color-black); color: var(--color-white); border-radius: var(--radius-card); padding:30px 28px; margin:30px 0 0; text-align:center; }
.cta h3 { font-family: var(--font-heading); font-weight:600; font-size:1.4rem; margin:0 0 8px; color: var(--color-white); }
.cta p { margin:0 auto 18px; max-width:56ch; color: var(--color-light-body); font-size:.98rem; }
.cta .btn { display:inline-block; }

@media (max-width:600px){ .card { padding:22px 20px; } .tool-body { padding:40px 0 70px; } }

/* ---------------------------------------------------------------- page speed tool */
.ps-main{margin:0;padding:0}
.ps-wrap{max-width:920px;margin:0 auto;padding:0 24px}
.ps-wrap--read{max-width:760px}

/* Hero, matching the playbook shell */
.ps-hero{background:var(--color-black);padding:100px 0 80px;text-align:center;
  position:relative;overflow:hidden}
.ps-hero::before{content:'';position:absolute;top:30px;right:8%;width:100px;height:100px;
  border-radius:50%;background:var(--color-yellow);opacity:.6}
.ps-hero::after{content:'';position:absolute;bottom:40px;left:6%;width:50px;height:50px;
  border-radius:50%;background:var(--color-lavender);opacity:.4}
.ps-hero .ps-wrap{position:relative;z-index:1}
.hero__label{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;color:var(--color-cyan);margin:0 0 16px}
.ps-hero h1{font-family:var(--font-heading);font-size:clamp(30px,5vw,48px);font-weight:600;
  line-height:1.15;color:var(--color-white);max-width:700px;margin:0 auto 16px}
.ps-hero h1 span{color:var(--color-lavender)}
.ps-sub{font-size:17px;line-height:1.7;color:var(--color-light-body);max-width:620px;
  margin:0 auto 28px}
.ps-sub strong{color:var(--color-white);font-weight:600}
.ps-form{display:grid;grid-template-columns:2fr 1.4fr 1.2fr auto;gap:12px;align-items:end;
  background:var(--color-white);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:20px;text-align:left;max-width:820px;margin:0 auto;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ps-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ps-field label{font-size:13px;font-weight:600;color:#333}
.ps-field input,.ps-field select{padding:11px 12px;border:1px solid #cfcfc8;border-radius:8px;
  font-size:15px;background:#fff;width:100%}
.ps-btn{padding:12px 22px;border:0;border-radius:8px;background:#111;color:#fff;font-size:15px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.ps-btn:hover{background:#000}
.ps-btn:disabled{opacity:.55;cursor:default}

/* Keyboard focus. The controls sit on a white card, the jump link on black. */
.ps-field input:focus-visible,.ps-field select:focus-visible{outline:3px solid #1a56db;
  outline-offset:2px;border-color:#1a56db}
.ps-btn:focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px}
.ps-jump a:focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px;border-radius:3px}
.ps-meta{font-size:13px;color:var(--color-light-body);margin:14px 2px 0}
.ps-error{margin:14px 0 0;padding:12px 14px;border-radius:8px;background:#fdecec;color:#8a1c1c;font-size:15px}

.ps-result{background:var(--color-off-white);padding:44px 0 0}
.ps-verdict{border-radius:14px;padding:28px 30px;margin-bottom:26px}
.ps-verdict--good{background:#111;color:#fff}
.ps-verdict--bad{background:#fdf6dc;border:2px solid #f5c518}
.ps-verdict--neutral{background:#f4f4f1;border:1px solid #e3e3de}
.ps-verdict__label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.ps-verdict--good .ps-verdict__label{opacity:.75}
.ps-verdict__headline{font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin:8px 0 12px}
.ps-verdict__body{font-size:17px;line-height:1.6;margin:0;opacity:.92}

.ps-panel{border:1px solid #e3e3de;border-radius:12px;padding:22px 24px;margin-bottom:18px;background:#fff}
.ps-panel--soft{background:#fafaf8}
.ps-panel h3{margin:0 0 14px;font-size:18px}
.ps-table{width:100%;border-collapse:collapse;font-size:15px}
.ps-table th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:#5f5f5f;border-bottom:1px solid #e3e3de;padding:0 10px 8px 0;font-weight:600}
.ps-table td{padding:12px 10px 12px 0;border-bottom:1px solid #f0f0ec;vertical-align:top}
.ps-table tr:last-child td{border-bottom:0}
.ps-metric-name{display:block;font-size:12px;color:#5f5f5f;font-weight:400}
.ps-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.ps-pill--pass{background:#e6f4ea;color:#1a6b33}
.ps-pill--fail{background:#fdecec;color:#8a1c1c}
.ps-pill--none{background:#f0f0ec;color:#777}
.ps-muted{color:#999}
.ps-cohort{font-size:17px;line-height:1.6;margin:0}
.ps-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:#666;
  border-left:3px solid #f5c518;padding-left:12px}
.ps-fix{margin:0;padding-left:20px}
.ps-fix li{margin-bottom:14px;font-size:16px;line-height:1.55}
.ps-fix__meta{display:block;font-size:14px;color:#666;margin-top:3px}
.ps-behind{margin:0;padding-left:20px}
.ps-behind li{margin-bottom:9px;font-size:16px;line-height:1.5}
.ps-provenance{font-size:13px;color:#5f5f5f;line-height:1.55;margin:18px 2px 0}

.ps-next{background:var(--color-off-white);padding:8px 0 60px}
.ps-next .ps-wrap{background:var(--color-white);border:1px solid #e6e4e0;border-radius:14px;
  padding:28px 30px;max-width:820px}
.ps-next h2{margin:0 0 12px;font-size:24px}
.ps-next p{font-size:17px;line-height:1.6;color:#444;margin:0 0 16px}
/* Links must look like links. Nothing here had a colour before. */
.ps-body a,.ps-next p a,.ps-method p a,.ps-sources a{color:#1a56db;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  overflow-wrap:anywhere}
.ps-body a:hover,.ps-next p a:hover,.ps-method p a:hover,.ps-sources a:hover{color:#123f9e}
.ps-body a:focus-visible,.ps-next p a:focus-visible,.ps-sources a:focus-visible{
  outline:3px solid #1a56db;outline-offset:2px;border-radius:2px}

/* Three pronged pathway */
.ps-path{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:26px 0 0;padding:0;counter-reset:prong}
.ps-path__step{position:relative;display:flex}
.ps-path__step a{display:flex;flex-direction:column;gap:6px;width:100%;
  padding:22px 20px 20px;background:var(--color-off-white);border:1px solid #e6e4e0;
  border-radius:14px;text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ps-path__step a:hover{transform:translateY(-3px);border-color:#c9c7c2;
  box-shadow:0 12px 28px rgba(0,0,0,.09)}
.ps-path__step a:focus-visible{outline:3px solid #1a56db;outline-offset:3px}
.ps-path__num{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--color-black);
  color:var(--color-white);font-size:14px;font-weight:700;margin-bottom:4px}
.ps-path__label{font-family:var(--font-heading);font-size:18px;font-weight:600;
  color:var(--color-dark-text);line-height:1.3}
.ps-path__desc{font-size:14.5px;line-height:1.55;color:#4a4a4a;flex:1}
.ps-path__cta{font-size:13.5px;font-weight:600;color:#1a56db;margin-top:6px}
.ps-path__step a:hover .ps-path__cta{text-decoration:underline}
.ps-path__cta::after{content:' \2192'}
.ps-next__more{margin:18px 0 0;font-size:15px}

@media (max-width:760px){
  .ps-path{grid-template-columns:1fr;gap:12px}
}
.ps-method{background:var(--color-off-white);padding:0 0 72px}
.ps-method .ps-wrap{max-width:760px;padding-top:26px;border-top:1px solid #e3e3de}
.ps-method h2{font-size:20px;margin:0 0 12px}
.ps-method p{font-size:15px;line-height:1.65;color:#555;margin:0 0 12px;max-width:760px}

@media (max-width:760px){
  .ps-hero{padding:72px 0 56px}
  .ps-wrap{padding:0 20px}
  /* the decorative circles overlap the H1 at narrow widths */
  .ps-hero::before{width:64px;height:64px;top:14px;right:-14px;opacity:.35}
  .ps-hero::after{width:34px;height:34px;bottom:18px;left:-10px;opacity:.3}
  .ps-form{grid-template-columns:1fr;gap:14px}
  .ps-btn{width:100%;padding:14px}
  .ps-table thead{display:none}
  .ps-table td{display:block;padding:4px 0;border:0}
  .ps-table tr{display:block;padding:12px 0;border-bottom:1px solid #f0f0ec}
  .ps-verdict{padding:22px 20px}
}

/* ------------------------------------------------------- article body + UX */
.ps-jump{margin:14px 2px 0;font-size:15px}
.ps-jump a{color:var(--color-cyan);text-decoration:underline;text-underline-offset:3px}
.ps-jump a:hover{color:var(--color-white)}

.ps-body{background:var(--color-off-white);padding:64px 0 8px}
.ps-body h2{font-size:clamp(22px,3vw,30px);line-height:1.25;margin:52px 0 16px;scroll-margin-top:90px}
.ps-body h2:first-child{margin-top:0}
.ps-body p{font-size:17px;line-height:1.7;color:#2b2b2b;margin:0 0 18px}
.ps-body strong{font-weight:700;color:#111}

.ps-pull{margin:26px 0;padding:22px 26px;background:#fafaf8;border-left:4px solid #F5C518;
  border-radius:0 10px 10px 0;font-size:17px;line-height:1.65;color:#222}
.ps-quote{margin:26px 0;padding:22px 26px;background:#fff8dc;border-left:4px solid #F5C518;
  border-radius:0 10px 10px 0;font-size:19px;line-height:1.6;font-style:italic;color:#111}

.ps-fig{margin:34px 0;max-width:100%}
.ps-fig img{width:100%;height:auto;display:block;border:1px solid #e3e3de;border-radius:10px}
.ps-fig figcaption{margin-top:10px;font-size:14px;color:#777;line-height:1.5}

.ps-sources{margin:0 0 20px;padding-left:20px}
.ps-sources li{font-size:15px;line-height:1.6;margin-bottom:10px;color:#555;word-break:break-word}
.ps-sources a{color:#333}

/* Sticky return-to-tool. The article is a long scroll and the tool is the point. */
.ps-sticky{position:fixed;right:22px;bottom:22px;z-index:40;display:none;
  padding:13px 22px;border-radius:999px;background:#111;color:#fff;font-size:15px;
  font-weight:700;text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.ps-sticky:hover{background:#000;color:#fff}
.ps-sticky.is-visible{display:block}

@media (max-width:760px){
  .ps-body{margin-top:44px}
  .ps-body h2{margin:40px 0 14px}
  .ps-pull,.ps-quote{padding:18px 18px}
  .ps-sticky{right:14px;bottom:14px;padding:12px 18px;font-size:14px}
  /* max-width:100% resolves against the wrapper's content box, so it pins the
     figure back to 335px and the negative margins only shift it left. Both have
     to go for the charts to actually reach the screen edge. */
  .ps-fig{margin:26px -20px;max-width:none}
  .ps-fig img{border-radius:0;border-left:0;border-right:0}
  .ps-fig figcaption{padding:0 20px}
}