/* ==========================================================================
   Campaign 02 — Website Speed / Care Plan

   A diagnostic, not a sales page. The buyer already has a website and half
   suspects it is slow. Nothing we can say about our hosting beats showing
   them their own score, so the hero is a tool: paste a URL, get a real
   Lighthouse result, then book.

   Shared components live in nayfla.css, which loads first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — the tool is the hero
   -------------------------------------------------------------------------- */

.n-hero,
main > section.n-hero:first-of-type {
  padding-block: var(--space-l) var(--section-space-s);

  @media (min-width: 1024px) { padding-block: var(--space-xl) var(--section-space-m); }
}

/* .n-hero__inner and .n-hero__lede are shared now — this hero's shape is
   what the other two adopted. See section 4 of nayfla.css. */

/* --------------------------------------------------------------------------
   The speed checker
   -------------------------------------------------------------------------- */

.n-tool { inline-size: 100%; max-inline-size: 50rem; }

/* The pill is unreadable stretched to 50rem, so only the result uses the
   full width. */
.n-tool__form,
.n-tool__note { max-inline-size: 38rem; margin-inline: auto; }

.n-tool__form {
  display: flex;
  gap: var(--space-xs);
  padding: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 99px;
  background: var(--white);
  box-shadow: 0 8px 30px color-mix(in oklch, var(--base) 10%, transparent);

  &:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); }

  /* A pill row is unusable at 360px once the button goes full width. */
  @media (max-width: 30rem) {
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: var(--space-xs);
  }
}

.n-tool__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  padding-inline: var(--space-s);
  padding-block: 0.6em;
  font-family: var(--text-font-family);
  font-size: var(--text-m);
  color: var(--text-dark);

  &::placeholder { color: color-mix(in srgb, var(--text-dark) 45%, transparent); }
  &:focus { outline: none; }
  /* iOS zooms the page on focus for anything under 16px. */
  @media (max-width: 30rem) { font-size: 1rem; padding-block: 0.75em; }
}

.n-tool__submit {
  flex-shrink: 0;
  /* Match the field's pill so the two read as one control. */
  --btn-border-radius: 99px;
  --btn-padding-inline: 1.5em;
}

.n-tool__note { font-size: var(--prose-s); color: var(--text-dark-muted); text-align: center; margin-block-start: var(--space-xs); }

/* Progress, error, and result share one region so screen readers announce
   whichever is current. */
.n-tool__out { inline-size: 100%; margin-block-start: var(--space-m); }
.n-tool__out:empty { display: none; }

.n-progress { display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; padding: var(--space-m); font-size: var(--prose-s); color: var(--text-dark-muted); }
.n-progress__track { inline-size: 100%; max-inline-size: 22rem; block-size: 4px; border-radius: 99px; background: var(--hairline); overflow: hidden; }
.n-progress__bar { block-size: 100%; inline-size: 30%; border-radius: 99px; background: var(--primary); animation: n-slide 1.4s ease-in-out infinite; }

@keyframes n-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }

.n-error {
  padding: var(--space-m);
  border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in oklch, var(--danger) 7%, transparent);
  font-size: var(--prose);
  text-align: start;

  & strong { display: block; margin-block-end: 0.3em; color: var(--neutral-ultra-dark); font-family: var(--heading-font-family); font-size: var(--text-m); }

  /* The CTA is shared with the result card but needs no second background. */
  & .n-result__cta { padding: var(--space-s) 0 0; margin-block-start: var(--space-s); background: none; border-block-start: 1px solid color-mix(in oklch, var(--danger) 20%, transparent); }
}

/* --------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */

.n-result {
  text-align: start;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xxl);
  background: var(--white);
  box-shadow: 0 14px 44px color-mix(in oklch, var(--base) 12%, transparent);
  overflow: hidden;
}

/* The gap matches the padding, so the grade sits in an even field: the same
   space above it, beside it, and below it however this wraps. It used to be
   space-m against a space-l padding, which on a phone (where the row wraps and
   the gap becomes the space under the grade) read as a grade shoved into the
   verdict. Aligned to start rather than centred for the same reason — centring
   a 6.5rem ring against five lines of verdict floats it in the middle of
   nothing. */
.n-result__head {
  display: flex; flex-wrap: wrap; gap: var(--space-l); align-items: start;
  padding: var(--space-l); border-block-end: 1px solid var(--hairline);
}

.n-result__url { font-size: var(--text-xs); color: var(--text-dark-muted); word-break: break-all; margin-block-start: 0.6em; }
.n-result__verdict { flex: 1; min-inline-size: 14rem; }
.n-result__verdict b { display: block; font-family: var(--heading-font-family); font-size: var(--text-l); line-height: 1.2; color: var(--neutral-ultra-dark); margin-block-end: 0.35em; }
/* The one line that says what the grade means. Muting it put the whole
   diagnosis a shade below the URL under it. */
.n-result__verdict span { display: block; font-size: var(--prose); color: var(--text-dark); line-height: 1.55; }

/* Grade ring plus the number it came from. */
.n-score { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); flex-shrink: 0; }
.n-score__num { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-dark); font-variant-numeric: tabular-nums; }

/* Score ring. --score is set inline by JS (0-100). */
.n-gauge {
  inline-size: 6.5rem; block-size: 6.5rem; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--gauge-color) calc(var(--score) * 1%), var(--hairline) 0);
  position: relative;

  &::after {
    content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--white);
  }

  & b { position: relative; z-index: 1; font-family: var(--heading-font-family); font-size: var(--text-xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--gauge-color); }
}

.n-gauge[data-band="good"] { --gauge-color: var(--success-readable); }
.n-gauge[data-band="mid"]  { --gauge-color: var(--accent-readable); }
.n-gauge[data-band="poor"] { --gauge-color: var(--danger-readable); }
/* No score at all — a grey ring, not a red zero. */
.n-gauge[data-band="none"] { --gauge-color: var(--text-dark-muted); }

.n-metrics {
  display: grid; grid-template-columns: var(--grid-1); gap: 1px;
  background: var(--hairline);

  @media (min-width: 560px) { grid-template-columns: var(--grid-3); }
}

.n-metrics div { padding: var(--space-m); background: var(--white); display: flex; flex-direction: column; gap: 0.5em; }
.n-metrics dt { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dark-muted); line-height: 1.3; }
.n-metrics dd { margin: 0; font-family: var(--heading-font-family); font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--neutral-ultra-dark); }
.n-metrics dd small { display: block; font-family: var(--text-font-family); font-size: var(--text-xs); font-weight: 400; line-height: 1.45; color: var(--text-dark-muted); margin-block-start: 0.5em; }

/* Each number carries its own verdict, same scale as the ring. */
.n-metrics [data-band="good"] dd { color: var(--success-readable); }
.n-metrics [data-band="mid"] dd  { color: var(--accent-readable); }
.n-metrics [data-band="poor"] dd { color: var(--danger-readable); }
.n-metrics [data-band="none"] dd { color: var(--text-dark-muted); font-size: var(--text-m); }

.n-findings { padding: var(--space-l); display: flex; flex-direction: column; gap: var(--space-s); border-block-start: 1px solid var(--hairline); }
.n-findings h3 { margin: 0; font-size: var(--text-m); color: var(--neutral-ultra-dark); }
.n-findings ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.n-findings li { display: grid; grid-template-columns: auto 1fr; gap: 0.8em; align-items: start; font-size: var(--prose-s); line-height: 1.5; }
.n-findings li::before { content: ""; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; margin-block-start: 0.5em; background: var(--accent-readable); }
.n-findings li[data-host="true"]::before { background: var(--primary); }
.n-findings li b { display: block; color: var(--neutral-ultra-dark); font-size: var(--prose); line-height: 1.35; }
.n-findings li small { display: block; font-size: var(--prose-s); color: var(--text-dark-muted); margin-block-start: 0.25em; }
.n-findings li em {
  display: inline-block; margin-block-start: 0.5em; font-style: normal;
  font-size: var(--text-xs); letter-spacing: 0.04em;
  padding: 0.25em 0.7em; border-radius: 99px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent-readable);
}
.n-findings li[data-host="true"] em { background: color-mix(in oklch, var(--primary) 14%, transparent); color: var(--primary); }

.n-result__cta {
  padding: var(--space-l);
  border-block-start: 1px solid var(--hairline);
  background: color-mix(in oklch, var(--primary) 7%, transparent);
  display: flex; flex-direction: column; gap: var(--space-s);
}

.n-result__cta p { font-size: var(--prose); line-height: 1.55; max-inline-size: 52ch; }

/* --------------------------------------------------------------------------
   Pricing tiers — three of them, so this grid goes wider than Campaign 03's
   -------------------------------------------------------------------------- */

.n-tiers {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--grid-gap); align-items: stretch;

  @media (min-width: 700px) { grid-template-columns: var(--grid-2); }
  @media (min-width: 1024px) { grid-template-columns: var(--grid-3); }
}

/* --------------------------------------------------------------------------
   Booking
   -------------------------------------------------------------------------- */