/* ==========================================================================
   Life and Loss — splash page
   Recreated from design_handoff_lifeandloss_splash/splash-reference.dc.html.
   Token values are the approved ones in that folder's tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, so the page introduces no third-party processor and
   sets no third-party cookie (brief §9). Both families are open-licensed:
   Hanken Grotesk and Atkinson Hyperlegible are under the SIL Open Font
   Licence 1.1. See docs/PROCESSORS.md.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900; /* variable font: one file covers 400 and 700 */
  font-display: swap;
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Approved design tokens
   -------------------------------------------------------------------------- */

:root {
  --ll-ink: #20262a;
  --ll-forest: #1d4d40;
  --ll-poppy: #ce4b33;
  --ll-slate: #44525a;
  --ll-stone: #efeadf;
  --ll-white: #ffffff;
  --ll-muted: #5b665f;
  --ll-border: #e0dac9;
  --ll-poppy-soft: #f0a28e; /* reversed contexts only */

  --ll-forest-hover: #16382f;
  --ll-body-text: #3a423d;
  --ll-on-forest: #e6ede8;
  --ll-company: #8a8474;

  --ll-success-text: #1d4d40;
  --ll-success-bg: #eef3ee;
  --ll-success-border: #c5d6c9;
  --ll-error-text: #8f3a2a;
  --ll-error-bg: #faf0ee;
  --ll-error-border: #e4c4bb;

  --ll-font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --ll-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;

  --ll-radius-card: 10px;
  --ll-radius-button: 7px;
  --ll-radius-input: 6px;
  --ll-touch-min: 48px;
  --ll-max-content: 860px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ll-stone);
  color: var(--ll-ink);
  font-family: var(--ll-font-body);
  /* Stops a long unbroken address forcing a horizontal scrollbar at 320px. */
  overflow-wrap: break-word;
}

a {
  color: var(--ll-forest);
}

a:hover {
  color: var(--ll-poppy);
}

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--ll-poppy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.ll-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vh, 64px) 20px 40px;
  /* Respect the notch and the home indicator on modern phones (brief §7). */
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.ll-column {
  width: 100%;
  max-width: var(--ll-max-content);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Logo lockup and endorsement
   -------------------------------------------------------------------------- */

.ll-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ll-lockup__mark {
  flex: none;
}

.ll-lockup__word {
  font: 700 clamp(26px, 4.5vw, 33px) var(--ll-font-display);
  color: var(--ll-ink);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Poppy "and" — only ever rendered at 26px and above, well clear of the
   11px floor the brief sets for this treatment. */
.ll-lockup__and {
  color: var(--ll-poppy);
}

/* 16px rather than the original 14px: the Form and Endorsement brief asks for
   slightly greater legibility while keeping this clearly secondary to the
   lockup, which the weight, colour and size relationship still do. */
.ll-endorsement {
  font: 400 16px var(--ll-font-display);
  color: var(--ll-muted);
  letter-spacing: 0.01em;
  margin: 10px 0 0;
}

/* --------------------------------------------------------------------------
   Heading and introduction
   -------------------------------------------------------------------------- */

.ll-heading {
  font: 700 clamp(32px, 4.6vw, 46px) / 1.15 var(--ll-font-display);
  color: var(--ll-ink);
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 760px;
  margin: clamp(28px, 5vh, 44px) 0 0;
  text-wrap: balance;
}

.ll-intro {
  font: 400 clamp(18px, 2vw, 20px) / 1.6 var(--ll-font-body);
  color: var(--ll-body-text);
  text-align: center;
  max-width: 640px;
  margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   Settling line

   Approved as a one-time flourish: it moves from disruption to steadiness,
   ends level, and ends at a Poppy point. It never loops, and it is switched
   off entirely under prefers-reduced-motion (brief §7). The page is complete
   without it — the static path is the default and the animation only ever
   reveals what is already there.
   -------------------------------------------------------------------------- */

.ll-settling-line {
  margin: clamp(24px, 4vh, 36px) 0;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ll-settling-line__path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: ll-settle 1100ms ease-out forwards;
  }

  .ll-settling-line__dot {
    opacity: 0;
    animation: ll-settle-dot 320ms ease-out 950ms forwards;
  }
}

@keyframes ll-settle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ll-settle-dot {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.ll-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

.ll-card {
  border-radius: var(--ll-radius-card);
}

/* Immediate support panel */

.ll-card--support {
  flex: 1 1 300px;
  background: var(--ll-forest);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  /* The two cards are equal height and the form card is the taller of the two
     now that it carries the optional fields. Keep the panel's text grouped at
     the top, level with the form heading, and let only the telephone button
     take up the slack at the bottom. Centring left a void above the heading;
     space-between pulled the heading away from its own copy. */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
}

.ll-card--support .ll-phone {
  margin-top: auto;
}

.ll-support__heading {
  font: 700 clamp(19px, 2.4vw, 23px) / 1.3 var(--ll-font-display);
  color: var(--ll-white);
  margin: 0;
  text-wrap: balance;
}

.ll-support__text {
  font: 400 16px / 1.55 var(--ll-font-body);
  color: var(--ll-on-forest);
  margin: 0;
  max-width: 52ch;
}

.ll-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: var(--ll-touch-min);
  background: var(--ll-white);
  color: var(--ll-forest);
  font: 700 20px var(--ll-font-display);
  text-decoration: none;
  border-radius: var(--ll-radius-button);
  padding: 10px 24px;
  margin-top: 2px;
  text-align: center;
}

.ll-phone:hover {
  background: var(--ll-stone);
  color: var(--ll-forest);
}

/* Launch notification form */

.ll-card--form {
  flex: 1 1 340px;
  background: var(--ll-white);
  border: 1px solid var(--ll-border);
  padding: 28px;
}

.ll-form__heading {
  font: 700 clamp(18px, 2.2vw, 21px) / 1.3 var(--ll-font-display);
  color: var(--ll-ink);
  margin: 0;
}

.ll-form__supporting {
  font: 400 16px / 1.55 var(--ll-font-body);
  color: var(--ll-body-text);
  margin: 8px 0 18px;
}

.ll-form__label {
  display: block;
  font: 700 16px var(--ll-font-body);
  color: var(--ll-ink);
  margin-bottom: 6px;
}

/* The two optional fields that follow the email address. "optional" is in the
   visible label text, so the distinction is never carried by colour alone. */
.ll-form__label + .ll-form__input + .ll-form__label {
  margin-top: 14px;
}

.ll-form__input {
  display: block;
  width: 100%;
  min-height: var(--ll-touch-min);
  font: 400 16px var(--ll-font-body);
  color: var(--ll-ink);
  background: var(--ll-white);
  border: 1.5px solid var(--ll-slate);
  border-radius: var(--ll-radius-input);
  padding: 10px 14px;
}

.ll-form__input[aria-invalid='true'] {
  border-color: var(--ll-error-text);
  border-width: 2px;
}

.ll-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 4px 0;
  cursor: pointer;
}

.ll-consent__box {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--ll-forest);
  flex: none;
}

.ll-consent__text {
  font: 400 14px / 1.55 var(--ll-font-body);
  color: var(--ll-body-text);
}

/* Honeypot — off-screen rather than display:none, which automated clients
   are more likely to skip. Removed from the tab order in the markup. */
.ll-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ll-submit {
  margin-top: 16px;
  min-height: var(--ll-touch-min);
  width: 100%;
  background: var(--ll-forest);
  color: var(--ll-white);
  font: 700 17px var(--ll-font-display);
  border: none;
  border-radius: var(--ll-radius-button);
  padding: 10px 24px;
  cursor: pointer;
}

.ll-submit:hover {
  background: var(--ll-forest-hover);
}

.ll-submit[aria-disabled='true'] {
  opacity: 0.75;
  cursor: progress;
}

/* Status messages — the symbol and the wording carry the meaning, so colour
   is never the only signal (brief §12.11). */

.ll-message {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font: 400 15px / 1.5 var(--ll-font-body);
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--ll-radius-input);
  border: 1px solid;
}

.ll-message__prefix {
  flex: none;
}

/* Focused programmatically after a no-JavaScript submission; it is not a
   keyboard tab stop, so it needs no visible ring of its own. */
.ll-message:focus {
  outline: none;
}

.ll-message:focus-visible {
  outline: 3px solid var(--ll-poppy);
  outline-offset: 2px;
}

.ll-message--ok {
  color: var(--ll-success-text);
  background: var(--ll-success-bg);
  border-color: var(--ll-success-border);
}

.ll-message--problem {
  color: var(--ll-error-text);
  background: var(--ll-error-bg);
  border-color: var(--ll-error-border);
}

.ll-form__jit {
  font: 400 14px / 1.5 var(--ll-font-body);
  color: var(--ll-muted);
  margin: 12px 0 0;
}

.ll-form__jit a {
  color: var(--ll-forest);
}

/* --------------------------------------------------------------------------
   Direct contact and privacy footer
   -------------------------------------------------------------------------- */

.ll-contact {
  font: 400 16px / 1.6 var(--ll-font-body);
  color: var(--ll-body-text);
  text-align: center;
  margin: clamp(28px, 5vh, 40px) 0 0;
}

.ll-contact a {
  color: var(--ll-forest);
  font-weight: 700;
}

.ll-privacy {
  width: 100%;
  border-top: 1px solid var(--ll-border);
  margin-top: clamp(28px, 5vh, 44px);
  padding-top: 22px;
}

.ll-privacy__label {
  font: 700 14px var(--ll-font-display);
  color: var(--ll-ink);
  margin: 0 0 8px;
}

.ll-privacy__summary-text {
  font: 400 14px / 1.65 var(--ll-font-body);
  color: var(--ll-muted);
  margin: 0;
  max-width: 820px;
}

.ll-privacy__details {
  margin-top: 14px;
  max-width: 820px;
}

.ll-privacy__summary {
  font: 700 14px var(--ll-font-body);
  color: var(--ll-forest);
  cursor: pointer;
  /* Keeps the disclosure control at a comfortable target size. */
  min-height: 44px;
  display: flex;
  align-items: center;
}

.ll-privacy__summary:hover {
  color: var(--ll-poppy);
}

.ll-privacy__body {
  font: 400 14px / 1.65 var(--ll-font-body);
  color: var(--ll-muted);
}

.ll-privacy__body h3 {
  font: 700 14px var(--ll-font-display);
  color: var(--ll-ink);
  margin: 18px 0 6px;
}

.ll-privacy__body p,
.ll-privacy__body ul {
  margin: 0 0 10px;
}

.ll-privacy__body ul {
  padding-left: 20px;
}

.ll-privacy__body li {
  margin-bottom: 6px;
}

.ll-privacy__company {
  font: 400 13px var(--ll-font-body);
  color: var(--ll-company);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   Small screens

   Single column, stacked field and button, and a tighter vertical rhythm so
   the support telephone number comes into view as early as the approved
   content order allows (brief §7, Mobile).
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .ll-page {
    padding-top: clamp(20px, 4vh, 32px);
  }

  .ll-heading {
    margin-top: clamp(20px, 3.5vh, 32px);
  }

  .ll-intro {
    margin-top: 14px;
  }

  .ll-settling-line {
    margin: clamp(18px, 3vh, 26px) 0;
  }

  .ll-card--support {
    padding: 24px 22px;
    gap: 12px;
  }

  /* On mobile the telephone button is lifted to sit directly under the
     heading, so it lands inside the first screen. Below 600px the approved
     order (heading, description, pathway, button) put it around 900px down —
     roughly 90px past the fold on a 375x812 handset — which defeated the
     point of the panel. Authorised by Jason Ghous, 4 August 2026; it
     supersedes the "button beneath the explanatory text" line in the Green
     Support Box brief for this breakpoint only.

     Only `order` changes, not the markup, so the reading order stays
     heading -> description -> pathway -> button. The card holds exactly one
     focusable element, so the tab order is unaffected. */
  .ll-support__heading {
    order: 1;
  }

  .ll-phone {
    order: 2;
    margin-top: 2px;
  }

  .ll-support__text {
    order: 3;
  }

  .ll-card--form {
    padding: 24px 22px;
  }
}

@media (max-width: 360px) {
  .ll-card--support,
  .ll-card--form {
    padding: 20px 18px;
  }
}

/* Windows high-contrast mode: make sure the cards keep a visible edge. */
@media (forced-colors: active) {
  .ll-card,
  .ll-phone,
  .ll-submit,
  .ll-message {
    border: 1px solid CanvasText;
  }
}