/* The skeleton every site is drawn on. ADR-0011.
 *
 * This is to the page what chrome.css is to the navbar: one design, painted
 * entirely through custom properties, so that forty-seven sites share the
 * layout the operator asked for without sharing a single colour, family,
 * weight or measure.
 *
 * `hellolendcloud.com` is the reference implementation, rebuilt from the
 * screenshots the operator produced, and what it settled is:
 *
 *   A PLATE IN MOST BANDS      a photograph carrying its own half of a row,
 *                              not one picture per page and not a texture
 *   ALTERNATING SIDES          picture right, then left, then right; no page
 *                              stacks every photograph down one edge
 *   ROOM                       --band between sections, 112px by default
 *   ONE ACCENT ON EVERY ACTION pills, fully rounded
 *   AN EYEBROW OVER EVERY HEAD so a scanner can see what a band is
 *   A CARD ON THE HERO PLATE   one fact, lifted off the photograph
 *
 * NOTHING HERE DECLARES A COLOUR OR A TYPEFACE. Every palette token below is
 * consumed and never defined, so a theme that forgets one gets a visibly
 * broken page rather than somebody else's blue -- ADR-0006's "a fallback that
 * exists will be used" is the one warning from that ADR this file has to
 * answer, and the answer is to have no fallback to reach for.
 * `check-distinct.mjs` names the missing token before it gets that far.
 *
 * WHAT A THEME MUST DECLARE, in its own :root:
 *
 *   ink ink-soft text muted          the four steps of type
 *   accent accent-deep accent-wash   the brand colour, its hover, its palest
 *   accent-line                      a hairline in the accent family
 *   good good-wash warn              the tick, its ground, the cost figure
 *   paper card tint                  the page, a raised object, a tinted band
 *   rule rule-firm                   the two hairlines
 *   ask-ink ask-accent               type and eyebrow on the dark apply band
 *   shadow                           an "r, g, b" triple, no parentheses
 *   display body                     the two families
 *
 * WHAT IT MAY OVERRIDE: everything with a default in the block below. The
 * measures are the skeleton and mostly should not move; --radius should,
 * because a square-cornered brand and a 20px-rounded one are a real
 * difference and it is one line.
 */

:root {
  --shell: 1200px;
  --edge: 24px;
  --gap: 64px;
  --band: 112px;
  --radius: 20px;
  --radius-sm: 14px;

  /* The display face's optical settings. A grotesque at 700 and a serif at
     600 want different tracking, and that is the whole of what a theme
     usually needs to say about its own type beyond naming it. */
  --display-weight: 700;
  --display-track: -0.03em;
  --body-size: 17px;
  --body-line: 1.65;

  /* The eyebrow. Fourteen of the forty-seven set their small labels in caps
     and the rest do not; that carried over from before ADR-0009 and it is
     kept, because it is a real difference and it costs two lines. */
  --eyebrow-case: uppercase;
  --eyebrow-track: 0.1em;
  --eyebrow-weight: 700;

  /* The ground the front door and every page head stand on. A token rather
     than a rule, so a theme whose signature is its own gradient -- Ascend's
     orange-to-gold, which is most of what that brand looks like -- declares
     it instead of out-specifying `.hero`. The default is the accent's palest
     wash falling to the paper. */
  --hero-bg: linear-gradient(170deg, var(--accent-wash) 0%, var(--paper) 58%);
  --head-bg: linear-gradient(170deg, var(--accent-wash) 0%, var(--paper) 70%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-deep);
}

p {
  margin: 0 0 16px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 40;
  background: var(--ink);
  color: var(--card);
  padding: 9px 15px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * THE SHELL AND THE BANDS
 * ------------------------------------------------------------------ */
.shell {
  width: min(100% - (var(--edge) * 2), var(--shell));
  margin-inline: auto;
}

.band {
  padding: var(--band) 0;
}

.band--tint {
  background: var(--tint);
}

.band--tight {
  padding: calc(var(--band) * 0.62) 0;
}

/* A band's own centred introduction, where the thing under it is a grid
   rather than a row and the words cannot sit beside it. */
.mid {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 72px;
}

.mid .h2 {
  margin-bottom: 16px;
}

.mid .lede {
  margin: 0 auto;
  max-width: 46ch;
}

/* ------------------------------------------------------------------ *
 * TYPE
 * ------------------------------------------------------------------ */
.h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  font-weight: var(--display-weight);
  line-height: 1.04;
  letter-spacing: var(--display-track);
  color: var(--ink);
  margin: 0 0 22px;
}

/* The second line of the headline, in the accent, on its own line. One piece
   of colour in the type and no more. */
.h1 em {
  font-style: normal;
  color: var(--accent);
  display: block;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.85rem);
  font-weight: var(--display-weight);
  line-height: 1.1;
  letter-spacing: var(--display-track);
  color: var(--ink);
  margin: 0 0 20px;
}

.h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: var(--display-weight);
  line-height: 1.25;
  letter-spacing: calc(var(--display-track) * 0.6);
  color: var(--ink);
  margin: 0 0 10px;
}

.lede {
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--text);
  margin: 0 0 28px;
  max-width: 56ch;
}

.note {
  font-size: 0.93rem;
  color: var(--muted);
  margin: 18px 0 0;
}

.prose {
  max-width: 62ch;
}

.prose p {
  margin: 0 0 18px;
}

/* The eyebrow over every head: a short rule, then the label. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: var(--eyebrow-case);
  color: var(--accent);
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.eyebrow--mid {
  justify-content: center;
}
.eyebrow--mid::before {
  display: none;
}

/* ------------------------------------------------------------------ *
 * BUTTONS -- pills, one accent, on every action on the site.
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 17px 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--go {
  background: var(--accent);
  color: var(--card);
}
.btn--go:hover {
  background: var(--accent-deep);
}

.btn--ink {
  background: var(--ink);
  color: var(--card);
}
.btn--ink:hover {
  background: var(--accent-deep);
}

.btn--line {
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule-firm);
}
.btn--line:hover {
  border-color: var(--ink);
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * THE HERO
 * ------------------------------------------------------------------ */
.hero {
  background: var(--hero-bg);
  padding: 84px 0 var(--band);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* The pill over the headline. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--accent-line);
  color: var(--accent-deep);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  margin: 0 0 26px;
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* The claims, two up, each with a tick. */
.ticks {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
}

.ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.99rem;
  color: var(--ink-soft);
}

.ticks li::before {
  content: "\2713";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--good-wash);
  color: var(--good);
  font-size: 0.78rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

/* Where the ticks are the section rather than a hero aside. */
.ticks--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.ticks--wide li {
  align-items: flex-start;
}

.ticks--one {
  grid-template-columns: 1fr;
}

/* ------------------------------------------------------------------ *
 * THE PLATE -- a photograph carrying half a row.
 * ------------------------------------------------------------------ */
.shot {
  position: relative;
  margin: 0;
}

.shot img {
  width: 100%;
  border-radius: var(--radius);
}

/* One fact, lifted off the photograph onto a card. The most distinctive
   object in the reference and what stops a hero photograph being wallpaper;
   it wants the subject right of centre and the bottom left quiet, which is
   a note for photos.mjs and not for here. */
.shot__card {
  position: absolute;
  left: 22px;
  bottom: 22px;
  right: 22px;
  max-width: 330px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(var(--shadow), 0.16);
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.shot__icon {
  width: 38px;
  height: 38px;
  border-radius: calc(var(--radius-sm) * 0.72);
  background: var(--good-wash);
  color: var(--good);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
}

.shot__fig {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
}

.shot__say {
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * THE FIGURES -- one bordered card, divided.
 * ------------------------------------------------------------------ */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(var(--shadow), 0.05);
  overflow: hidden;
}

.figures > div {
  padding: 34px 24px;
  text-align: center;
  border-left: 1px solid var(--rule);
}

.figures > div:first-child {
  border-left: 0;
}

.figures b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: var(--display-weight);
  line-height: 1.1;
  letter-spacing: var(--display-track);
  color: var(--accent);
}

.figures span {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* .figures--three is for a brand that publishes three network figures rather
   than four. Nothing else changes. */
.figures--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ------------------------------------------------------------------ *
 * THE ALTERNATING ROW -- the spine of the whole page.
 * ------------------------------------------------------------------ */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* Every other row turns over. page.mjs counts them, so this class is never
   written by hand and two rows can never land on the same side. */
.row--flip .row__say {
  order: 2;
}

.row__say {
  min-width: 0;
}

.row__say .lede:last-child,
.row__say > :last-child {
  margin-bottom: 0;
}

.row + .row {
  margin-top: var(--band);
}

/* The step number over a row that is one stage of a process. */
.step__n {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: var(--eyebrow-case);
  color: var(--accent);
  margin: 0 0 12px;
}

/* ------------------------------------------------------------------ *
 * THE PROGRAMME CARDS -- a plate, the words, the figures under them.
 * ------------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.card:hover {
  box-shadow: 0 16px 40px rgba(var(--shadow), 0.1);
  transform: translateY(-3px);
}

.card__shot {
  margin: 0;
}

.card__shot img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.card__body {
  padding: 26px 26px 10px;
  flex: 1;
}

.card__body h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: var(--display-weight);
  letter-spacing: calc(var(--display-track) * 0.5);
  color: var(--ink);
  margin: 0 0 9px;
}

.card__body h3 a {
  color: inherit;
  text-decoration: none;
}
.card__body h3 a:hover {
  color: var(--accent-deep);
}

.card__body p {
  font-size: 0.97rem;
  color: var(--text);
  margin: 0;
}

/* Label left, value right, a hairline over each. */
.spec {
  margin: 0;
  padding: 0 26px 22px;
}

.spec div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}

.spec dt {
  font-size: 0.86rem;
  color: var(--muted);
}

.spec dd {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.spec dd.is-cost {
  color: var(--warn);
}

.card__more {
  padding: 0 26px 26px;
  margin: 0;
}

.card__more a {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
}
.card__more a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * STATED PLAINLY -- a two-column list of statements.
 * ------------------------------------------------------------------ */
.rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 44px;
  margin: 0;
}

.rows > div {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}

.rows dt {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  font-size: 1.04rem;
}

.rows dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* ------------------------------------------------------------------ *
 * THE QUESTIONS
 * ------------------------------------------------------------------ */
.faq {
  display: grid;
  gap: 0;
  max-width: 60rem;
}

.faq details {
  border-top: 1px solid var(--rule);
  padding: 22px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin: 14px 0 0;
  max-width: 68ch;
}

/* ------------------------------------------------------------------ *
 * THE ASK -- the application, on the ink.
 * ------------------------------------------------------------------ */
.ask {
  background: var(--ink);
  color: var(--card);
  padding: var(--band) 0;
}

.ask .h2 {
  color: var(--card);
}

.ask .lede,
.ask__aside {
  color: var(--ask-ink);
}

.ask .eyebrow {
  color: var(--ask-accent);
}
.ask .eyebrow::before {
  background: var(--ask-accent);
}

.ask__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--gap);
  align-items: start;
}

.ask__aside {
  font-size: 0.95rem;
  margin: 24px 0 0;
}

.ask__aside a {
  color: var(--card);
  font-weight: 700;
}

/* The application, and never a scrollbar inside it: a scrollbar in the form
   is a second viewport with the submit button at the bottom of it. See
   frame.mjs and tools/check-form-fit.mjs. */
.frame {
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.frame iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ *
 * THE HEAD -- what an inner page opens with.
 *
 * The first cut of this was one thin strip used unchanged by every page, and
 * the operator's verdict was that no page "invokes a feeling of a new page
 * that represents its destination". A head now carries whatever that page has
 * to announce itself with -- a photograph, its figure block, or the
 * application itself -- and .head--split is the two-column form of it.
 * ------------------------------------------------------------------ */
.head {
  background: var(--head-bg);
  padding: 76px 0 72px;
}

.head--split {
  padding-bottom: 84px;
}

.head__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}

/* The apply page. The form IS the page, so it takes the wider column and the
   words take the narrower one -- the reverse of every other split here. */
.head--form .head__grid {
  grid-template-columns: 0.92fr 1.08fr;
  align-items: start;
}

.head--form .frame {
  box-shadow: 0 20px 50px rgba(var(--shadow), 0.14);
}

.head .h1 {
  max-width: 20ch;
}

.head .lede {
  margin-bottom: 0;
}

.head--split .lede {
  margin-bottom: 26px;
}

.head--form .ticks {
  margin-bottom: 18px;
}

.head .note {
  margin-top: 0;
}

/* A programme page's head: the figures somebody came to read, before the
   prose rather than after it. */
.head__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 26px 0 0;
}

.head__figs div {
  padding: 13px 0;
  border-top: 1px solid var(--rule-firm);
}

.head__figs dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

.head__figs dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: var(--display-weight);
  color: var(--ink);
}

/* ------------------------------------------------------------------ *
 * NARROW
 * ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  :root {
    --gap: 44px;
    --band: 84px;
  }

  .cards,
  .figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .figures > div:nth-child(3) {
    border-left: 0;
  }

  .figures > div:nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }

  .figures--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ask__grid,
  .head__grid,
  .head--form .head__grid {
    grid-template-columns: 1fr;
  }

  .ticks--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --band: 72px;
    --edge: 20px;
  }

  body {
    font-size: calc(var(--body-size) - 1px);
  }

  /* The picture goes ABOVE the words on a phone, on every row and in both
     directions, so the page reads the same way down a single column. */
  .hero__grid,
  .row {
    grid-template-columns: 1fr;
  }

  .row--flip .row__say {
    order: 0;
  }

  .hero__grid .shot,
  .row .shot {
    order: -1;
    margin-bottom: 30px;
  }

  .hero {
    padding-top: 56px;
  }

  .cards,
  .figures,
  .figures--three,
  .rows,
  .head__figs,
  .ticks,
  .ticks--wide {
    grid-template-columns: 1fr;
  }

  /* On the apply page the form must NOT drop below the words -- it is the
     page. It is the one split here whose aside stays first on a phone. */
  .head--form .head__grid .frame {
    order: -1;
    margin-bottom: 28px;
  }

  .head--split .shot {
    order: -1;
    margin-bottom: 28px;
  }

  .shot__card {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }

  .mid {
    margin-bottom: 48px;
  }
}