/* ==========================================================================
   Hungry — Funnel design system

   Not a wireframe kit. These are the landing page's own tokens, type
   primitives and button system, lifted so the funnel and hungry-uae.com read
   as one product. If a value here disagrees with the landing page, the landing
   page wins and this file is the bug.

   Layout rule inherited from the landing page: space INSIDE a component is
   always smaller than the space AROUND it. That single rule is most of what
   stops a screen reading as dense — which matters more here than anywhere,
   because these screens ask people to do something.
   ========================================================================== */

@font-face {
  font-family: 'Recoleta';
  src: url('../../assets/fonts/Recoleta-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap
}

@font-face {
  font-family: 'Recoleta';
  src: url('../../assets/fonts/Recoleta-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap
}

@font-face {
  font-family: 'Recoleta';
  src: url('../../assets/fonts/Recoleta-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap
}

@font-face {
  font-family: 'Recoleta';
  src: url('../../assets/fonts/Recoleta-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap
}

:root {
  /* Canonical palette */
  --vanilla: #F5F3E6;
  --ube: #371379;
  --candy: #F8A6FF;
  --kale: #2D4130;
  --dew: #47E569;
  --charcoal: #060808;

  /* Derived */
  --ube-deep: #2A0E5D;
  --ube-mid: #4A1A9E;
  --ube-light: #EEE9F8;
  --ube-border: rgba(55, 19, 121, .12);
  --dew-dark: #2BC44A;
  --candy-soft: #FDEBFF;
  --candy-deep: #8F2F9C;
  --white: #FFFFFF;
  --chili: #FF8172;
  --chili-deep: #B5341F;
  --amber: #E5A83A;

  --text: #060808;
  --text-muted: #5C5852;
  --text-light: #6E6A64;
  --border: rgba(6, 8, 8, .08);
  --border-md: rgba(6, 8, 8, .14);

  --on-dark: rgba(245, 243, 230, 1);
  --on-dark-mid: rgba(245, 243, 230, .78);
  --on-dark-low: rgba(245, 243, 230, .58);
  --on-dark-line: rgba(245, 243, 230, .12);
  --on-dark-fill: rgba(245, 243, 230, .055);

  --font-display: 'Recoleta', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-press: 120ms;
  --dur-hover: 200ms;
  --dur-slow: 420ms;

  --lift-sm: translateY(-2px);
  --lift-md: translateY(-3px);

  --r-card: 16px;
  --r-ctl: 10px;
  --shadow-card: 0 1px 2px rgba(6, 8, 8, .04), 0 12px 32px -14px rgba(6, 8, 8, .16);
  --shadow-lift: 0 18px 44px -18px rgba(55, 19, 121, .28);

  --maxw: 1080px;
  --sp-block: clamp(52px, 6.5vw, 88px);
  --sp-head: clamp(28px, 3.5vw, 44px);
  --sp-group: clamp(16px, 1.8vw, 22px);
}

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

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

body {
  background: var(--vanilla);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 68px;
}

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

::selection {
  background: var(--ube);
  color: var(--vanilla)
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--ube);
  outline-offset: 3px;
  border-radius: 4px
}

.on-ube :where(a, button, input, select, [tabindex]):focus-visible {
  outline-color: var(--dew)
}

/* ── TYPE ──────────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--charcoal)
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3rem)
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem)
}

h3 {
  font-size: 1.2rem;
  letter-spacing: -.01em
}

h4 {
  font-size: 1.02rem;
  letter-spacing: -.01em
}

p {
  margin: 0
}

p+p {
  margin-top: .85rem
}

a {
  color: var(--ube);
  text-underline-offset: 3px
}

strong,
b {
  font-weight: 600
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ube);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 1rem
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  flex: none
}

.eyebrow.plain::before {
  display: none
}

.eyebrow.on-dark {
  color: var(--candy)
}

.eyebrow.centered {
  justify-content: center
}

.eyebrow.centered::before {
  display: none
}

.lede {
  font-size: 16.5px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 54ch
}

.lede.on-dark {
  color: var(--on-dark-mid)
}

.small {
  font-size: 14px;
  line-height: 1.6
}

.muted {
  color: var(--text-muted)
}

.mono {
  font-family: var(--font-mono)
}

.center {
  text-align: center
}

.on-dark {
  color: var(--on-dark-mid)
}

/* ── PAGE CHROME ───────────────────────────────────────────────────────── */
.fnl-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 68px;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: rgba(245, 243, 230, .88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border)
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ube);
  transition: opacity var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-spring)
}

.logo:hover {
  opacity: .78;
  transform: var(--lift-sm)
}

.logo svg {
  height: 26px;
  width: auto;
  display: block;
  fill: currentColor
}

.fnl-nav-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.fnl-nav-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dew);
  flex: none
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(1.25rem, 4vw, 3rem) 96px
}

.wrap.narrow {
  max-width: 720px
}

.wrap.wide {
  max-width: 1240px
}

.cols {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start
}

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-group)
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-group)
}

.cols>*,
.cols-2>*,
.cols-3>* {
  min-width: 0
}

@media (max-width:880px) {

  .cols,
  .cols-2,
  .cols-3 {
    grid-template-columns: 1fr
  }
}

.stack>*+* {
  margin-top: var(--sp-group)
}

.rail {
  position: sticky;
  top: 92px
}

/* ── STEP RAIL + PROGRESS ──────────────────────────────────────────────── */
.steps {
  display: flex;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
  margin-bottom: 22px
}

.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light)
}

.steps li b {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(6, 8, 8, .07);
  color: var(--text-light);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700
}

.steps li.done {
  color: var(--ube)
}

.steps li.done b {
  background: var(--ube);
  color: #fff
}

.steps li.now {
  color: var(--charcoal);
  font-weight: 600
}

.steps li.now b {
  background: var(--dew);
  color: var(--charcoal)
}

.steps li+li::before {
  content: '';
  width: 14px;
  height: 1.5px;
  background: var(--border-md);
  margin-right: 2px
}

.bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(6, 8, 8, .08);
  overflow: hidden;
  margin-bottom: 26px
}

.bar i {
  display: block;
  height: 100%;
  background: var(--ube);
  border-radius: 99px;
  transition: width var(--dur-slow) var(--ease)
}

/* ── CARDS ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow-card)
}

.card.flat {
  box-shadow: none;
  background: rgba(255, 255, 255, .6)
}

.card.ube {
  background: var(--ube);
  border-color: transparent;
  color: var(--on-dark-mid)
}

.card.ube h1,
.card.ube h2,
.card.ube h3,
.card.ube h4 {
  color: var(--vanilla)
}

.card.ube .eyebrow {
  color: var(--candy)
}

.card-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

/* Ube section band — used for the decision moment on the result page. */
.band-ube {
  background: var(--ube);
  color: var(--on-dark-mid);
  border-radius: clamp(18px, 2.4vw, 28px);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.2vw, 48px);
  margin-top: var(--sp-block)
}

.band-ube h2,
.band-ube h3 {
  color: var(--vanilla)
}

/* Full-bleed variant. The rounded .band-ube reads as a card inside the page;
   this one is the page, edge to edge, for the closing decision on the Score
   result where it has to stop the scroll rather than sit politely in the flow.
   Lives outside .wrap and carries its own inner wrap. */
.band-ube-full {
  background: var(--ube);
  color: var(--on-dark-mid);
  padding: clamp(40px, 6vw, 84px) 0 clamp(44px, 6vw, 84px)
}

.band-ube-full h2,
.band-ube-full h3 {
  color: var(--vanilla)
}

.band-ube-full .band-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem)
}

/* ── Mobile floating CTA ────────────────────────────────────────────────────
   Two actions, always reachable. Desktop shows the full cards, so this only
   exists below 720px where the decision band is a long scroll. */
.cta-float {
  display: none
}

@media (max-width:720px) {
  .cta-float {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(245, 243, 230, .94);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--border)
  }

  .cta-float .btn {
    flex: 1;
    padding: 13px 12px;
    font-size: 14px;
    white-space: nowrap;
    text-align: center;
    justify-content: center
  }

  /* Clears the bar so the last card is never trapped under it. */
  body.has-cta-float {
    padding-bottom: 84px
  }

  body.has-cta-float.has-proto {
    padding-bottom: 118px
  }
}

/* ── BUTTONS ───────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--r-ctl);
  border: 1.5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std),
    color var(--dur-hover) var(--ease-std),
    box-shadow var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-spring)
}

.btn:active {
  transform: translateY(0) scale(.978);
  transition-duration: var(--dur-press)
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-spring)
}

.btn:hover .arrow {
  transform: translateX(4px)
}

.btn-primary {
  background: var(--dew);
  color: var(--charcoal);
  border-color: var(--dew)
}

.btn-primary:hover {
  background: var(--dew-dark);
  border-color: var(--dew-dark);
  transform: var(--lift-md);
  box-shadow: 0 12px 26px -10px rgba(43, 196, 74, .62)
}

.btn-ube {
  background: var(--ube);
  color: var(--vanilla);
  border-color: var(--ube)
}

.btn-ube:hover {
  background: var(--ube-deep);
  border-color: var(--ube-deep);
  transform: var(--lift-md);
  box-shadow: var(--shadow-lift)
}

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(6, 8, 8, .22);
  font-weight: 500
}

.btn-outline:hover {
  border-color: var(--charcoal);
  background: rgba(6, 8, 8, .04);
  transform: var(--lift-sm)
}

.btn-outline.on-dark {
  color: var(--vanilla);
  border-color: var(--on-dark-line)
}

.btn-outline.on-dark:hover {
  border-color: var(--on-dark-mid);
  background: rgba(245, 243, 230, .08)
}

.btn-block {
  width: 100%
}

.btn-lg {
  font-size: 16px;
  padding: 17px 30px
}

.btn[disabled],
.btn[aria-disabled=true] {
  opacity: .4;
  pointer-events: none
}

.btn-text {
  position: relative;
  /* Also used on <button>, where UA chrome would otherwise show as a grey box. */
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--dur-hover) var(--ease-std);
  align-self: center
}

.btn-text::before,
.btn-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px
}

.btn-text::before {
  background: var(--border-md)
}

.btn-text::after {
  background: var(--ube);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease)
}

.btn-text:hover {
  color: var(--ube)
}

.btn-text:hover::after {
  transform: scaleX(1)
}

.btn-text.on-dark {
  color: var(--on-dark-mid)
}

.btn-text.on-dark::before {
  background: var(--on-dark-line)
}

.btn-text.on-dark::after {
  background: var(--vanilla)
}

.btn-text.on-dark:hover {
  color: var(--vanilla)
}

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px
}

/* ── FORMS ─────────────────────────────────────────────────────────────── */
.field {
  margin-bottom: 18px
}

.field>label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--charcoal)
}

.field .hint,
.hint {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 6px;
  line-height: 1.5
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
select,
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15.5px;
  padding: 13px 15px;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-ctl);
  background: var(--white);
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std)
}

input::placeholder,
textarea::placeholder {
  color: rgba(6, 8, 8, .32)
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ube);
  box-shadow: 0 0 0 3px var(--ube-light)
}

textarea {
  min-height: 96px;
  resize: vertical
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

@media (max-width:600px) {
  .row-2 {
    grid-template-columns: 1fr
  }
}

/* Choice tiles — production treatment. Selection is a ring and a tick, not a
   solid fill: a page of solid-purple blocks reads as a form being audited. */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.choices.col {
  flex-direction: column
}

.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border-md);
  background: var(--white);
  border-radius: var(--r-ctl);
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-spring),
    box-shadow var(--dur-hover) var(--ease-std)
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.choice:hover {
  border-color: var(--ube);
  transform: var(--lift-sm);
  box-shadow: var(--shadow-lift)
}

.choice:has(input:checked) {
  border-color: var(--ube);
  background: var(--ube-light);
  box-shadow: 0 0 0 2px var(--ube-border)
}

.choice-block {
  width: 100%;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  padding: 16px 46px 16px 18px
}

.choice-block .t {
  font-weight: 600;
  font-size: 15.5px;
  color: var(--charcoal)
}

.choice-block .d {
  font-size: 13.5px;
  color: var(--text-light);
  font-weight: 400;
  line-height: 1.5
}

/* Tick mark, drawn only when selected. */
.choice-block::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--border-md);
  background: var(--white);
  transition: background var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std)
}

.choice-block:has(input:checked)::after {
  border-color: var(--ube);
  background: var(--ube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8'/%3E%3C/svg%3E") center/12px no-repeat
}

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  cursor: pointer
}

.check input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--ube)
}

/* NOTE: the tick-list modifier is `.ticks`, not `.check`. `.check` below is the
   checkbox-row component and it sets display:flex — `<ul class="list check">`
   silently turned every list item into a flex item in an unwrapped row. Keep
   component roots and modifiers in separate namespaces. */

/* ── BRAND ROW (checkout) ──────────────────────────────────────────────────
   Name, locations and remove on one bottom-aligned baseline. Previously the
   remove button sat inside the locations field, which pushed the two columns
   out of line and stacked badly on mobile. */
.brand-row {
  display: grid;
  grid-template-columns: 1fr 150px auto;
  gap: 14px;
  align-items: end;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border)
}

.brand-row:last-of-type {
  border-bottom: 0;
  margin-bottom: 4px
}

.brand-row .field {
  margin-bottom: 0
}

.row-remove {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  padding: 14px 2px;
  white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-std)
}

.row-remove:hover {
  color: var(--chili-deep)
}

@media (max-width:620px) {
  .brand-row {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .row-remove {
    justify-self: start;
    padding: 2px
  }
}

/* ── DATA DISPLAY ──────────────────────────────────────────────────────── */
.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 14.5px;
  border-bottom: 1px solid var(--border)
}

.kv:last-child {
  border-bottom: 0
}

.kv .k {
  color: var(--text-muted)
}

.kv .v {
  font-weight: 600;
  text-align: right
}

.kv.total {
  border-top: 1.5px solid var(--charcoal);
  border-bottom: 0;
  margin-top: 8px;
  padding-top: 14px
}

.kv.total .v {
  font-family: var(--font-display);
  font-size: 1.5rem
}

.card.ube .kv {
  border-bottom-color: var(--on-dark-line)
}

.card.ube .kv .k {
  color: var(--on-dark-low)
}

.card.ube .kv .v {
  color: var(--vanilla)
}

.card.ube .kv.total {
  border-top-color: var(--on-dark-mid)
}

.card.ube .kv.total .k {
  color: var(--vanilla)
}

.card.ube .hint,
.card.ube .small {
  color: var(--on-dark-low)
}

.card.ube hr {
  border-color: var(--on-dark-line)
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(6, 8, 8, .06);
  color: var(--text-muted)
}

.pill.green {
  background: var(--dew);
  color: var(--charcoal)
}

.pill.ube {
  background: var(--ube);
  color: #fff
}

.pill.candy {
  background: var(--candy);
  color: var(--charcoal)
}

.pill.outline-light {
  background: rgba(245, 243, 230, .1);
  color: var(--vanilla)
}

.list {
  list-style: none
}

.list li {
  padding: 8px 0 8px 28px;
  position: relative;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6
}

.list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dew)
}

/* Exclusions. The default dot is Dew green, which reads as "you get this" —
   wrong for a "Not included" list. Grey states the fact without endorsing it.
   Modifier name deliberately unlike any layout class (cf. the .check/.ticks
   collision) so it can never affect display. */
.list.excl li::before {
  background: var(--text-light);
  opacity: .55
}

.list.ticks li::before {
  content: '';
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232BC44A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4 6.2 11.6 13 4.8'/%3E%3C/svg%3E") center/16px no-repeat
}

.list.on-dark li {
  color: var(--on-dark-mid)
}

.list.on-dark.ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2347E569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4 6.2 11.6 13 4.8'/%3E%3C/svg%3E")
}

.list.num {
  counter-reset: n
}

.list.num li {
  counter-increment: n;
  padding-left: 36px
}

.list.num li::before {
  content: counter(n);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ube-light);
  color: var(--ube);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  top: 8px;
  left: 0
}

.tl {
  list-style: none;
  position: relative
}

.tl::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 1.5px;
  background: var(--border-md)
}

.tl li {
  position: relative;
  padding: 0 0 20px 30px
}

.tl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--vanilla);
  border: 3px solid var(--ube)
}

.tl li.dim::before {
  border-color: var(--border-md)
}

.tl .when {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light)
}

.tl .what {
  font-weight: 600;
  font-size: 15px
}

.tl .desc {
  font-size: 14px;
  color: var(--text-muted)
}

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

table.grid th,
table.grid td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top
}

table.grid th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-light)
}

.scroll-x {
  overflow-x: auto
}

.note {
  border-left: 3px solid var(--ube);
  background: var(--ube-light);
  padding: 16px 20px;
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6
}

.note.green {
  border-color: var(--dew-dark);
  background: rgba(71, 229, 105, .11)
}

.note.warn {
  border-color: var(--chili-deep);
  background: rgba(255, 129, 114, .12)
}

.note strong {
  color: var(--charcoal)
}

/* ── SCORE ─────────────────────────────────────────────────────────────── */
.score-hero {
  text-align: center;
  padding: clamp(24px, 4vw, 44px) 0
}

.score-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ube);
  font-variant-numeric: tabular-nums
}

.score-num .of {
  font-size: .26em;
  color: var(--text-light);
  letter-spacing: 0;
  font-weight: 500
}

.meter {
  height: 9px;
  border-radius: 99px;
  background: rgba(6, 8, 8, .08);
  overflow: hidden
}

.meter i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--ube);
  width: 0;
  transition: width 900ms var(--ease)
}

.meter.sm {
  height: 6px
}

.meter i.low {
  background: var(--chili-deep)
}

.meter i.mid {
  background: var(--amber)
}

.meter i.high {
  background: var(--dew-dark)
}

.dim-row {
  margin-bottom: 18px
}

.dim-row:last-child {
  margin-bottom: 0
}

.dim-row .dim-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px
}

.dim-row .dim-h .n {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--charcoal)
}

.dim-row .dim-h .v {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light)
}

/* ── PACKAGE CARDS ─────────────────────────────────────────────────────── */
.pkg {
  display: flex;
  flex-direction: column;
  background: var(--white);
  /* Pinned: .band-ube sets a light inherited colour and these cards sit inside it. */
  color: var(--text);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.6vw, 34px);
  border: 1.5px solid transparent
}

.pkg.is-pick {
  border-color: var(--dew);
  box-shadow: 0 0 0 4px rgba(71, 229, 105, .22)
}

.pkg .pkg-foot {
  margin-top: auto;
  padding-top: 22px
}

.pkg-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--charcoal);
  margin: 6px 0 4px
}

.pkg-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 18px
}

/* ── PERSISTENT SOFT-OPTION FOOTER ─────────────────────────────────────── */
.soft-bar {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-block);
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  font-size: 14.5px;
  color: var(--text-muted)
}

.soft-bar.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin: 0;
  padding: 14px clamp(1.25rem, 4vw, 3rem);
  background: rgba(245, 243, 230, .92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  justify-content: center
}

.soft-bar a {
  color: var(--ube);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ube-border);
  transition: border-color var(--dur-hover) var(--ease-std)
}

.soft-bar a:hover {
  border-bottom-color: var(--ube)
}

/* ── CALENDAR EMBED ──────────────────────────────────────────────────────
   Google's scheduling widget is a fixed-height iframe that cannot report its
   own content height to us (cross-origin), so the frame is sized generously and
   taller on narrow screens, where the widget stacks its columns. */
/* Cal.com's inline embed injects and sizes its own iframe, so the height lives
   on the container as a min-height rather than on the iframe. Fixing the
   iframe's height here would fight Cal.com's own resizing and clip the month
   view on small screens. */
.cal-embed {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white);
  min-height: 680px
}

.cal-embed iframe {
  display: block;
  width: 100%;
  border: 0
}

@media (max-width:720px) {
  .cal-embed {
    min-height: 820px
  }
}

/* Shown instead of the iframe until a real scheduling URL is configured. */
.cal-placeholder {
  min-height: 320px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 28px;
  background:
    repeating-linear-gradient(-45deg, rgba(55, 19, 121, .045) 0 10px, transparent 10px 20px);
  border: 1.5px dashed var(--ube-border);
  border-radius: var(--r-card);
  color: var(--text-muted)
}

.cal-placeholder .ph-t {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--charcoal);
  margin-bottom: 6px
}

/* A link whose destination doesn't exist yet. Visibly inert rather than
   silently dead — see LINKS in funnel.js. */
[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  text-decoration: line-through
}

.btn[aria-disabled="true"] {
  text-decoration: none
}

/* ── MISC ──────────────────────────────────────────────────────────────── */
.tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--dew);
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  animation: pop 520ms var(--ease-spring) both
}

.tick svg {
  width: 30px;
  height: 30px
}

@keyframes pop {
  from {
    transform: scale(.6);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

.reveal-up {
  animation: revealUp 520ms var(--ease) both
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ── INTERNAL-ONLY SCREENS ─────────────────────────────────────────────────
   The funnel map and the email spec are working documents for Adam, not
   visitor-facing screens, so they keep their design-rationale annotations.
   `.why` is not permitted on any screen a visitor can reach. */
.why {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--candy-deep);
  background: var(--candy-soft);
  border: 1px dashed var(--candy);
  border-radius: var(--r-ctl);
  padding: 12px 15px;
  margin: 14px 0
}

.why::before {
  content: "WHY ";
  font-weight: 700;
  opacity: .7
}

.map-stage {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--r-card);
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card)
}

.map-node {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--vanilla);
  text-decoration: none;
  color: var(--text);
  margin-bottom: 8px;
  transition: border-color var(--dur-hover) var(--ease-std), background var(--dur-hover) var(--ease-std)
}

.map-node:hover {
  border-color: var(--ube);
  background: var(--ube-light)
}

.map-node .n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  background: var(--ube);
  color: #fff;
  border-radius: 5px;
  padding: 3px 7px;
  flex: 0 0 auto
}

.map-node .t {
  font-weight: 600;
  font-size: 14.5px
}

.map-node .d {
  font-size: 13px;
  color: var(--text-light)
}

.map-node.new {
  border-style: dashed;
  border-color: var(--candy);
  background: var(--candy-soft)
}

.map-node.new .n {
  background: var(--candy-deep)
}

.mail {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--white)
}

.mail-h {
  background: rgba(6, 8, 8, .03);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border)
}

.mail-h .subj {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px
}

.mail-h .meta {
  color: var(--text-light);
  font-family: var(--font-mono);
  font-size: 11.5px
}

.mail-b {
  padding: 22px
}

/* Prototype strip — development chrome, not part of the product. Deliberately
   sits below the fold of attention: dark, small, and out of the visual system
   so it can never be mistaken for a UI element. */
.proto {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  height: 34px;
  background: var(--charcoal);
  color: rgba(245, 243, 230, .55);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-x: auto;
  white-space: nowrap
}

.proto a {
  color: var(--dew);
  text-decoration: none
}

.proto a:hover {
  text-decoration: underline
}

.proto .spacer {
  flex: 1
}

.proto button {
  font: inherit;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(245, 243, 230, .22);
  color: rgba(245, 243, 230, .6);
  border-radius: 100px;
  padding: 3px 10px;
  cursor: pointer
}

body.has-proto {
  padding-bottom: 34px
}

body.has-proto .soft-bar.fixed {
  bottom: 34px
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }
}