/* =========================================================================
   ONA-CODING '26 — Onam Tech Grant 2026 campaign landing page.

   Follows the UI rough mockup in the campaign brief: light cream/white page,
   IPSR forest green + festive orange accents, white cards with soft borders.

   The page sits inside base.html (site nav + site footer), so every rule here
   is scoped under .ona-page to keep it out of the rest of the theme, and the
   values are explicit so the Eduport theme cascade can't shift them.
   ========================================================================= */

/* Malayalam campaign title. Most Kerala devices carry a Malayalam system font,
   which local() picks up for free. The self-hosted WOFF2 is the guaranteed
   path — drop the file in and this starts using it. */
@font-face {
  font-family: 'OnaMalayalam';
  src: local('Noto Sans Malayalam'),
       local('Manjari'),
       local('Meera'),
       url('../fonts/NotoSansMalayalam-SemiBold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0D00-0D7F, U+200C-200D;
}

.ona-page {
  --ona-green: #0a5138;
  --ona-green-dark: #073d2a;
  --ona-orange: #e87b2b;
  --ona-orange-dark: #d06a1e;
  --ona-cream: #fdf4ef;
  --ona-cream-deep: #fdf3e9;
  --ona-peach: #fdf0e4;
  --ona-ink: #111111;
  --ona-body: #5f5f5f;
  --ona-line: #e9e6e2;
  --ona-radius: 14px;
  --ona-shadow: 0 10px 34px rgba(17, 17, 17, 0.08);

  background: #ffffff;
  color: var(--ona-ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

.ona-page img { max-width: 100%; height: auto; }

.ona-ml { font-family: 'OnaMalayalam', inherit; font-weight: 700; }

.ona-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.ona-page section { padding: 60px 0; position: relative; }
.ona-page .ona-hero { padding: 0 0 64px; }

/* Centred eyebrow + heading, the mockup's section-head pattern. */
.ona-sechead { text-align: center; margin-bottom: 38px; }

.ona-eyebrow {
  font-size: 12.5px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ona-orange);
  font-weight: 700;
  margin: 0 0 8px;
}

.ona-page h2.ona-h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.2;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 10px;
}

.ona-lede { color: var(--ona-body); margin: 0 auto; max-width: 62ch; }

/* --- Decorative green shapes (mockup's organic corner blocks) ---------- */
.ona-blob {
  position: absolute;
  background: var(--ona-green);
  z-index: 0;
  pointer-events: none;
}

.ona-blob--left {
  top: 0;
  left: -90px;
  width: 190px;
  height: 320px;
  border-radius: 0 100% 60% 0 / 0 55% 45% 0;
}

.ona-blob--right {
  top: 120px;
  right: -110px;
  width: 220px;
  height: 380px;
  border-radius: 100% 0 0 60% / 45% 0 0 55%;
}

/* --- HERO -------------------------------------------------------------- */
.ona-hero {
  background: linear-gradient(180deg, var(--ona-cream) 0%, var(--ona-cream) 72%, #ffffff 100%);
}

.ona-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
  padding-top: 54px;
}

.ona-page h1.ona-hero__title {
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
  color: var(--ona-orange);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}

.ona-hero__headline {
  font-size: clamp(1.75rem, 4.4vw, 2.85rem);
  line-height: 1.16;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 18px;
  letter-spacing: -0.4px;
}

.ona-hero__grant {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  margin: 0 0 18px;
  font-weight: 500;
  color: var(--ona-ink);
}

.ona-hero__grant strong { color: var(--ona-orange); font-weight: 800; }

.ona-hero__sub { color: var(--ona-body); margin: 0 0 16px; max-width: 54ch; }

.ona-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ona-body);
  border-left: 3px solid var(--ona-orange);
  padding-left: 12px;
  margin: 0;
}

/* --- Lead form card ---------------------------------------------------- */
/* scroll-margin so the jump from a result card leaves the form clear of the
   fixed site header, the same offset .ona-result-card already uses. */
.ona-formwrap { position: relative; scroll-margin-top: 90px; }

/* The green slab peeking out behind the card, as in the mockup. */
.ona-formwrap::before {
  content: '';
  position: absolute;
  inset: 14px -8px -10px 14px;
  background: var(--ona-green);
  border-radius: var(--ona-radius);
  z-index: 0;
}

.ona-formcard {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-radius: var(--ona-radius);
  padding: 28px 24px;
  box-shadow: var(--ona-shadow);
}

.ona-page h2.ona-formcard__title {
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 18px;
}

.ona-field { margin-bottom: 12px; }

.ona-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ona-body);
  margin-bottom: 6px;
  font-weight: 700;
}

.ona-page .ona-input {
  width: 100%;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #ddd8d2;
  border-radius: 9px;
  color: var(--ona-ink);
  font-size: 16px; /* 16px stops iOS zoom-on-focus */
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.ona-page .ona-input::placeholder { color: #9b968f; }

.ona-page .ona-input:focus {
  outline: none;
  border-color: var(--ona-orange);
  box-shadow: 0 0 0 3px rgba(232, 123, 43, 0.15);
}

.ona-page .ona-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%235f5f5f' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.ona-error { display: block; margin-top: 5px; font-size: 13px; color: #c0392b; }
.ona-page .ona-input--invalid { border-color: #c0392b; }

/* "Not a robot" tick. Overrides the uppercase caption styling .ona-field gives
   its labels — this one is a sentence the visitor reads, not a field caption. */
.ona-field label.ona-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ona-ink);
  cursor: pointer;
}

.ona-page .ona-check__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--ona-orange);
  cursor: pointer;
}

.ona-page .ona-check__box:focus-visible {
  outline: 2px solid var(--ona-orange);
  outline-offset: 2px;
}

.ona-page .ona-check__box[aria-invalid="true"] {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
}

.ona-page .ona-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 0;
  border-radius: 9px;
  background: var(--ona-orange);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}

.ona-page .ona-btn:hover {
  background: var(--ona-orange-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.ona-page .ona-btn--block { width: 100%; }

.ona-page .ona-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.ona-form.htmx-request .ona-btn { opacity: .6; pointer-events: none; }

.ona-formcard__footnote {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ona-body);
  text-align: center;
  line-height: 1.5;
}

/* Success panel replaces the form in place — no redirect. */
.ona-success { text-align: center; padding: 14px 4px; }

.ona-success__mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 81, 56, 0.08);
  border: 1px solid var(--ona-green);
  color: var(--ona-green);
  font-size: 28px;
  line-height: 1;
}

.ona-page h2.ona-success__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--ona-ink);
}

.ona-success__text { color: var(--ona-body); margin: 0; }
.ona-success__meta { font-size: 13px; color: var(--ona-body); margin-top: 16px; }

/* --- Course cards ------------------------------------------------------ */
.ona-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.ona-card {
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-radius: var(--ona-radius);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ona-card:hover {
  transform: translateY(-3px);
  border-color: #dcd6cf;
  box-shadow: var(--ona-shadow);
}

/* Course icon, in place of the old "Course 1 / Course 2" numbering. Sits in a
   soft peach tile so the mixed-style logo SVGs read as one consistent set. */
.ona-card__icon {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  padding: 6px;
  margin: 0 0 12px;
  border-radius: 10px;
  background: var(--ona-peach);
  box-sizing: content-box;
}

.ona-page h3.ona-card__title {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 10px;
}

.ona-card__teaser {
  color: var(--ona-body);
  font-size: 14.5px;
  margin: 0 0 18px;
  flex: 1 1 auto;
}

.ona-card__pill {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--ona-peach);
  color: var(--ona-orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
}

/* Sixth grid cell: the callout, styled as a card so the grid stays even. */
.ona-callout-card {
  background: var(--ona-peach);
  border: 1px dashed #e8c9a6;
  border-radius: var(--ona-radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ona-callout-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ona-orange);
  color: var(--ona-orange);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}

.ona-page h3.ona-callout-card__title {
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 8px;
}

.ona-callout-card__text { color: var(--ona-body); font-size: 14px; margin: 0 0 16px; }

.ona-link {
  color: var(--ona-orange);
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}

.ona-link:hover { color: var(--ona-orange-dark); }

/* --- Section 3: Ask Maveli -------------------------------------------- */
.ona-maveli {
  background: linear-gradient(180deg, var(--ona-cream) 0%, var(--ona-cream) 78%, #ffffff 100%);
}

.ona-maveli__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}

.ona-maveli__intro { color: var(--ona-ink); margin: 0 0 18px; max-width: 46ch; }

/* --- Maveli greeting the Ask Maveli section ---------------------------- */
.ona-greeter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}

.ona-greeter__art {
  flex: none;
  /* Arms-open pose, so he is wider than he is tall — sized on width. */
  width: clamp(118px, 16vw, 172px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(17, 17, 17, .18));
  transform-origin: 50% 92%;   /* his feet, so the sway pivots off the ground */
  animation:
    ona-greeter-float 4.5s ease-in-out infinite,
    ona-greeter-sway 7s ease-in-out infinite;
}

/* Two animations on one element: a slow bob that never stops, and a sway that
   fires on a longer cycle, so he is greeting rather than fidgeting. */
@keyframes ona-greeter-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

@keyframes ona-greeter-sway {
  0%, 58%, 100% { rotate: 0deg; }
  66%           { rotate: -3.5deg; }
  74%           { rotate: 3deg; }
  82%           { rotate: -2deg; }
  90%           { rotate: 0deg; }
}

/* Speech bubble, with a tail pointing back at him. */
.ona-greeter__speech {
  position: relative;
  margin: 0;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-radius: 14px;
  box-shadow: var(--ona-shadow);
  font-style: italic;
}

.ona-greeter__speech::before,
.ona-greeter__speech::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
}

.ona-greeter__speech::before {
  margin-top: -9px;
  border-right-color: var(--ona-line);
}

.ona-greeter__speech::after {
  margin-top: -8px;
  margin-right: -1px;
  border-width: 8px;
  border-right-color: #ffffff;
}

@media (max-width: 575.98px) {
  .ona-greeter { gap: 12px; }
  .ona-greeter__speech { padding: 12px 14px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ona-greeter__art { animation: none; }
}

.ona-qpills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.ona-qpill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #eccdae;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ona-orange);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

/* Progress pills mirror the mockup's Q1-Q4 row and fill in as the chat runs. */
.ona-qpill.is-done {
  background: var(--ona-orange);
  border-color: var(--ona-orange);
  color: #ffffff;
}

.ona-qpill.is-done::before { content: '\2713\00a0'; }

.ona-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #eccdae;
  background: #ffffff;
  color: var(--ona-orange);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ona-chip:hover { background: var(--ona-orange); border-color: var(--ona-orange); color: #ffffff; }

/* --- While an answer is in flight -------------------------------------- */

/* htmx puts .htmx-request on whatever hx-indicator names, for exactly as long
   as the request runs — here that is the typing line. Everything else keys off
   that one element rather than off the chip: htmx only resolves "this" when it
   is the entire hx-indicator value, so a chip cannot carry the class as well.
   The options dim and stop taking clicks, which both acknowledges the tap and
   stops a second one posting another answer and skipping a question. */
#ona-chat:has(#ona-chat-typing.htmx-request) .ona-chat__options {
  pointer-events: none;
  opacity: .5;
}

#ona-chat:has(#ona-chat-typing.htmx-request) .ona-chat__foot {
  pointer-events: none;
  opacity: .5;
}

.ona-typing {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 10px;
  font-size: 13px;
  color: var(--ona-body);
  font-style: italic;
}

.ona-typing.htmx-request { display: flex; }

.ona-typing__dots { display: inline-flex; gap: 4px; }

.ona-typing__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ona-orange);
  animation: ona-typing-dot 1.1s ease-in-out infinite;
}

.ona-typing__dots i:nth-child(2) { animation-delay: .18s; }
.ona-typing__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes ona-typing-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ona-typing__dots i { animation: none; opacity: .7; }
}

/* --- Tool results (quiz + roast) -------------------------------------- */

.ona-result-card {
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-left: 4px solid var(--ona-orange);
  border-radius: var(--ona-radius);
  padding: 22px 22px 20px;
  margin-top: 22px;
  box-shadow: var(--ona-shadow);
  text-align: left;
  scroll-margin-top: 90px;
}

.ona-result-card:focus { outline: 2px solid var(--ona-orange); outline-offset: 3px; }

.ona-result-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ona-result-card__crown { font-size: 26px; line-height: 1.1; flex-shrink: 0; }

.ona-result-card__eyebrow {
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ona-orange);
  font-weight: 700;
  margin: 0 0 3px;
}

.ona-page h3.ona-result-card__title {
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0;
}

.ona-result-card__title strong { color: var(--ona-orange); }

.ona-result-card__reason { color: var(--ona-body); margin: 0 0 8px; font-size: 14.5px; }

.ona-result-card__grant {
  color: var(--ona-green);
  font-weight: 700;
  font-size: 14.5px;
  margin: 0 0 18px;
}

/* Maveli's recommendation is the closing message of the conversation, so it is
   a child of the transcript's flex column rather than a card in the column
   beside it. flex-shrink:0 keeps it at full height instead of being squeezed
   by the bubbles above; the tighter padding is for the 420px widget. */
.ona-result-card--quiz {
  margin-top: 4px;
  flex-shrink: 0;
  padding: 16px 16px 15px;
  border-radius: 14px;
}

.ona-result-card--quiz .ona-result-card__head { margin-bottom: 11px; }
.ona-result-card--quiz .ona-result-card__crown { font-size: 21px; }
.ona-page .ona-result-card--quiz h3.ona-result-card__title { font-size: 1.05rem; }
.ona-result-card--quiz .ona-result-card__reason,
.ona-result-card--quiz .ona-result-card__grant { font-size: 13.5px; }
.ona-result-card--quiz .ona-result-card__grant { margin-bottom: 14px; }
.ona-result-card--quiz .ona-btn { width: 100%; }

/* Language toggle: two radios + sibling selectors, no scripting. */
.ona-langinput {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ona-langtoggle {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--ona-line);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.ona-langbtn {
  margin: 0;
  background: #ffffff;
  color: var(--ona-body);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  cursor: pointer;
  user-select: none;
}

.ona-roastcard .ona-t--ml { display: none; }

/* The radios are direct children of the card, so `~ *` reaches every block in
   it: the verdict, the findings, the sections and the guidance all switch
   together. The labels around them stay English in both modes. */
#ona-lang-ml:checked ~ * .ona-t--ml { display: inline; }
#ona-lang-ml:checked ~ * .ona-t--en { display: none; }

#ona-lang-en:checked ~ .ona-result-card__head .ona-langbtn[for="ona-lang-en"],
#ona-lang-ml:checked ~ .ona-result-card__head .ona-langbtn[for="ona-lang-ml"] {
  background: var(--ona-green);
  color: #ffffff;
}

/* Keyboard focus has to be visible on the label, since the radio is hidden. */
.ona-langinput:focus-visible ~ .ona-result-card__head .ona-langtoggle {
  outline: 2px solid var(--ona-orange);
  outline-offset: 2px;
}

.ona-charhint {
  font-size: 12.5px;
  color: var(--ona-body);
  text-align: right;
  margin: 7px 0 14px;
}

/* Roast verdict rows. */
/* The headline Maveli opens with, above the good point / roast pair. */
.ona-roastline {
  margin: 0 0 16px;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  line-height: 1.4;
  font-weight: 800;
  color: var(--ona-green);
}

.ona-verdict { margin-bottom: 20px; }

/* The specific jabs. Numbered, so it reads as a list of findings rather than
   one long paragraph of abuse. */
.ona-burns {
  list-style: none;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--ona-peach);
  border-radius: 12px;
  counter-reset: ona-burn;
}

.ona-burns__item {
  position: relative;
  margin: 0 0 12px;
  padding-left: 30px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ona-ink);
  counter-increment: ona-burn;
}

.ona-burns__item:last-child { margin-bottom: 0; }

.ona-burns__mark {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 15px;
  line-height: 1.4;
}

/* Maveli's parting advice, before the CTA. */
.ona-roastcloser {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f1f8f3;
  border: 1px solid rgba(10, 81, 56, .16);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ona-green-dark);
}

.ona-roastcloser__crown { flex: none; font-size: 16px; line-height: 1.4; }

/* Maveli's career direction, in the peach the page uses for his own asides so
   it reads as him talking rather than as a second proclamation. Same shape as
   the closer above; no new dimensions are introduced. */
.ona-guidance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ona-peach);
  border: 1px solid rgba(214, 106, 26, .18);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ona-ink);
}

.ona-guidance__crown { flex: none; font-size: 16px; line-height: 1.4; }

/* --- Sharing the roast --------------------------------------------------- */
/* Sits inside the existing card and sets no width or height of its own. The
   row wraps rather than scrolling, so three buttons still fit a 320px phone. */
.ona-share {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px dashed var(--ona-line);
  border-radius: 12px;
  background: #fbfbfa;
}

/* An invitation now, not a caption — so no uppercase and no letter-spacing.
   Both would work against the Malayalam, which has no case to shift and reads
   badly when tracked out. */
.ona-share__title {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ona-ink);
  overflow-wrap: anywhere;
}

.ona-share__sub {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ona-body);
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .ona-share__title { font-size: 14.5px; }
  .ona-share__sub { font-size: 13.5px; }
}

.ona-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ona-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--ona-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ona-ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.ona-share__btn:hover { border-color: var(--ona-orange); }

.ona-share__btn:focus-visible {
  outline: 2px solid var(--ona-orange);
  outline-offset: 2px;
}

/* WhatsApp's own green, so the button is recognisable at a glance. */
.ona-share__btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}

.ona-share__btn--wa:hover { border-color: #1da851; background: #1da851; }

/* Hidden until ona-share.js confirms navigator.share exists. */
.ona-share__btn--native[hidden] { display: none; }

@media (max-width: 575.98px) {
  .ona-share { padding: 12px 13px; }
  .ona-share__btn { font-size: 13px; padding: 8px 12px; }
}


/* The parting word runs to three paragraphs. The last one carries no bottom
   margin so the block ends on the same padding it started with. */
.ona-guidance p { margin: 0 0 10px; }
.ona-guidance p:last-child { margin-bottom: 0; }

.ona-guidance__label {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ona-orange-dark);
  margin-bottom: 3px;
}

.ona-verdict__row {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ona-ink);
  padding-left: 12px;
  border-left: 3px solid var(--ona-line);
}

.ona-verdict__row--good { border-left-color: var(--ona-green); }
.ona-verdict__row--roast { border-left-color: var(--ona-orange); }

.ona-verdict__label {
  display: block;
  font-size: 18.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ona-body);
  margin-bottom: 3px;
}

/* Skill gap visualisation. */
.ona-gapviz {
  background: #fbfbfa;
  border: 1px solid var(--ona-line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.ona-page h4.ona-gapviz__title {
  font-size: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ona-body);
  font-weight: 800;
  margin: 0 0 14px;
}

.ona-gapviz__list { list-style: none; margin: 0 0 14px; padding: 0; }

.ona-gapviz__item {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 11px;
  font-size: 13.5px;
}

.ona-gapviz__name { color: var(--ona-ink); grid-column: 1 / 2; }

.ona-gapviz__bar {
  grid-column: 1 / 2;
  height: 8px;
  border-radius: 999px;
  background: #ece9e5;
  overflow: hidden;
}

.ona-gapviz__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ona-green);
  transition: width .6s ease;
}

.ona-gapviz__item.is-gap .ona-gapviz__fill { background: var(--ona-orange); }
.ona-gapviz__item.is-gap .ona-gapviz__name { font-weight: 700; }

.ona-gapviz__pct {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  text-align: right;
  font-weight: 800;
  font-size: 13px;
  color: var(--ona-body);
}

/* The dish rows carry an emoji and Maveli's one-line reason for the score. The
   percentage still spans rows 1-2 beside the name and bar, so the reason drops
   onto row 3 across the full width rather than squeezing the bar. */
.ona-gapviz__emoji { margin-right: 5px; }

.ona-gapviz__note {
  grid-column: 1 / 3;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ona-body);
  overflow-wrap: anywhere;
}

.ona-gapviz__item:has(.ona-gapviz__note) { margin-bottom: 14px; }

.ona-gapviz__gaps { margin: 0; font-size: 14px; color: var(--ona-ink); }
.ona-gapviz__gaps strong { color: var(--ona-orange); }

@media (max-width: 575.98px) {
  .ona-gapviz__note { font-size: 12px; }
}

.ona-result-card__cta { margin-bottom: 12px; }
.ona-result-card__match { font-size: 14.5px; color: var(--ona-ink); margin: 0 0 14px; }
.ona-result-card__match strong { color: var(--ona-green); }

.ona-retry {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  margin-top: 12px;
  cursor: pointer;
  font-family: inherit;
}

.ona-toolerror {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 10px;
  background: #fdecea;
  border: 1px solid #f3c9c3;
  color: #8a2a1d;
  font-size: 14px;
  text-align: left;
}

/* --- Roast button, while Maveli is thinking ----------------------------
   htmx adds .htmx-request to the form for the life of the request, so the
   busy state is pure CSS. The pointer-events guard matters because
   hx-disabled-elt only exists in htmx 1.9.5+, and older builds ignore it. */
.ona-page .ona-btn__busy { display: none; }

.ona-page #ona-roast-form.htmx-request .ona-btn__label { display: none; }

.ona-page #ona-roast-form.htmx-request .ona-btn__busy {
  display: inline-flex;
  align-items: center;
}

/* Three dots that fill in one at a time, so the wait looks alive. */
.ona-page #ona-roast-form.htmx-request .ona-btn__busy::after {
  content: '';
  width: 1.6em;
  text-align: left;
  animation: ona-thinking 1.2s steps(1, end) infinite;
}

@keyframes ona-thinking {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}

.ona-page #ona-roast-form.htmx-request .ona-btn {
  pointer-events: none;
  opacity: .75;
}

/* When the banner leads the form it has nothing above it to space it from. */
.ona-toolerror--lead {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Chat widget shell — the AI phase turns this into a live conversation. */
/* Fixed-height widget: head / options / input keep their natural size and the
   transcript absorbs the rest, so the box never resizes between turns. */
.ona-chat {
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-radius: 18px;
  box-shadow: var(--ona-shadow);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 480px;
}

/* The transcript is left exactly as it was — fixed height, scrolling body. The
   one thing that changes when the recommendation arrives is where the log is
   parked, and that is done in ona-chat-scroll.js. */

.ona-chat__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ona-line);
}

.ona-chat__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ona-peach);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.ona-chat__who { flex: 1 1 auto; line-height: 1.25; }
.ona-chat__name { font-weight: 800; font-size: 14.5px; color: var(--ona-ink); }
.ona-chat__role { font-size: 12px; color: var(--ona-body); }

/* Fixed-height transcript: the widget scrolls instead of growing the page.
   htmx's `scroll:bottom` swap modifier keeps it pinned to the newest message. */
.ona-chat__body {
  flex: 1 1 auto;
  min-height: 0;          /* required, or a flex child refuses to shrink */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  scrollbar-width: thin;
}

.ona-chat__body::-webkit-scrollbar { width: 6px; }
.ona-chat__body::-webkit-scrollbar-thumb {
  background: #ded9d3;
  border-radius: 999px;
}

.ona-bubble { max-width: 82%; font-size: 13.5px; line-height: 1.45; flex-shrink: 0; }

/* inline-block matters: as an inline span, padding on a wrapped bubble paints
   an overlapping background on every line fragment. */
.ona-bubble__text {
  display: inline-block;
  padding: 10px 13px;
  border-radius: 13px;
  background: #f1f2f4;
  color: var(--ona-ink);
  overflow-wrap: anywhere;
}

.ona-bubble__time { font-size: 11px; color: #9b968f; margin-top: 4px; display: block; }

.ona-bubble--out { margin-left: auto; text-align: right; }
.ona-bubble--out .ona-bubble__text { background: var(--ona-orange); color: #ffffff; }

/* Option chips sit outside the scroll area so they stay reachable. */
.ona-chat__options {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px 0;
  max-height: 96px;
  overflow-y: auto;
}

.ona-chat__options:empty { display: none; }

.ona-chat__foot { flex: 0 0 auto; }

.ona-chat__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--ona-line);
}

.ona-chat__input {
  flex: 1 1 auto;
  border: 1px solid var(--ona-line);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fbfbfa;
  color: var(--ona-ink);
}

.ona-chat__send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ona-orange);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}

/* --- Section 4: Resume Roast ------------------------------------------ */
.ona-roastbox {
  max-width: 860px;
  margin: 0 auto;
  background: #fbfbfa;
  border: 1px dashed #d9d4ce;
  border-radius: var(--ona-radius);
  padding: 30px 26px;
  text-align: center;
}

.ona-page h3.ona-roastbox__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ona-ink);
  margin: 0 0 6px;
}

.ona-roastbox__hint { font-size: 13.5px; color: var(--ona-body); margin: 0 0 20px; }

.ona-page .ona-dropzone {
  width: 100%;
  min-height: 130px;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #ddd8d2;
  border-radius: 10px;
  color: var(--ona-ink);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
  text-align: left;
}

.ona-page .ona-dropzone:focus {
  outline: none;
  border-color: var(--ona-orange);
  box-shadow: 0 0 0 3px rgba(232, 123, 43, 0.15);
}

.ona-charcount { font-size: 12.5px; color: var(--ona-body); text-align: right; margin: 7px 0 14px; }

/* Upload drop zone. The file input is stretched over the whole box and made
   transparent, so the browser's own drag-and-drop and click-to-browse work
   with no scripting — the styled face underneath is what the visitor sees. */
.ona-drop {
  position: relative;
  border: 1px dashed #d9d4ce;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color .16s ease, background .16s ease;
}

.ona-drop:hover,
.ona-drop:focus-within {
  border-color: var(--ona-orange);
  background: var(--ona-peach);
}

.ona-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ona-drop__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 18px;
  text-align: center;
  pointer-events: none;
}

/* A file is attached: green, so it reads as "done" at a glance. The :has()
   rule tints the dashed box too where supported; without it the face alone
   still carries the state. */
.ona-drop__face--attached { background: #f1f8f3; border-radius: 11px; }
.ona-drop__face--attached .ona-drop__title { color: var(--ona-green); }
.ona-drop:has(.ona-drop__face--attached) {
  border-style: solid;
  border-color: var(--ona-green);
  background: #f1f8f3;
}

/* Long filenames must not stretch the box or spill out of it. */
.ona-drop__face .ona-drop__title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ona-drop__icon { font-size: 26px; line-height: 1; }

.ona-drop__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ona-ink);
}

.ona-drop__meta { font-size: 12.5px; color: var(--ona-body); }

/* Keyboard focus has to be visible even though the input is transparent. */
.ona-drop__input:focus-visible + .ona-drop__face {
  outline: 2px solid var(--ona-orange);
  outline-offset: -4px;
  border-radius: 12px;
}

/* Honeypot. Moved off-screen rather than display:none — some bots skip fields
   that are display:none, but happily fill anything still in the layout. */
.ona-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* "or" divider between the two input paths. */
.ona-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 12.5px;
  color: var(--ona-body);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.ona-or::before,
.ona-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--ona-line);
}

.ona-sample {
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--ona-line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--ona-body);
}

.ona-sample p { margin: 0 0 8px; }
.ona-sample p:last-child { margin-bottom: 0; }
.ona-sample strong { color: var(--ona-ink); }

.ona-pending {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ona-body);
  text-align: center;
}

/* --- Section 5: Trust -------------------------------------------------- */
.ona-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 16px;
  text-align: center;
}

.ona-stat__value {
  display: block;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

/* The mockup alternates green / orange / orange / green across the row. */
.ona-stat--green .ona-stat__value { color: var(--ona-green); }
.ona-stat--orange .ona-stat__value { color: var(--ona-orange); }

.ona-stat__label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ona-ink);
  line-height: 1.4;
}

/* Scrolling hiring-partner strip ("neat scrolling logos" in the mockup). */
.ona-logos {
  margin-top: 46px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ona-logos__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: ona-marquee 34s linear infinite;
}

.ona-logos:hover .ona-logos__track { animation-play-state: paused; }

@keyframes ona-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ona-logo {
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Real artwork and stand-in wordmarks sit side by side until marketing
   supplies the missing files, so both are pushed to the same weight — one
   grey, one height, no logo shouting louder than its neighbour. */
.ona-logo img {
  max-height: 30px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.62);
}

.ona-logo__word {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #a9a49d;
  white-space: nowrap;
}

/* The roast runs on past the first paragraph, and the sharpest jabs are
   paragraphs of it rather than a list — it should read as Maveli talking, not
   as findings. Sits inside the existing card; no dimension is set here. */
.ona-roastpara {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--ona-orange);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ona-ink);
  overflow-wrap: anywhere;
}

.ona-verdict__row--roast { margin-bottom: 12px; }

.ona-roastcloser__label {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ona-green);
  margin-bottom: 3px;
}

/* --- Maveli holding court: the longer prose sections --------------------
   Additive: these sit below the existing sadya card content and above the CTA.
   Nothing here touches .ona-result-card, and no width or height is set. */
.ona-court { margin: 0 0 18px; }

/* Scoped under .ona-roastcard to outrank `.ona-page section`, which gives every
   section on this page 60-76px of vertical padding. That rule is meant for the
   page's own top-level sections (#resume-roast, #trust); these parts are
   <section> elements too, so they were inheriting it and opening ~76px of dead
   space under each one — four sections of it down the card. The heading and
   body spacing below is what actually separates them. */
.ona-roastcard .ona-court__part {
  padding: 13px 0 0;
  border-top: 1px solid var(--ona-line);
}

.ona-roastcard .ona-court__part:first-child { border-top: 0; padding-top: 0; }

.ona-court__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ona-green);
  overflow-wrap: anywhere;
}

.ona-court__emoji {
  flex: none;
  font-size: 15px;
  letter-spacing: normal;
}

.ona-court__body {
  margin: 0 0 15px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ona-ink);
  overflow-wrap: anywhere;
}

/* The model marks its sharpest phrases; they land as the orange the rest of
   the page already uses for emphasis. */
.ona-court__body strong {
  font-weight: 800;
  color: var(--ona-orange-dark);
}

/* It reaches for single-star italics about as often as bold. Kept quieter than
   the strong above — a lift in the sentence, not a second heading. */
.ona-court__body em {
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .ona-court__header { font-size: 11.5px; letter-spacing: .9px; }
  .ona-court__body { font-size: 14px; margin-bottom: 13px; }
}

/* --- The wait before the verdict --------------------------------------- */
/* Anchored under the roast button rather than to the viewport.

   This was position:fixed at the foot of the screen, which meant the toast sat
   wherever the reader happened to have scrolled to — press Roast, scroll, and
   Maveli was announcing himself from the bottom of the window with the button
   nowhere near him. It is absolute now, against the section shell, so it hangs
   directly below the button it belongs to and travels with it.

   top:100% is the shell's bottom edge, and since the toast is out of flow the
   shell ends at the roast box — whose last element is the submit button. So
   this lands just under the button at every width, with no measuring in JS.

   Still out of flow, so it shifts no layout, and pointer-events stay off
   except on the dismiss control. */
#resume-roast .ona-shell { position: relative; }

.ona-toast {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 1040;
  width: max-content;
  max-width: min(520px, calc(100% - 16px));
  transform: translate(-50%, 14px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.ona-toast.is-open { opacity: 1; transform: translate(-50%, 0); }

.ona-toast__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--ona-line);
  box-shadow: 0 12px 34px rgba(17, 17, 17, .18);
}

.ona-toast__art {
  flex: none;
  width: 44px;
  height: auto;
  animation: ona-toast-bob 2.2s ease-in-out infinite;
}

@keyframes ona-toast-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}

/* Only the current message is in the layout, so the box itself takes the shape
   of whatever Maveli is saying — each line arrives as its own toast rather
   than as new text inside a shell that never moves. */
.ona-toast__msg {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ona-ink);
  font-weight: 600;
}

.ona-toast__step { display: none; }
.ona-toast__step.is-active { display: block; }

.ona-toast__step--done { color: var(--ona-green); }
.ona-toast__step--fail { color: #8a2a1d; }

/* Each message drops the old box out and brings the new one in, so the change
   reads as a fresh toast arriving. Driven by a class the script replays, since
   a CSS transition cannot restart itself on the same element. */
.ona-toast__inner {
  transition: opacity .16s ease, transform .16s ease;
}

.ona-toast__inner.is-leaving {
  opacity: 0;
  transform: translateY(7px) scale(.97);
}

.ona-toast__inner.is-entering {
  animation: ona-toast-enter .34s cubic-bezier(.2, .7, .3, 1);
}

@keyframes ona-toast-enter {
  from { opacity: 0; transform: translateY(-9px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* The dots belong to the waiting state only — once Maveli has spoken, or the
   connection has failed, there is nothing left to wait for. */
.ona-toast__dots {
  display: inline-flex;
  gap: 4px;
}

.ona-toast.is-done .ona-toast__dots,
.ona-toast.is-fail .ona-toast__dots { display: none; }

.ona-toast__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ona-orange);
  animation: ona-toast-dot 1.1s ease-in-out infinite;
}

.ona-toast__dots i:nth-child(2) { animation-delay: .18s; }
.ona-toast__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes ona-toast-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

.ona-toast__close {
  flex: none;
  pointer-events: auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--ona-peach);
  color: var(--ona-ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.ona-toast__close:hover { background: #f7ddc4; }

@media (max-width: 575.98px) {
  .ona-toast__inner { padding: 9px 13px 9px 10px; gap: 10px; }
  .ona-toast__art { width: 36px; }
  .ona-toast__msg { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ona-toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
  .ona-toast__art { animation: none; }
  .ona-toast__dots i { animation: none; opacity: .7; }
}

/* --- Section 6: sticky campaign bar ------------------------------------ */
.ona-sticky {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--ona-cream-deep);
  border-top: 1px solid #f0e2d1;
}

.ona-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.ona-sticky__label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ona-orange);
  line-height: 1.3;
  margin: 0;
}

.ona-sticky__legal { font-size: 13px; color: var(--ona-ink); margin: 3px 0 0; }
.ona-sticky__legal a { color: var(--ona-orange); text-decoration: none; }
.ona-sticky__legal a:hover { text-decoration: underline; }

/* --- Responsive -------------------------------------------------------- */
@media (min-width: 640px) {
  .ona-cards { grid-template-columns: repeat(2, 1fr); }
  .ona-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .ona-page section { padding: 76px 0; }
  .ona-page .ona-hero { padding: 0 0 84px; }
  .ona-hero__grid { grid-template-columns: 1.08fr 0.92fr; gap: 52px; padding-top: 64px; }
  .ona-cards { grid-template-columns: repeat(3, 1fr); }
  .ona-maveli__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .ona-formcard { padding: 32px 30px; }
  .ona-sechead { margin-bottom: 46px; }
}

@media (max-width: 991.98px) {
  .ona-blob { display: none; }
  .ona-formwrap::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ona-logos__track { animation: none; }
  .ona-card, .ona-page .ona-btn, .ona-qpill { transition: none; }
}
.roast-loading {
  display: none;
  align-items: center;
  gap: 8px;
}

#ona-roast-form.htmx-request .roast-normal {
  display: none;
}

#ona-roast-form.htmx-request .roast-loading {
  display: inline-flex;
}

.ona-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ona-spin 0.7s linear infinite;
}

@keyframes ona-spin {
  to {
      transform: rotate(360deg);
  }
}

#ona-roast-form.htmx-request #ona-roast-submit {
  cursor: wait;
  opacity: 0.85;
}