/* The landing page (index.html). Its own file, so the CSP can stop inline script and style elements. Rules: DESIGN.md, «Landingssiden». */
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; overflow-x: clip; }
html:has(dialog[open]) { overflow: hidden; }
/* hidden always wins, also over components that set their own display. */
[hidden] { display: none !important; }

/* ---------- The hero: the flower in the ring of food, the name, one line and the button ---------- */
.l-hero {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: var(--sp-5);
  padding: max(var(--sp-6), env(safe-area-inset-top)) var(--gutter) var(--sp-4); text-align: center;
  --ring: min(84vw, 44dvh, 440px);
}
.l-stage { position: relative; width: var(--ring); height: var(--ring); }
.l-ring { position: absolute; inset: 0; }
.l-ring .f-ill-ring__turn { animation: f-ill-turn 5.5s ease-in-out infinite alternate; }
.l-ring.f-ill-play .f-ill-ring__at:not(.f-ill-ring__center) { animation: l-pop 520ms var(--ease) calc(var(--i) * 55ms) both; }
.l-logo {
  position: absolute; left: 50%; top: 50%; height: 44%; aspect-ratio: 436 / 740; translate: -50% -50%;
  color: var(--ink); transition: color 480ms var(--ease);
}
.l-logo svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 45.5% 100%;
  animation: l-breeze 8s ease-in-out 4s infinite; }
.l-text { display: grid; justify-items: center; gap: var(--sp-3); max-width: 34ch; }
.l-word {
  margin: 0; color: var(--heading); font: var(--mark-weight) clamp(44px, 6vw + 22px, 68px)/1 var(--mark-font);
  letter-spacing: var(--mark-tracking); text-transform: var(--mark-case); transition: color 480ms var(--ease);
}
.l-lead { color: var(--heading); font: var(--fw-display) clamp(22px, 1.2vw + 17px, 28px)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-display); text-wrap: balance; }
.l-sub { color: var(--muted); text-wrap: balance; }
/* The order the words rise in after the intro. */
.l-lead { --d: 0; }
.l-sub { --d: 1; }
.l-foot { --d: 2; }
.l-page-foot { --d: 3; }
.l-act { display: grid; justify-items: center; gap: var(--sp-3); min-height: 104px; }
.l-cta {
  min-height: 56px; padding: 0 30px; border: 0; border-radius: var(--r-pill); background: var(--next-bg); color: var(--next-ink);
  font: var(--fw-strong) var(--fs-body)/1.2 var(--font-text); cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.l-cta:hover { background: var(--next-stamp); }
.l-cta:active { transform: scale(.97); }
.l-foot { color: var(--muted); font-size: var(--fs-foot); }
.l-done { display: grid; justify-items: center; gap: var(--sp-2); animation: l-rise 420ms var(--ease) both; }
.l-done b { color: var(--heading); font-size: var(--fs-h3); font-weight: var(--fw-strong); }
.l-done p { color: var(--muted); max-width: 34ch; overflow-wrap: anywhere; }
/* Logged in: the first letter in the corner opens the profile. */
.l-me { position: fixed; z-index: 2; top: max(var(--sp-3), env(safe-area-inset-top)); right: max(var(--sp-3), env(safe-area-inset-right));
  border: 0; padding: 0; cursor: pointer; }
/* A quiet line under the buttons when you are in: questions, wishes and feedback go to hei@florir.no. The whole line is the tap target. */
.l-feedback { display: block; max-width: 34ch; padding: var(--sp-2) 0; color: var(--muted); font-size: var(--fs-sub); text-align: center; text-decoration: none; }
.l-feedback span { color: var(--heading); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.l-feedback:active { opacity: .6; }
.l-page-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 0 var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom)); color: var(--muted); font-size: var(--fs-foot); }
.l-page-foot .f-link { min-height: var(--tap); font-weight: 400; color: var(--muted); }

/* A phone on its side: the ring to the left, the words to the right. */
@media (orientation: landscape) and (max-height: 540px) {
  .l-hero { grid-template-columns: auto minmax(0, 36ch); column-gap: var(--sp-8); --ring: min(72dvh, 42vw); }
  .l-stage { grid-row: span 3; }
  .l-text, .l-act { justify-self: start; justify-items: start; text-align: left; }
  .l-done { justify-items: start; text-align: left; }
  .l-feedback { text-align: left; }
}

/* ---------- The intro: the next-step color blooms from the flower, the flower grows, and the color shrinks into the button ----------
   .l-butter is the name from when that color was butter. It is --next-bg of the palette, dark green since 12.10. */
.l-butter { position: fixed; inset: 0; z-index: 0; background: var(--next-bg); clip-path: circle(0 at 50% 40%); pointer-events: none; }
.is-intro .l-logo, .is-intro .l-word { color: var(--next-ink); }
.is-intro :is(.l-ring, .l-lead, .l-sub, .l-cta, .l-foot, .l-page-foot, .l-me, .l-done > :not(.l-cta)) { opacity: 0; }
.is-intro .l-logo svg { visibility: hidden; }
.is-intro .l-word { opacity: 0; }
.is-grow .l-logo svg { visibility: visible; animation: f-splash-sway 900ms ease-in-out 620ms both; }
.is-grow .l-word { animation: f-splash-rise 420ms var(--ease) 1000ms both; }
.is-grow .l-logo :is(.st, .br) { stroke-dasharray: 1 2; }
.is-grow .l-logo .st { animation: f-splash-draw 420ms cubic-bezier(.4, 0, .2, 1) 40ms both; }
.is-grow .l-logo .lf-r { animation: f-splash-fold-r 540ms cubic-bezier(.34, 1.56, .64, 1) 180ms both; }
.is-grow .l-logo .lf-l { animation: f-splash-fold-l 540ms cubic-bezier(.34, 1.56, .64, 1) 230ms both; }
.is-grow .l-logo .br { animation: f-splash-draw 280ms cubic-bezier(.4, 0, .2, 1) 280ms both; }
:is(.is-grow, .is-bloom) .l-logo .bc { animation: f-splash-pop 380ms cubic-bezier(.34, 1.56, .64, 1) 460ms both; }
:is(.is-grow, .is-bloom) .l-logo .ce { animation: f-splash-pop 420ms cubic-bezier(.34, 1.56, .64, 1) 360ms both; }
:is(.is-grow, .is-bloom) .l-logo :is(.pe, .bp) { animation: f-splash-unfold 560ms cubic-bezier(.34, 1.4, .64, 1) calc(440ms + var(--i) * 35ms) both; }
:is(.is-grow, .is-bloom) .l-logo .bp { animation-delay: calc(520ms + var(--i) * 35ms); }
.is-bloom .l-logo :is(.pe, .bp, .bc, .ce) { animation-delay: calc(var(--i, 0) * 35ms); }
.is-show :is(.l-lead, .l-sub, .l-foot, .l-page-foot, .l-me) { animation: l-rise 480ms var(--ease) calc(var(--d, 0) * 70ms) both; }
.is-show .l-cta { animation: l-label 300ms linear 380ms both; }
@keyframes l-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes l-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes l-label { from { color: transparent; } }
/* Now and then a breeze: the flower leans and comes back. */
@keyframes l-breeze { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-2.5deg); } 91% { transform: rotate(1.2deg); } }

/* ---------- The sheet: from the bottom on a phone, a card in the middle on a bigger screen ---------- */
.l-sheet {
  box-sizing: border-box; width: 100%; max-width: 100%; margin: auto 0 0; padding: 0 0 max(var(--sp-4), env(safe-area-inset-bottom));
  max-height: calc(100dvh - env(safe-area-inset-top) - 16px); overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface); color: var(--ink);
  box-shadow: 0 -8px 32px rgb(0 0 0 / 18%);
}
.l-sheet[open] { animation: l-up 300ms var(--ease) both; }
.l-sheet::backdrop { background: rgb(0 0 0 / 40%); }
.l-sheet__head { display: flex; justify-content: flex-end; padding: var(--sp-2) var(--sp-2) 0; }
.l-step { display: grid; gap: var(--sp-4); padding: 0 var(--sp-6) var(--sp-2); animation: l-rise 320ms var(--ease) both; }
.l-step h2 { margin-top: calc(var(--sp-2) * -1); color: var(--heading); font: var(--fw-display) var(--fs-title)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-display); text-wrap: balance; }
.l-step p { color: var(--muted); }
.l-step .l-intro { display: grid; gap: var(--sp-2); }
.l-sso { display: grid; gap: var(--sp-2); }
.l-sso button {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: var(--r-pill);
  font: 500 var(--fs-body)/1 var(--font-text);
}
.l-sso svg { width: 20px; height: 20px; flex: none; }
/* Apple and Google ask for their own colors on their buttons (Apple HIG, Google's sign-in branding). */
.l-apple { border: 0; background: light-dark(#000, #FFF); color: light-dark(#FFF, #000); }
.l-apple svg { fill: currentColor; }
.l-google { border: 1px solid light-dark(#747775, #8E918F); background: light-dark(#FFF, #131314); color: light-dark(#1F1F1F, #E3E3E3); }
.l-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-foot); }
.l-or::before, .l-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.l-form { display: grid; gap: var(--sp-3); }
.l-label { color: var(--heading); font-size: var(--fs-sub); font-weight: var(--fw-strong); }
.l-input { border-radius: var(--r-pill); padding: 0 20px; }
.l-err { color: var(--error); font-size: var(--fs-sub); }
.l-err:empty { display: none; }
.l-kicker { color: var(--muted); font-weight: var(--fw-strong); }
.l-code { text-align: center; font-size: 24px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
/* Cloudflare's robot check. Empty unless it needs a tap, then it shows under the step. */
.l-robot { padding: 0 var(--sp-6); }
.l-robot:empty { display: none; }
.l-fine { font-size: var(--fs-foot); }
.l-fine .f-link { min-height: 0; padding: 0; font-weight: 400; color: inherit; }
.l-btn { min-height: 52px; }
.l-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.l-check { align-items: flex-start; min-height: 0; padding: var(--sp-1) 0; }
.l-check input { margin-top: 1px; }
.l-check input:checked ~ span { color: inherit; text-decoration: none; }
:is(.l-step, .l-prof) .f-seg { background: var(--bg); }
.l-hint { font-size: var(--fs-sub); }
.l-actions { display: grid; gap: var(--sp-1); }
.l-legal { display: grid; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-4); }
.l-legal h2 { margin-top: calc(var(--sp-2) * -1); font: var(--fw-display) var(--fs-title)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); }
.l-legal p { color: var(--muted); }
/* The profile: the e-mail at the top, the questions that fold out, and what is always there under them. */
.l-prof { display: grid; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-4); }
.l-prof .f-me { margin-top: 0; }
.l-prof .f-h3 { overflow-wrap: anywhere; }
.l-prof > p { color: var(--muted); }
.l-status { min-height: 18px; }
.l-confirm { display: grid; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-card); background: var(--bg); }
@keyframes l-up { from { transform: translateY(32px); opacity: 0; } }
@media (min-width: 700px) {
  .l-sheet { width: min(440px, calc(100% - 48px)); margin: auto; padding-bottom: var(--sp-4); border-radius: var(--r-card); box-shadow: 0 24px 64px rgb(0 0 0 / 22%); }
}

@media (prefers-reduced-motion: reduce) {
  .l-ring .f-ill-ring__turn, .l-logo svg { animation: none; }
  .l-ring .f-ill-ring__at:not(.f-ill-ring__center), .l-sheet[open], .l-step, .l-done { animation-duration: 1ms; animation-delay: 0ms; }
  .is-bloom .l-logo *, .is-show :is(.l-lead, .l-sub, .l-foot, .l-page-foot, .l-me) { animation: none !important; }
}

/* Testbruker-arket er neste-steg-kortet (T3): tittelen i visningsfonten, teksten i kortets dempede farge */
.l-step .f-next .f-next__title { margin: 0; color: var(--next-ink); font: var(--fw-display) 26px/31px var(--font-display); letter-spacing: var(--tracking-display); }
.l-step .f-next p, .l-step .f-next .f-label { color: var(--next-muted); }