/* ===========================================================================
   Booked Wild — the 15 point mobile website checklist

   /guides/mobile-checklist/, the web version of the printable PDF in
   /downloads/. It is reached almost entirely from an Instagram or Facebook DM,
   so this file is written mobile-first: the base rules are the phone layout and
   the media queries only add room, rather than the other way round.

   It owns one component the rest of the site does not have — a two-option
   answer control — plus the panels around it. Everything else (header, footer,
   .wrap, .eyebrow, .btn) is the site's own, out of services.css.

   Two colours are declared locally. Neither is a new brand colour:

   --cl-yes #2E7D42 is the green services.css already uses for the wordmark's
   second word on a cream header. The brand --accent (#3E8E4F) is only 4.05:1
   against white, which is short of AA for the button label; this is 5.09:1.

   --cl-no  #C2422A is the carousel's warning accent brought to AA. The
   Instagram slides use #DE583A, which is 3.78:1 against white; this is 5.11:1
   and reads as the same terracotta.
   =========================================================================== */

.cl-body {
  --cl-yes: #2E7D42;
  --cl-no: #C2422A;
  --cl-card: #F6F0EB;          /* the carousel's warm card ground */
  --cl-card-line: #E4DCD2;
  --cl-bar-h: 66px;
}

/* ---- hero ---------------------------------------------------------------- */

.cl-hero {
  background: var(--ink);
  color: var(--cream);
  /* the site header is fixed, so the first section clears it itself */
  padding: 116px var(--pad) 52px;
}
.cl-wrap { max-width: 760px; margin: 0 auto; }

.cl-hero__eyebrow { color: var(--accent-soft); margin: 0 0 16px; }

.cl-hero__h {
  margin: 0;
  font-size: clamp(32px, 8vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--white);
}
.cl-hero__lede {
  margin: 20px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(242, 246, 238, 0.84);
}
.cl-hero__hint {
  margin: 22px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242, 246, 238, 0.6);
}

/* ---- the research stat, after carousel slide 2 --------------------------- */

.cl-stat {
  margin: 30px 0 0;
  padding: 24px 22px 22px;
  background: var(--cl-card);
  border-radius: 20px;
  color: var(--ink);
}
.cl-stat__eyebrow { color: var(--cl-yes); margin: 0 0 14px; font-size: 12px; }
.cl-stat__figure {
  margin: 0;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.cl-stat__sub {
  margin: 12px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--muted);
}
.cl-stat__slow {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 21px;
  color: var(--cl-no);
  margin-right: 4px;
}
.cl-stat__body {
  margin: 16px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}
.cl-stat__note {
  margin: 12px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- before you start ---------------------------------------------------- */

.cl-before {
  margin: 20px 0 0;
  padding: 18px 20px 20px;
  background: var(--card);
  border-radius: 16px;
  border-left: 4px solid var(--accent-mid);
}
.cl-before__label {
  margin: 0 0 6px;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-soft);
}
.cl-before__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--white);
}

/* ---- a check ------------------------------------------------------------- */

.cl-sec {
  background: var(--cream);
  /* room for the floating progress bar over the last card */
  padding: 44px var(--pad) calc(28px + var(--cl-bar-h));
}
.cl-sec:nth-of-type(even) { background: var(--tint); }

.cl-sec__head { margin: 0 0 24px; }
.cl-sec__eyebrow { color: var(--cl-yes); margin: 0 0 10px; font-size: 12px; }
.cl-sec__h {
  margin: 0;
  font-size: clamp(26px, 6.4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
}
.cl-sec__lede {
  margin: 12px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ---- one question -------------------------------------------------------- */

.cl-q {
  margin: 0 0 14px;
  padding: 18px 16px 16px;
  border: 1px solid var(--cl-card-line);
  border-radius: 18px;
  background: var(--cl-card);
  min-width: 0;
}
/* The question is a paragraph, not a <legend>: a legend is laid out on the
   fieldset border and escapes the top of the card, and the float workaround for
   that fights the two-column grid below. The radiogroup around the two inputs
   carries the grouping instead, labelled by this and described by the fix. */
.cl-q__legend { margin: 0 0 10px; }
.cl-q__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(46, 125, 66, 0.12);
  color: var(--cl-yes);
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 14px;
  vertical-align: 2px;
}
.cl-q__text {
  font-size: 17px;
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cl-q__fix {
  margin: 0 0 16px;
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--body);
}
.cl-q__fix b { font-weight: 700; color: var(--ink); }
.cl-q__link {
  color: #155C3A;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.cl-q__link:hover, .cl-q__link:focus-visible { color: var(--ink); }

/* ---- the answer control -------------------------------------------------- */

.cl-q__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cl-ans { display: block; cursor: pointer; }

/* The input stays in the layout and focusable — never display:none — so the
   radio group keeps its native keyboard behaviour and screen-reader semantics.
   Everything visible is the box beside it. */
.cl-ans__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cl-ans__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* comfortably past the 44px / 48dp guidance, with a thumb in mind */
  min-height: 54px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--body);
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* The indicator is a ring when unanswered and a tick or cross when chosen, so
   the state is never carried by colour alone. */
.cl-ans__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: none;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  color: currentColor;
  transition: border-color .18s ease, background .18s ease;
}
.cl-ans__icon svg { opacity: 0; transition: opacity .12s ease; }

.cl-ans__input:checked ~ .cl-ans__box { color: var(--white); border-color: transparent; }
.cl-ans__input:checked ~ .cl-ans__box .cl-ans__icon {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.18);
}
.cl-ans__input:checked ~ .cl-ans__box .cl-ans__icon svg { opacity: 1; }
.cl-ans__input:checked ~ .cl-ans__box .cl-ans__txt { font-weight: 700; }

.cl-ans--yes .cl-ans__input:checked ~ .cl-ans__box { background: var(--cl-yes); }
.cl-ans--no  .cl-ans__input:checked ~ .cl-ans__box { background: var(--cl-no); }

.cl-ans__input:focus-visible ~ .cl-ans__box {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .cl-ans__input:not(:checked) ~ .cl-ans__box:hover {
    border-color: var(--cl-yes);
    background: #FFFDFB;
  }
  .cl-ans--no .cl-ans__input:not(:checked) ~ .cl-ans__box:hover { border-color: var(--cl-no); }
}

/* a question that has been answered settles down a little */
.cl-q[data-answered] { border-color: rgba(46, 125, 66, 0.3); }
.cl-q[data-answered="no"] { border-color: rgba(194, 66, 42, 0.3); }

/* ---- section score ------------------------------------------------------- */

.cl-sec__score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 20px 0 0;
  padding: 16px 20px;
  background: var(--ink);
  border-radius: 14px;
}
.cl-sec__score-label {
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  color: rgba(242, 246, 238, 0.76);
}
.cl-sec__score-value {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--accent-soft);
  white-space: nowrap;
}

/* ---- result -------------------------------------------------------------- */

.cl-result {
  background: var(--ink);
  color: var(--cream);
  padding: 52px var(--pad) 64px;
  scroll-margin-top: 80px;
}
.cl-result__eyebrow { color: var(--accent-soft); margin: 0 0 14px; }
.cl-result__figure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.cl-result__num {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: clamp(60px, 18vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--white);
}
.cl-result__of {
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--accent-soft);
}
.cl-result__state {
  margin: 14px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(242, 246, 238, 0.6);
}
.cl-result__h {
  margin: 24px 0 0;
  font-size: clamp(19px, 5vw, 25px);
  line-height: 1.34;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--white);
}

.cl-result__breakdown { margin: 26px 0 0; }
.cl-result__breakdown p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(159, 220, 169, 0.2);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: rgba(242, 246, 238, 0.82);
}
.cl-result__breakdown p:last-child { border-bottom: 1px solid rgba(159, 220, 169, 0.2); }
.cl-result__breakdown b {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: var(--accent-soft);
  white-space: nowrap;
}

/* ---- the one call to action ---------------------------------------------- */

.cl-cta {
  margin: 30px 0 0;
  padding: 26px 22px;
  background: var(--cl-card);
  border-radius: 20px;
  color: var(--ink);
}
.cl-cta__eyebrow {
  margin: 0 0 12px;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cl-yes);
}
.cl-cta__h {
  margin: 0 0 22px;
  font-size: clamp(21px, 5.6vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.cl-cta__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cl-cta__btn { width: 100%; min-height: 54px; font-size: 16.5px; }
.cl-cta__alt {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  justify-content: center;
  color: #155C3A;
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cl-cta__alt:hover, .cl-cta__alt:focus-visible { color: var(--ink); }
.cl-cta__alt-meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.cl-result__dm {
  margin: 28px 0 0;
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--accent-soft);
}

.cl-result__reset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(159, 220, 169, 0.2);
}
.cl-reset {
  min-height: 44px;
  padding: 10px 20px;
  border: 1.5px solid rgba(159, 220, 169, 0.5);
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.cl-reset:hover { background: rgba(255, 255, 255, 0.1); }
.cl-reset:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.cl-reset__note {
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  color: rgba(242, 246, 238, 0.55);
}

/* ---- the floating progress bar ------------------------------------------- */

/* Fixed to the bottom rather than under the header: the site header is fixed
   with a height that changes at four breakpoints, so anything sticking below it
   would have to track that. The foot of the screen is also where the thumb is.
   It takes itself away once the result is on screen, so it never sits over the
   call to action. */
.cl-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgba(10, 31, 20, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid rgba(159, 220, 169, 0.22);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0);
  transition: transform .28s ease;
}
.cl-bar[hidden] { display: none; }
.cl-bar--away { transform: translateY(110%); }

.cl-bar__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  min-height: var(--cl-bar-h);
  padding: 12px var(--pad) 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cl-bar__track {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: rgba(159, 220, 169, 0.18);
}
.cl-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-mid);
  transition: width .25s ease;
}
.cl-bar__counts {
  margin: 0;
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  color: rgba(242, 246, 238, 0.86);
  min-width: 0;
}
.cl-bar__counts output { font-weight: 700; color: var(--white); }
.cl-bar__sep { padding: 0 6px; color: rgba(159, 220, 169, 0.5); }
.cl-bar__score { color: var(--accent-soft); }
.cl-bar__jump {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
}
.cl-bar__jump:hover { background: var(--white); color: var(--ink); }
.cl-bar__jump:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }

/* The footer's brand column ends in an "Apply for a homepage redesign" button.
   On every other page that is the page's call to action; here it is the second
   one in a row, a few hundred pixels under the checklist's own, with the same
   label and the same destination. Hidden so this page makes the offer once.

   Scoped to .cl-body, so the footer is untouched everywhere else. display:none
   rather than visibility, so it leaves the accessibility tree as well as the
   page and .ftr__brand's 22px flex gap closes behind it. Nothing else in the
   footer is affected — this is the only button inside it. */
.cl-body .ftr__brand .btn--accent { display: none; }

/* Once the result has scrolled past, the bar comes back — correct, since the
   score is then off screen and the jump is the way back to it — but it then
   landed over the last footer link, and the lifted cookie button landed over
   the copyright line. Both of those sit in the bottom 128px of the viewport
   (the bar is 66px tall; the button spans 88px to 128px above the edge), so the
   footer reserves 146px under its own content and clears both at every height.
   Spacing only: no footer content is changed or removed. */
.cl-body .ftr { padding-bottom: calc(var(--cl-bar-h) + 80px); }

/* consent.js pins its cookie-settings button bottom-left, and services.css
   already lifts it to 64px to clear the footer's Privacy/Terms row. This page
   puts a 66px bar at the same edge, so at 64px the button lands 3px inside it
   and covers the start of "0 / 15 answered" on a phone. Lifted again, above the
   bar — same convention as the services.css and journal.css rules, and the same
   limits: position only, scoped to this page by .cl-body, and consent.js, the
   banner, the stored choice and the settings dialog are all untouched. */
.cl-body .bw-cc-settings { bottom: calc(var(--cl-bar-h) + 22px) !important; }

/* ---- narrow phones ------------------------------------------------------- */

@media (max-width: 360px) {
  .cl-ans__box { gap: 7px; padding: 0 8px; font-size: 15.5px; }
  .cl-bar__sep, .cl-bar__score { display: none; }
  .cl-bar__jump { padding: 0 14px; }
  .cl-q { padding: 16px 13px 14px; }
  .cl-q__text { font-size: 16.5px; }
}

/* ---- from tablets up ----------------------------------------------------- */

@media (min-width: 700px) {
  .cl-hero { padding: 168px var(--pad) 72px; }
  .cl-hero__lede { font-size: 18.5px; }
  .cl-sec { padding: 68px var(--pad) calc(48px + var(--cl-bar-h)); }
  .cl-sec__lede { font-size: 17px; }
  .cl-result { padding: 76px var(--pad) 88px; }

  .cl-stat { padding: 30px 30px 28px; }
  .cl-stat__body { font-size: 16.5px; }
  .cl-before { padding: 22px 26px 24px; }
  .cl-before__text { font-size: 18px; }

  /* text on the left, the two answers held in a fixed column on the right */
  .cl-q {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    grid-template-rows: auto auto;
    column-gap: 26px;
    align-items: start;
    padding: 24px 26px;
  }
  .cl-q__legend { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
  .cl-q__fix { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .cl-q__answers { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cl-q__text { font-size: 18.5px; }
  .cl-q__fix { font-size: 15px; }

  .cl-cta { padding: 34px 34px 36px; }
  .cl-cta__actions { flex-direction: row; align-items: center; gap: 26px; }
  .cl-cta__btn { width: auto; }
}

@media (min-width: 1025px) {
  .cl-wrap { max-width: 860px; }
  .cl-bar__inner { max-width: 860px; }
  .cl-q { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* ---- motion, print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cl-ans__box, .cl-ans__icon, .cl-ans__icon svg,
  .cl-bar, .cl-bar__fill { transition: none; }
}

@media print {
  .cl-bar, .cl-reset, .cl-result__reset { display: none; }
  .cl-hero, .cl-result { background: var(--white); color: var(--ink); }
  .cl-hero__h, .cl-result__num, .cl-result__h, .cl-before__text { color: var(--ink); }
  .cl-q { break-inside: avoid; }
}