/* =========================================================================
   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 ---------------------------------------------------- */
.ona-formwrap { position: relative; }

/* 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; }

.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; }

/* --- 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 rows, the skill-gap line and the program suggestion all
   switch together. The labels around them are 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. */
.ona-verdict { margin-bottom: 20px; }

.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: 11.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: 12px;
  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);
}

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

.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;
}

.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;
}

.ona-logo img {
  max-height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: .55;
}

.ona-logo__word {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .4px;
  color: #a9a49d;
  white-space: nowrap;
}

/* --- 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;
}