/* brochure.css — billubnb.in/brochure (v1.6.0). Phone first. Without JS every question is visible (a normal long form);
   with JS (html.js + .bq-form.is-live) one question shows at a time, typeform-style. */
@layer sections {
  .page-brochure { --wc-fur: #A47E57; --wc-stripe: #4B3524; --wc-cream: #EBDDC4; --wc-eye: #8DA559; --wc-ink: #2A1D14; --wc-nose: #D98C80;
    --wc-ear: #E7AFA3; --wc-whisker: #FFF8EE; --wc-tag-dot: #FFF8EE; }
  .page-brochure .wc-cat__lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }

  /* ------------------------------------------------------------------ hero + mock brochure */
  .bq-hero { background: radial-gradient(120% 80% at 80% 10%, var(--sun-soft), transparent 60%), var(--paper); padding: var(--space-5) 0 var(--space-6); }
  .bq-hero__in { display: grid; gap: var(--space-6); align-items: center; }
  .bq-hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); line-height: 1.05; margin: var(--space-2) 0 var(--space-3); text-wrap: balance; }
  .bq-hero .lead { max-width: 38rem; }
  .bq-hero .crumbs, .bq-hero .crumbs a { color: var(--ink-2); }            /* the warm glow behind: ink-3 measured 4.29:1 */
  /* The free half, loud (owner 1.7.0: "the free wisdom stuff is not so much highlighted"): a deep card with a sun ribbon. */
  .bq-gift { position: relative; margin-top: var(--space-6); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--r-md);
    background: var(--sage-deep); color: var(--on-deep); max-width: 40rem; box-shadow: var(--shadow-2); }
  .bq-gift__ribbon { position: absolute; top: -1rem; left: var(--space-4); display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .9rem; border-radius: var(--r-pill); background: var(--sun); color: var(--ink); font-weight: 800; font-size: .85rem;
    letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(58, 42, 34, .5); transform: rotate(-2deg); }
  .bq-gift__ribbon .i { width: 1.1em; height: 1.1em; }
  .bq-gift__title { margin: 0 0 var(--space-3); font: 700 clamp(1.45rem, 1.2rem + 1vw, 1.9rem)/1.15 var(--font-display); color: var(--sun); }
  .bq-gift__title span { display: block; margin-top: .25rem; font: 600 1rem/1.4 var(--font-text); color: var(--on-deep-2); }
  .bq-gift__title .bb { background: var(--sun); color: var(--ink); border-radius: 30%; padding: 0 .1em; }
  .bq-gift__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
  .bq-gift__list li { display: flex; gap: .55rem; align-items: flex-start; font-weight: 650; line-height: 1.4; }
  .bq-gift__list .i { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .15em; color: var(--sun); stroke-width: 2.6; }
  .bq-other { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: var(--step--1); }
  .bq-other a { color: var(--ink); font-weight: 750; }

  /* the two covers: the free one peeks out behind, with its "Free" ribbon */
  .bq-mock { position: relative; justify-self: center; width: min(60vw, 260px); aspect-ratio: 210 / 297; margin-right: 30%; }
  .bq-mock__cover { position: absolute; inset: 0; border-radius: 14px; box-shadow: var(--shadow-2); padding: 18px 16px; display: flex;
    flex-direction: column; gap: 10px; overflow: hidden; }
  .bq-mock__cover--stay { background: var(--sun); color: var(--ink); }
  .bq-mock__cover--wisdom { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
  .bq-mock__cover.is-free { transform: rotate(7deg) translate(30%, -3%); overflow: visible; align-items: flex-end; text-align: right; padding-top: 56px; }
  .bq-mock__cover.is-free .bq-mock__title { max-width: 34%; font-size: clamp(1rem, 3.4vw, 1.25rem); }
  .bq-mock__cover:not(.is-free) { transform: rotate(-3deg); }
  .bq-mock__free { position: absolute; top: 14px; right: -18px; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem;
    border-radius: var(--r-pill); background: #B3261E; color: #fff; font: 800 .8rem/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
    transform: rotate(8deg); box-shadow: 0 6px 14px -6px rgba(58, 42, 34, .55); }
  .bq-mock__free .i { width: 1.05em; height: 1.05em; }
  .bq-mock__brand { font: 800 1rem/1 var(--font-display); }
  .bq-mock__brand--ww { color: #8A3B2C; letter-spacing: .02em; }
  .bq-mock__brand .bb, .bq-hero h1 .bb { background: var(--ink); color: var(--sun); border-radius: 30%; padding: 0 .1em; }
  .bq-hero h1 .bb { background: var(--sun); color: var(--ink); }
  .bq-mock__title { font: 750 clamp(1.3rem, 5vw, 1.7rem)/1.05 var(--font-display); text-wrap: balance; }
  .bq-mock__cats { margin-top: auto; display: flex; align-items: flex-end; }
  .bq-mock__cats .wc-cat { width: 44%; height: auto; } .bq-mock__cats .wc-cat + .wc-cat { width: 38%; margin-left: -6%; }

  /* ------------------------------------------------------------------ the form */
  .bq-stage { padding: var(--space-6) 0 calc(var(--space-8) + var(--bar-h, 0px)); background: var(--paper-2); }
  .bq-form { position: relative; max-width: 44rem; margin-inline: auto; display: grid; gap: var(--space-5); }
  .bq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .bq-bar { height: 6px; border-radius: 3px; background: rgba(58, 42, 34, .1); overflow: hidden; }
  .bq-bar span { display: block; height: 100%; width: 0; background: var(--sun-deep); border-radius: 3px; transition: width .4s var(--ease-out); }
  html:not(.js) .bq-bar { display: none; }
  .bq-step { margin: 0; padding: var(--space-5); border: 0; border-radius: var(--r-lg); background: var(--paper-3); box-shadow: var(--shadow-1); min-width: 0; }
  .bq-q { display: flex; gap: .6rem; align-items: flex-start; padding: 0; margin-bottom: var(--space-3);
    font: 700 clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem)/1.15 var(--font-display); color: var(--ink); text-wrap: balance; }
  .bq-q { float: left; width: 100%; }               /* keeps the legend INSIDE the card — a legend otherwise straddles the top border */
  .bq-q + * { clear: both; }
  .bq-n { display: inline-flex; align-items: center; gap: .15rem; flex: 0 0 auto; margin-top: .35em; font: 800 .95rem/1 var(--font-text); color: var(--amber); }
  .bq-n .i { width: .9em; height: .9em; }
  .bq-hint { margin: calc(-1 * var(--space-1)) 0 var(--space-4); color: var(--ink-3); font-size: var(--step--1); }
  .bq-input { width: 100%; padding: .6rem 0 .5rem; border: 0; border-bottom: 2.5px solid var(--line-strong); border-radius: 0; background: transparent;
    font: 600 1.25rem/1.3 var(--font-text); color: var(--ink); transition: border-color var(--dur-2); }
  .bq-input::placeholder { color: var(--ink-3); opacity: .75; }
  .bq-input:focus { outline: none; border-bottom-color: var(--sun-deep); }
  .bq-input:focus-visible { box-shadow: 0 2px 0 0 var(--sun-deep); }
  .bq-choices { display: grid; gap: var(--space-2); }
  .bq-choice { position: relative; display: block; cursor: pointer; }
  .bq-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .bq-choice span { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .55rem 1rem; border-radius: var(--r-sm);
    border: 1.5px solid var(--line-strong); background: var(--paper); font-weight: 700; font-size: 1.05rem;
    transition: background-color var(--dur-1), border-color var(--dur-1), transform var(--dur-1); }
  .bq-choice kbd { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border-radius: 6px;
    border: 1.5px solid var(--line-strong); font: 800 .8rem/1 var(--font-text); color: var(--ink-2); background: var(--paper-3); }
  .bq-choice:hover span { border-color: var(--ink-2); }
  .bq-choice input:checked + span { background: var(--sun-soft); border-color: var(--sun-deep); }
  .bq-choice input:checked + span kbd { background: var(--sun-deep); border-color: var(--sun-deep); color: #fff; }
  .bq-choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
  .bq-error { margin: var(--space-2) 0 0; min-height: 1.3em; color: var(--err); font-weight: 700; font-size: var(--step--1); }
  .bq-error:empty { min-height: 0; margin: 0; }
  .bq-error--top { padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: #FDECEA; }
  .has-error .bq-input { border-bottom-color: var(--err); animation: bq-glow 1.6s var(--ease-out) 2; }
  .bq-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
  .bq-ok, .bq-go { min-height: 48px; }
  .bq-enter { color: var(--ink-3); font-size: .85rem; }
  .bq-back { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .5rem; border: 0; background: none; color: var(--ink-2);
    font: 700 .95rem/1 var(--font-text); cursor: pointer; }
  .bq-back .i { transform: rotate(180deg); width: 1em; height: 1em; }
  .bq-privacy { display: flex; gap: .6rem; align-items: flex-start; margin: 0; color: var(--ink-3); font-size: var(--step--1); }
  .bq-privacy .i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem; color: var(--sage-deep); }
  .bq-go.is-busy { pointer-events: none; opacity: .85; }
  .bq-go.is-busy .i { animation: bq-spin 1s linear infinite; }

  /* one question at a time (JS) */
  .bq-form.is-live .bq-step { display: none; }
  .bq-form.is-live .bq-step.is-current { display: block; animation: bq-in .35s var(--ease-out); }
  .bq-form.is-live .bq-step.is-back { animation-name: bq-in-back; }
  .bq-form:not(.is-live) .bq-nav { display: none; }                     /* no JS: one submit at the end (noscript) */
  .bq-form:not(.is-live) .bq-step:last-of-type .bq-nav { display: flex; }
  .bq-form:not(.is-live) .bq-step:last-of-type .bq-back { display: none; }

  /* done */
  .bq-done { max-width: 44rem; margin-inline: auto; padding: var(--space-6) var(--space-5); border-radius: var(--r-lg); background: var(--paper-3);
    box-shadow: var(--shadow-1); text-align: center; }
  .bq-done:focus { outline: none; }
  .bq-done h2 { font-size: var(--step-3); margin: var(--space-3) 0; }
  .bq-done__cats { display: flex; justify-content: center; align-items: flex-end; }
  .bq-done__cats .wc-cat { width: 110px; height: auto; } .bq-done__cats .wc-cat + .wc-cat { width: 95px; margin-left: -14px; }
  .bq-done__cats #bq-done-a .wc-cat__head { transform-box: fill-box; transform-origin: 50% 92%; transform: rotate(9deg); }
  .bq-done__cats #bq-done-b .wc-cat__head { transform-box: fill-box; transform-origin: 50% 92%; transform: rotate(-9deg); }
  .bq-done__ref { color: var(--ink-3); font-size: var(--step--1); }
  .bq-done__pack { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 0 var(--space-3); font-weight: 800; }
  .bq-done__pack a { display: inline-flex; align-items: center; min-height: 44px; color: var(--amber); }
  .bq-done__pack .i { color: var(--ok); flex: none; }
  .bq-done__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }

  @media (min-width: 640px) {
    .bq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-step { padding: var(--space-6) var(--space-7); }
  }
  @media (min-width: 960px) {
    .bq-hero__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
    .bq-mock { width: min(26vw, 320px); }
  }
  /* Two columns, narrow: the headline is 3 lines in Fraunces but 2 in the fallback font — reserve the 3rd line so the
     form doesn't jump when the font lands (CLS 0.13 → ~0 at 1194 px). */
  @media (min-width: 960px) and (max-width: 1204px) { .bq-hero h1 { min-height: 3lh; } }   /* Fraunces: 3 lines ≤ 1200, 2 from 1210 */
  .bq-start { margin-top: var(--space-5); }
  @media (max-width: 639px) {
    .bq-mock { display: none; }                                        /* phones: get to the first question fast */
    .bq-start { width: 100%; justify-content: center; }
    .bq-input { font-size: 1.2rem; }                                   /* ≥ 16 px: no iPhone focus zoom */
    .bq-enter { display: none; }
    .bq-nav .btn { flex: 1 1 auto; justify-content: center; }
  }

  @keyframes bq-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes bq-in-back { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
  @keyframes bq-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 6px 18px -6px rgba(179, 38, 30, .45); } }
  @keyframes bq-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .bq-form.is-live .bq-step.is-current, .has-error .bq-input, .bq-go.is-busy .i { animation: none; }
    .bq-bar span { transition: none; }
  }
}