/* AmISaved.net shared styles. Used by index.html and trusted.html. */
  /* Design: page feel from BibleProject (huge tight headlines, 18px reading text, big spacing, soft tinted bands),
     quiz feel from Duolingo (top progress bar, one question per screen, chunky tiles, bottom action bar, color feedback).
     Research notes: Wiki/ministry/amisaved-design-research.md */
  :root {
    --blue: #1E3A5F;
    --blue-deep: #142A46;
    --blue-lip: #0E1F35;
    --ink: #142A46;
    --muted: #5B6B80;
    --paper: #FFFDF8;
    --cream: #F7F3EA;
    --sand: #F1E9D8;
    --mist: #E8EEF3;
    --gold: #C9A45C;
    --gold-light: #E3C88E;
    --gold-soft: rgba(201,164,92,0.18);
    --line: #E7E0D2;
    --line-dark: #D8CFBD;
    --green: #2F8F4E;
    --green-deep: #1F6B38;
    --green-bg: #E3F4E6;
    --red: #C2412D;
    --red-deep: #962F1F;
    --red-bg: #FBE7E2;
    --gutter: 24px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    background: var(--paper); color: var(--ink);
    font-size: 18px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
  .wrap { max-width: 1144px; margin: 0 auto; padding: 0 var(--gutter); }
  .narrow { max-width: 680px; margin: 0 auto; }
  .cross { display: block; color: var(--blue); }
  .word { font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .net { color: var(--gold); }

  /* Buttons: Duolingo-style chunky button with a lip, in AmISaved blue */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 32px; border: 0; border-radius: 16px; cursor: pointer;
    background: var(--blue); color: var(--paper);
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; text-decoration: none;
    box-shadow: 0 4px 0 var(--blue-lip);
    transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .btn:hover { background: var(--blue-deep); }
  .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--blue-lip); }
  /* Main call to action: the site's gold "tap me" ring, keeping the button's lip. Stops while pressed. */
  .btn.cta-pulse { animation: ctapulse 2.2s ease-out 1s infinite; }
  .btn.cta-pulse:active { animation: none; }
  @keyframes ctapulse {
    0% { box-shadow: 0 4px 0 var(--blue-lip), 0 0 0 0 rgba(201,164,92,.6); }
    70%, 100% { box-shadow: 0 4px 0 var(--blue-lip), 0 0 0 16px rgba(201,164,92,0); }
  }
  .btn.small { min-height: 42px; padding: 0 18px; font-size: .95rem; border-radius: 12px; box-shadow: 0 3px 0 var(--blue-lip); }
  .btn.small:active { transform: translateY(3px); box-shadow: none; }
  .link { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
  .link:hover { border-color: var(--blue); }

  /* Header */
  header.site { position: sticky; top: 0; z-index: 20; background: rgba(255,253,248,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
  header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand .cross { width: 15px; height: 23px; }
  .brand .word { font-size: 1.15rem; }
  /* Header links (nav.js). Wide screens show the links, smaller ones get a menu button. */
  header.site { transition: box-shadow .2s ease; }
  header.site.scrolled, header.site.menu-open { box-shadow: 0 2px 0 var(--line); }
  header.site .wrap { gap: 12px; }
  .brand { margin-right: auto; }
  .nav { display: none; }
  .nav a { font-weight: 600; font-size: .95rem; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
  .nav a:hover, .nav a[aria-current] { border-color: var(--gold); }
  header.site .btn.small .sm { display: none; }
  .menu-btn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; cursor: pointer; background: #fff; color: var(--ink); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
  .menu-btn:hover { border-color: var(--line-dark); }
  .menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
  .menu-btn path { transition: transform .2s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
  .menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
  .menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
  .m-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 8px var(--gutter) 22px; display: grid; gap: 10px; box-shadow: 0 2px 0 var(--line), 0 18px 30px rgba(20,42,70,.10); animation: mdrop .2s ease both; }
  .m-menu[hidden] { display: none; }
  .m-menu a:not(.btn) { display: block; padding: 15px 18px; background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px; text-decoration: none; font-weight: 600; }
  .m-menu a:not(.btn):hover, .m-menu a[aria-current] { border-color: var(--line-dark); }
  .m-menu a[aria-current] { color: var(--gold); }
  .m-menu .btn { width: 100%; margin-top: 4px; }
  @keyframes mdrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @media (max-width: 759px) {
    header.site .btn.small { min-height: 42px; padding: 0 16px; }
    header.site .btn.small .lg { display: none; }
    header.site .btn.small .sm { display: inline; }
  }
  @media (min-width: 1080px) {
    header.site .wrap { gap: 24px; }
    .nav { display: flex; gap: 22px; }
    .menu-btn, .m-menu { display: none !important; }
  }

  /* Hero */
  .hero { text-align: center; padding: 48px 0 0; overflow: hidden; }
  .hero h1 { font-size: clamp(3.25rem, 13vw, 6.5rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; color: var(--ink); text-wrap: balance; }
  .hero .lede { font-size: clamp(1.1rem, 2.6vw, 1.35rem); color: var(--muted); margin: 18px auto 32px; max-width: 36ch; line-height: 1.5; text-wrap: balance; }
  .hero .meta { display: block; margin-top: 18px; font-size: .9rem; color: var(--muted); }

  /* Hero fan: preview cards of the quiz, like BibleProject's fanned artwork cards */
  .fan { position: relative; height: 330px; margin: 40px auto 0; max-width: 980px; }
  .fan .pc {
    position: absolute; left: 50%; top: 34px; width: 280px; padding: 22px 20px 26px;
    background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 22px;
    text-align: left; box-shadow: 0 18px 40px rgba(20,42,70,.10);
  }
  .fan .pc .pl { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
  .fan .pc .pq { font-size: 1.15rem; font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
  .fan .pc .pt { border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 12px; padding: 9px 12px; font-size: .9rem; font-weight: 500; margin-top: 8px; }
  .fan .pc .pt.ok { border-color: var(--green); background: var(--green-bg); color: var(--green-deep); font-weight: 700; }
  .fan .c1 { transform: translateX(-50%) translateX(-300px) rotate(-8deg); background: var(--cream); }
  .fan .c2 { transform: translateX(-50%) translateY(-24px); z-index: 2; }
  .fan .c3 { transform: translateX(-50%) translateX(300px) rotate(8deg); background: var(--mist); }

  /* Sections */
  section.band { padding: 96px 0; }
  .band.mist { background: var(--mist); }
  .band.cream { background: var(--cream); }
  .eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; text-align: center; }
  h2.big { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-align: center; margin-bottom: 48px; }

  /* The Gospel in 4 lines: one path read top to bottom. Numbers sit on a thin gold line; step 4 is the navy ending. */
  .g-path { list-style: none; max-width: 660px; margin: 0 auto; }
  .g-path li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 36px; text-align: left; }
  .g-path li::before { content: ''; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; border-radius: 2px; background: rgba(201,164,92,.55); }
  .g-path li.end::before { display: none; }
  .g-path .n { width: 44px; height: 44px; border-radius: 14px; background: var(--blue); color: var(--paper); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; }
  .g-path strong { display: block; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; margin: 8px 0 6px; }
  .g-path p { color: var(--muted); font-size: 1rem; line-height: 1.55; }
  .g-path .verse { margin-top: 12px; border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; color: #4A5A6E; }
  .g-path .verse cite { font-size: .82rem; }
  .g-path li.end { background: var(--blue-deep); color: var(--paper); border-radius: 22px; padding: 26px 22px; gap: 16px; box-shadow: 0 18px 40px rgba(20,42,70,.18); }
  .g-path li.end .n { background: var(--gold); color: var(--blue-deep); }
  .g-path li.end strong { font-size: 1.4rem; margin-top: 6px; }
  .g-path li.end p { color: rgba(255,253,248,.82); }
  .g-path li.end .verse { color: rgba(255,253,248,.82); }
  .g-path li.end .verse cite { color: var(--gold-light); }
  /* Fire on the path (gospel-path.js): burns down from step 1, goes out at the cross on step 3 */
  .g-path { position: relative; }
  .g-path .n { position: relative; z-index: 2; }
  .g-fire { position: absolute; left: 20px; width: 4px; border-radius: 4px; z-index: 1; pointer-events: none;
    transform-origin: top; transform: scaleY(0); will-change: transform;
    background: linear-gradient(#C2412D, #F2701F); box-shadow: 0 0 10px rgba(242,112,31,.55), 0 0 22px rgba(194,65,45,.3);
    transition: background .7s ease, box-shadow .7s ease; }
  .g-flame { position: absolute; left: 22px; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
  .g-flame i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #FFE7B0 0%, #F7931E 42%, rgba(194,65,45,0) 72%); }
  .g-flame.on { opacity: 1; }
  .g-flame.on i { animation: flick .32s ease-in-out infinite alternate; }
  @keyframes flick { from { transform: scale(.85); } to { transform: scale(1.15); } }
  .g-path.saved .g-fire { background: var(--gold); box-shadow: none; }
  .g-path .n-num, .g-path .n-cross { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s ease; }
  .g-path .n-cross { width: 13px; height: 20px; color: var(--paper); opacity: 0; transform: scale(.4); }
  .g-path.saved li:nth-child(3) .n-num { opacity: 0; transform: scale(.4); }
  .g-path.saved li:nth-child(3) .n-cross { opacity: 1; transform: none; }
  .g-path.saved li:nth-child(3) .n { animation: crossflash .9s ease-out; }
  .g-path.still li:nth-child(3) .n { animation: none; }
  @keyframes crossflash { 0% { box-shadow: 0 0 0 0 rgba(242,112,31,.7); } 100% { box-shadow: 0 0 0 18px rgba(201,164,92,0); } }
  .g-zero { display: inline-block; margin: 2px 0 10px; padding: 3px 12px; border-radius: 999px; background: var(--gold); color: var(--blue-deep); font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .4s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
  .g-path.saved .g-zero { opacity: 1; transform: none; transition-delay: .35s; }
  .g-path li.end { transition: box-shadow .6s ease; }
  .g-path.saved li.end { box-shadow: 0 0 0 3px rgba(201,164,92,.35), 0 18px 40px rgba(20,42,70,.18); }
  @media (max-width: 759px) {
    /* Phones: number on top so the ending gets the card's full width */
    .g-path li.end { grid-template-columns: 1fr; gap: 12px; padding: 24px 22px; }
    .g-path li.end .n { width: 40px; height: 40px; }
    .g-path li.end strong { font-size: 1.3rem; margin-top: 0; }
  }
  .g-choice { max-width: 660px; margin: 24px auto 0; border: 1px solid var(--line-dark); border-radius: 22px; background: var(--paper); text-align: left; }
  .g-choice > div { padding: 22px 22px 20px; }
  .g-choice > div + div { border-top: 1px solid var(--line); }
  .g-choice strong { display: block; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--blue-deep); }
  .g-choice .verse { margin-top: 10px; border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; color: #4A5A6E; font-size: 1rem; line-height: 1.55; }
  .g-choice .verse cite { font-size: .82rem; }
  .center-cta { text-align: center; margin-top: 48px; }

  .steps { display: grid; gap: 36px; }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
  .icon { width: 64px; height: 64px; border: 2.5px solid var(--ink); border-radius: 18px; display: grid; place-items: center; }
  .icon svg { width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .step strong { display: block; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 4px; }
  .step p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin-bottom: 10px; }

  .feature { background: var(--sand); border-radius: 28px; padding: 56px 24px; text-align: center; }
  .feature h2.big { margin-bottom: 20px; }
  .feature p { max-width: 34em; margin: 0 auto 16px; color: #3A4A5E; }
  .verse { font-style: italic; color: var(--muted); }
  .verse cite { display: block; font-style: normal; font-weight: 700; font-size: .85rem; color: var(--ink); margin-top: 4px; }
  .feature .verse { margin: 28px auto 32px; font-size: 1.15rem; }

  footer.site { background: var(--blue-deep); color: var(--cream); padding: 64px 0 40px; text-align: center; }
  footer.site .cross { color: var(--cream); width: 22px; height: 34px; margin: 0 auto 14px; }
  footer.site .word { font-size: 1.5rem; margin-bottom: 26px; }
  footer.site .links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; font-size: 1rem; }
  footer.site .links a { text-decoration: none; opacity: .9; }
  footer.site .links a:hover { opacity: 1; text-decoration: underline; }
  footer.site .credit { font-size: .78rem; opacity: .6; max-width: 46em; margin: 0 auto; line-height: 1.5; }
  footer.site .foot-bar { border-top: 1px solid rgba(247,243,234,.16); padding-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; }
  footer.site .foot-bar .credit { margin: 0; }
  footer.site .social { display: flex; gap: 12px; }
  footer.site .social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease; }
  footer.site .social a:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,.28); }
  footer.site .social a:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
  footer.site .social a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  footer.site .social svg { width: 28px; height: 28px; }
  footer.site .social .s-yt { background: #FF0000; }
  footer.site .social .s-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
  footer.site .social .s-mail { background: var(--gold); }

  @media (min-width: 760px) {
    :root { --gutter: 48px; }
    .g-path strong { font-size: 1.4rem; }
    .g-path li.end { padding: 34px 34px 32px; }
    .g-path li.end strong { font-size: 1.6rem; }
    header.site .wrap { height: 76px; }
    .hero { padding-top: 88px; }
    .fan { height: 340px; margin-top: 48px; }
    section.band { padding: 120px 0; }
    .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .step { grid-template-columns: 1fr; gap: 18px; }
    .feature { padding: 88px 48px; }
    footer.site .links { flex-direction: row; justify-content: center; gap: 32px; }
    footer.site .foot-bar { flex-direction: row; align-items: center; gap: 32px; }
    footer.site .social { flex-shrink: 0; }
  }
  @media (max-width: 759px) {
    /* Phone: a neat stacked deck instead of a wide fan. The front card shows, two cards tilt out behind it. */
    .fan { height: 300px; margin-top: 36px; }
    .fan .pc { width: min(290px, calc(100vw - 72px)); top: 28px; }
    .fan .c1, .fan .c3 { height: 200px; }
    .fan .c1 > *, .fan .c3 > * { visibility: hidden; }
    .fan .c1 { transform: translateX(-50%) translateX(-14px) rotate(-7deg); }
    .fan .c3 { transform: translateX(-50%) translateX(14px) rotate(6deg); }
    .fan .c2 { transform: translateX(-50%); }
  }

  /* ===== Quiz (full screen, Duolingo structure) ===== */
  .quiz { position: fixed; inset: 0; z-index: 50; background: var(--paper); display: none; flex-direction: column; }
  body.quizzing { overflow: hidden; }
  body.quizzing .quiz { display: flex; }
  .q-top { padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 0; }
  .q-top .row { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 16px; height: 44px; }
  .q-icon { width: 36px; height: 36px; flex: none; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: #9AA5B3; }
  .q-icon:hover { color: var(--ink); background: var(--cream); }
  .q-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .q-icon[hidden] { visibility: hidden; display: grid; }
  .bar { flex: 1; height: 16px; border-radius: 8px; background: #ECE6D9; overflow: hidden; }
  .bar i { position: relative; display: block; height: 100%; width: 0; background: var(--gold); border-radius: 8px; transition: width .45s cubic-bezier(.3,.9,.4,1); }
  .bar i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); }

  .q-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 28px var(--gutter) 32px; }
  .card { max-width: 600px; margin: 0 auto; animation: rise .32s ease both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .part { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
  .part::before { content: ''; width: 18px; height: 18px; border-radius: 6px; background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Crect x='23' y='0' width='14' height='92' rx='3' fill='%23C9A45C'/%3E%3Crect x='0' y='22' width='60' height='14' rx='3' fill='%23C9A45C'/%3E%3C/svg%3E") center / 8px 12px no-repeat; }
  .q { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; margin-bottom: 28px; }
  .say { font-size: 1.25rem; line-height: 1.55; margin-bottom: 22px; }
  .say strong { display: block; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 10px; }
  .say a { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold); }
  .card .verse { border-left: 3px solid var(--gold); padding: 2px 0 2px 16px; margin: 0 0 18px; font-size: 1.02rem; line-height: 1.55; }

  .opts { display: grid; gap: 12px; }
  .opt {
    position: relative; width: 100%; text-align: left; cursor: pointer;
    font-size: 1.08rem; font-weight: 500; line-height: 1.35; color: var(--ink);
    background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px;
    padding: 16px 52px 16px 18px; min-height: 60px;
    transition: border-color .12s ease, background .12s ease, transform .06s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .opt:hover { border-color: var(--line-dark); }
  .opt:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
  .opt .key { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 8px; font-size: .78rem; font-weight: 700; color: #A9B2BE; display: none; place-items: center; }
  .opt:disabled { cursor: default; }
  .opt:disabled:active { transform: none; border-bottom-width: 4px; margin-bottom: 0; }
  .opt.right { border-color: var(--green); background: var(--green-bg); color: var(--green-deep); font-weight: 700; }
  .opt.wrong { border-color: var(--red); background: var(--red-bg); color: var(--red-deep); }
  /* After a wrong answer the green one pulses (ring plus a gentle swell) so it's obvious to tap it */
  .opt.right.tapme { animation: tapme 1.5s ease-out .3s infinite; }
  @keyframes tapme {
    0% { box-shadow: 0 0 0 0 rgba(47,143,78,.55); transform: scale(1); }
    25% { transform: scale(1.025); }
    55% { transform: scale(1); }
    70%, 100% { box-shadow: 0 0 0 12px rgba(47,143,78,0); }
  }
  .opt.picked { border-color: var(--blue); background: var(--mist); font-weight: 600; }
  .opt.dim { opacity: .45; }
  .opt .mark { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 700; }
  .opt.right .mark { background: var(--green); }
  .opt.wrong .mark { background: var(--red); }
  .opt.pulse { animation: pulse .35s ease; }
  @keyframes pulse { 40% { transform: scale(1.025); } }
  .opt.shake { animation: shake .3s ease; }
  @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

  /* Bottom action bar + feedback band (Duolingo pattern) */
  .q-foot { border-top: 2px solid #EFE9DC; background: var(--paper); padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); transition: background .2s ease, border-color .2s ease; }
  .q-foot:empty { display: none; }
  .q-foot .in { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
  .q-foot .btn { width: 100%; }
  .q-foot.good { background: var(--green-bg); border-color: transparent; }
  .q-foot.bad { background: var(--red-bg); border-color: transparent; }
  .q-foot.note { background: var(--cream); border-color: transparent; }
  .q-foot.slide { animation: slideup .25s ease both; }
  @keyframes slideup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .fb { display: flex; gap: 14px; align-items: flex-start; max-height: 44vh; overflow-y: auto; }
  .fb > div { max-width: 660px; }
  .fb .badge { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; }
  .q-foot.good .badge { color: var(--green); }
  .q-foot.bad .badge { color: var(--red); }
  .q-foot.note .badge { color: var(--gold); }
  .fb h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 8px 0 6px; }
  .q-foot.good h3 { color: var(--green-deep); }
  .q-foot.bad h3 { color: var(--red-deep); }
  .fb p { font-size: 1rem; line-height: 1.5; color: var(--ink); }
  .fb .verse { margin-top: 10px; font-size: .95rem; border-left: 3px solid var(--gold); padding-left: 12px; }
  .fb .hint { margin-top: 10px; font-weight: 700; color: var(--green-deep); }
  .q-foot.good .btn { background: var(--green); box-shadow: 0 4px 0 var(--green-deep); }
  .q-foot.good .btn:active { box-shadow: none; }

  .end { text-align: center; }
  .end .cross { width: 46px; height: 70px; margin: 16px auto 24px; }
  .end .q { margin-bottom: 14px; }
  .end-links { display: grid; gap: 12px; margin: 28px 0 8px; text-align: left; }
  .end-links a { display: block; padding: 16px 18px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px; background: #fff; text-decoration: none; font-weight: 600; }
  .end-links a:hover { border-color: var(--line-dark); }

  @media (min-width: 760px) {
    .q-body { padding-top: 56px; }
    .opt .key { display: grid; }
    .opt.right .key, .opt.wrong .key { display: none; }
    .q-foot { padding-top: 22px; padding-bottom: 22px; }
    .q-foot .in { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
    .q-foot .btn { width: auto; min-width: 180px; }
    .q-foot .in > .btn:only-child { margin-left: auto; }
    .fb { max-height: 34vh; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

/* ===== Gospel story: 3 painted scenes that crossfade as you scroll =====
   Light by design: 3 WebP images (~150 KB total), lazy-loaded, opacity/transform only, one IntersectionObserver. */
.story { position: relative; padding: 96px 0 40px; background: var(--blue-deep); color: var(--paper); }
.story .eyebrow { color: var(--gold-light); }
.story h2.big { color: var(--paper); margin-bottom: 16px; }
.story .sub { text-align: center; color: rgba(255,253,248,.7); margin: 0 auto 48px; max-width: 30em; }
.story-grid { position: relative; }
.story-pin { position: sticky; top: 76px; z-index: 1; }
.frame { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: #1a2b40; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.frame picture, .frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame img { object-fit: cover; opacity: 0; transform: scale(1.0); transition: opacity .9s ease, transform 9s ease-out; will-change: opacity; }
.frame .on img { opacity: 1; transform: scale(1.06); }
/* Fire glow: a soft warm light that breathes on the fire side (opacity only, paused off-screen) */
.frame .glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 18% 45%, rgba(255,170,60,.38), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .9s ease; }
.frame[data-step="2"] .glow, .frame[data-step="3"] .glow { opacity: 1; animation: breathe 2.6s ease-in-out infinite; }
.story:not(.inview) .glow { animation-play-state: paused; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px; background: linear-gradient(to top, rgba(14,31,53,.92), rgba(14,31,53,.6) 60%, transparent); }
.cap p { position: absolute; left: 20px; right: 20px; bottom: 18px; margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.cap p.on { opacity: 1; transform: none; }
.dots { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s ease, width .3s ease; }
.dots i.on { background: #fff; width: 22px; border-radius: 4px; }
/* Scroll triggers: on phones they're invisible spacers; on desktop they hold the text */
.steps-s { position: relative; z-index: 0; }
.st { min-height: 75vh; display: flex; align-items: center; }
.st .txt { display: none; }
.st:last-child { min-height: 60vh; }
.story-end { text-align: center; padding: 48px 0 80px; position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.story-end .therefore { font-size: clamp(1.7rem, 6vw, 2.8rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 20px; }
.story-end .verse { color: rgba(255,253,248,.75); font-size: 1.05rem; margin: 0 auto 32px; max-width: 34em; }
.story-end .verse cite { color: var(--gold-light); }
.story-end .btn { background: var(--gold); color: var(--blue-deep); box-shadow: 0 4px 0 #9C7C3C; }
.story-end .btn:active { box-shadow: none; }
@media (max-width: 759px) {
  .story-pin { top: max(76px, calc(50vh - (100vw - 48px) / 2 + 20px)); }
  .frame { max-height: calc(100vh - 110px); max-width: calc(100vh - 110px); margin: 0 auto; }
}
@media (min-width: 760px) {
  .story { padding: 120px 0 40px; }
  .story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
  .story-pin { top: max(96px, calc(50vh - 280px + 30px)); }
  .frame { max-width: 560px; }
  .cap { display: none; }
  .st { min-height: 90vh; }
  .st .txt { display: block; opacity: .25; transition: opacity .5s ease; }
  .st.on .txt { opacity: 1; }
  .st .txt h3 { font-size: 2.2rem; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 16px; }
  .st .txt .verse { color: rgba(255,253,248,.75); font-size: 1.05rem; border-left: 3px solid var(--gold); padding-left: 16px; }
  .st .txt .verse cite { color: var(--gold-light); }
}
@media (prefers-reduced-motion: reduce) {
  .frame img, .frame .on img { transform: none; }
  .frame .glow { animation: none !important; }
}

/* Video mode: the clip plays in the frame, no scroll pinning, captions follow the clip */
.frame .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.story.video .frame .vid { display: block; }
.story.video .frame .glow { display: none; }
.story.video .story-pin { position: relative; top: auto; }
.story.video .st { min-height: 0; padding: 14px 0; }
.story.video .story-end { padding-top: 64px; }
@media (max-width: 759px) { .story.video .steps-s { display: none; } }
@media (min-width: 760px) { .story.video .story-grid { align-items: center; } }

/* Breathing room between the dark Gospel picture and the About card */
.about-band { padding-top: 72px; }
@media (min-width: 760px) { .about-band { padding-top: 104px; } }

/* 100% / 0% labels: fade in over the final frame (Jesus by the cross base, the man by his feet) */
.pct { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pct > div { position: absolute; top: 81%; white-space: nowrap; transform: translate(-50%, 8px); opacity: 0; transition: opacity .7s ease, transform .7s ease; text-align: center; border-radius: 14px; padding: 6px 12px 7px; line-height: 1.05; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.pct b { display: block; font-size: clamp(1.25rem, 5vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; }
.pct span { display: block; font-size: clamp(.62rem, 2.4vw, .8rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.pct-j { left: 47%; background: #B83A1E; color: #fff; }
.pct-m { left: 80%; background: var(--paper); color: var(--blue-deep); transition-delay: .5s !important; }
.frame.pct-on .pct > div { opacity: 1; transform: translate(-50%, 0); }

/* Big replay: a round button in the empty sky, appears after the labels */
.replay-big { position: absolute; left: 82%; top: 17%; transform: translate(-50%, -50%); z-index: 3; width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,253,248,.92); color: var(--blue-deep); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.3); animation: popin .4s ease both; }
.replay-big svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.replay-big:hover { background: #fff; }
.replay-big[hidden] { display: none; }
/* Play button when the phone blocks autoplay (Low Power Mode): centered on the first frame */
.play-big { left: 50%; top: 50%; width: 84px; height: 84px; }
.play-big svg { fill: currentColor; stroke: none; width: 38px; height: 38px; margin-left: 5px; }
@keyframes popin { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Progress line under the video, captions under it on phones, then the Watch again button */
.vprog { display: none; height: 4px; border-radius: 4px; background: rgba(255,253,248,.15); margin: 12px auto 0; overflow: hidden; }
.vprog i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 4px; }
.story.video .vprog { display: block; }
.cap-out { display: none; }
.replay-row { text-align: center; margin-top: 16px; }
.replay-btn { background: var(--paper); color: var(--blue-deep); box-shadow: 0 3px 0 #B9AE97; }
.replay-btn:hover { background: #fff; }
.replay-btn[hidden] { display: none; }
@media (max-width: 759px) {
  .story.video .cap { display: none; }
  .story.video .cap-out { display: grid; margin-top: 14px; text-align: center; min-height: 3.2em; }
  .story.video .cap-out p { grid-area: 1 / 1; font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; opacity: 0; transition: opacity .5s ease; }
  .story.video .cap-out p.on { opacity: 1; }
  .story.video .vprog, .story.video .cap-out, .story.video .replay-row { max-width: calc(100vh - 110px); margin-left: auto; margin-right: auto; }
}
@media (min-width: 760px) { .story-pin { max-width: 560px; width: 100%; } }
@media (max-width: 759px) { .replay-big { width: 56px; height: 56px; } .replay-big svg { width: 26px; height: 26px; } }
@media (max-width: 759px) { .play-big { width: 72px; height: 72px; } .play-big svg { width: 32px; height: 32px; } }
@media (max-width: 759px) { .story:not(.video) .pct { display: none; } }

/* Tap-to-explain words (glossary.js) */
.term { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; border-bottom: 2px dotted var(--gold); border-radius: 0; cursor: pointer; line-height: inherit; text-align: inherit; }
.term:hover, .term[aria-expanded="true"] { border-bottom-style: solid; }
.term:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gl-pop { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; background: #fff; color: var(--ink); text-align: left; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 22px; padding: 20px 22px 18px; box-shadow: 0 16px 40px rgba(20,42,70,.22); animation: glup .22s ease both; }
.gl-word { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 40px 8px 0; }
.gl-def { font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 0 0 14px; font-style: normal; }
.gl-pop .verse { border-left: 3px solid var(--gold); padding: 2px 0 2px 14px; margin: 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.gl-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--mist); color: var(--blue); font: 700 1.4rem/1 inherit; cursor: pointer; display: grid; place-items: center; }
.gl-x:hover { background: var(--line); }
.gl-x:focus { outline: none; }
.gl-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes glup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) {
  .gl-pop { right: auto; bottom: auto; width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .gl-pop { animation: none; } }

/* Send to someone sheet (share.js) */
html.sh-open { overflow: hidden; }
.sh-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(14,31,53,.45); display: flex; align-items: flex-end; justify-content: center; animation: shfade .2s ease both; }
.sh { position: relative; width: 100%; max-height: 92vh; overflow-y: auto; background: var(--paper); color: var(--ink); text-align: left; border-radius: 26px 26px 0 0; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); animation: shup .26s ease both; }
.sh-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--mist); color: var(--blue); font: 700 1.5rem/1 inherit; cursor: pointer; display: grid; place-items: center; }
.sh-x:hover { background: var(--line); }
.sh-x:focus { outline: none; }
.sh-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sh-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 48px 8px 0; }
.sh-title { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.sh-lede { color: var(--muted); line-height: 1.5; margin-bottom: 18px; }
.sh-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 8px; }
.sh textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 16px; padding: 14px 16px; resize: vertical; margin-bottom: 16px; }
.sh textarea:focus { outline: none; border-color: var(--blue); }
.sh .sh-sms { display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin-bottom: 12px; text-decoration: none; }
.sh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-tile { flex: 1 1 0; min-width: 0; min-height: 50px; display: grid; place-items: center; padding: 0 10px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--ink); text-decoration: none; text-align: center; background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; cursor: pointer; }
.sh-tile:hover { border-color: var(--line-dark); }
.sh-tile:active { transform: translateY(2px); border-bottom-width: 2px; }
.sh-tile.ok { border-color: var(--green); background: var(--green-bg); color: var(--green-deep); }
@keyframes shfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) {
  .sh-wrap { align-items: center; }
  .sh { width: 480px; border-radius: 26px; padding: 34px 32px 30px; }
  .sh-title { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { .sh-wrap, .sh { animation: none; } }

/* ===== Hero mini quiz deck (deck.js). Phones: a swipeable 3D stack. Desktop: a live fan, the middle card is the question. ===== */
.deck { margin: 36px auto 0; padding-bottom: 8px; }
.deck-stage { position: relative; width: min(320px, calc(100vw - 56px)); margin: 0 auto; perspective: 900px; }
.dk {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 22px;
  padding: 22px 18px 18px; text-align: left;
  box-shadow: 0 18px 40px rgba(20,42,70,.10);
  transition: transform .62s cubic-bezier(.22,.8,.24,1), opacity .45s ease, background-color .45s ease;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.dk:nth-child(2) { background: var(--cream); }
.dk:nth-child(3) { background: var(--mist); }
.dk.front { background: #fff; }
.dk.dragging { transition: none; }
/* Phones: the answered card is thrown off (starts slow, speeds up), then the next card settles in a beat later */
.dk.leaving { transition: transform .5s cubic-bezier(.5,0,.75,.2), opacity .1s linear .45s, background-color .45s ease; }
.dk.arriving { transition-delay: .12s; }
/* Swiped by hand: carry on from the finger at speed, no slow start */
.dk.flung { transition: transform .38s cubic-bezier(.2,.7,.35,1), opacity .1s linear .3s, background-color .45s ease; }
/* Right answer: a quick pop with a soft green glow, then a line fills along the bottom until the card moves on */
/* .won keeps the glow; .win is only the pop, removed the moment a finger starts swiping so the card follows the finger */
.dk.won { box-shadow: 0 0 0 3px rgba(47,143,78,.12), 0 18px 40px rgba(20,42,70,.10); }
.dk.win { animation: winpop .55s cubic-bezier(.3,1.4,.5,1); }
@keyframes winpop {
  0% { transform: scale(1); box-shadow: 0 18px 40px rgba(20,42,70,.10); }
  40% { transform: scale(1.035) translateY(-4px); box-shadow: 0 0 0 6px rgba(47,143,78,.18), 0 22px 44px rgba(20,42,70,.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(47,143,78,.12), 0 18px 40px rgba(20,42,70,.10); }
}
.dk-bar { position: absolute; left: 20px; right: 20px; bottom: 10px; height: 4px; border-radius: 4px; background: var(--green-bg); overflow: hidden; }
.dk-bar::after { content: ''; position: absolute; inset: 0; background: var(--green); border-radius: 4px; transform-origin: left; animation: dkfill var(--wait, 1.6s) linear both; }
@keyframes dkfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dk .pl { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.dk .pq { font-size: 1.3rem; font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; margin-bottom: 16px; }
.dt {
  width: 100%; min-height: 52px; margin-top: 10px; padding: 12px 14px; text-align: left; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px;
  transition: border-color .12s ease, background .12s ease, color .12s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dt:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.dt.right { border-color: var(--green); background: var(--green-bg); color: var(--green-deep); font-weight: 700; }
.dt.wrong { border-color: var(--red); background: var(--red-bg); color: var(--red-deep); animation: shake .3s ease; }
.dk.done .dt:not(.right) { opacity: .4; }
/* Unanswered front card: answers pulse a soft gold ring so it's clear they can be tapped */
.dk.front:not(.done) .dt:not(.wrong) { animation: dtpulse 1.8s ease-out infinite; }
.dk.front:not(.done) .dt:not(.wrong) + .dt:not(.wrong) { animation-delay: .9s; }
@keyframes dtpulse { 0% { box-shadow: 0 0 0 0 rgba(201,164,92,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(201,164,92,0); } }
/* Answers sit at the bottom of the card. The note shows in the space between the question and the answers. */
.dk .dt { order: 3; }
.dfb { order: 2; flex: 1; margin: 0 2px 4px; font-size: .95rem; font-weight: 600; line-height: 1.45; }
.dfb.good { color: var(--green-deep); }
.dfb.bad { color: var(--red-deep); }
.dfb.hint { color: var(--muted); }
/* Tried to move on before answering: a small shake */
.dk.locked { animation: shake .3s ease; }
.dfb .try { display: table; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: var(--red); color: #fff; font-size: .85rem; font-weight: 700; letter-spacing: .01em; animation: trypop .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes trypop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* First card nudges side to side until someone touches the deck, so it reads as swipeable */
.deck.idle .dk.front { animation: nudge 3.6s ease-in-out 1.2s infinite; }
@keyframes nudge {
  0%, 62%, 100% { transform: none; }
  72% { transform: translateX(-16px) rotateY(10deg) rotate(-2deg); }
  84% { transform: translateX(8px) rotateY(-5deg) rotate(1deg); }
}
.dk-end { align-items: center; justify-content: center; text-align: center; }
.dk-end .cross { width: 26px; height: 40px; color: var(--blue); margin-bottom: 14px; }
.dk-end .pq { font-size: 1.5rem; margin-bottom: 22px; }
.dk-end .btn { width: 100%; }
.dk-again { margin-top: 14px; border: 0; background: none; font: inherit; font-weight: 600; font-size: .95rem; color: var(--muted); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.deck-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.deck-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line-dark); transition: width .3s ease, background .3s ease; }
.deck-dots i.on { width: 22px; background: var(--gold); }
.deck-hint { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--muted); transition: opacity .3s ease; }
.deck:not(.idle) .deck-hint { opacity: 0; }
@media (min-width: 760px) {
  .deck { margin-top: 44px; }
  .deck-stage { width: 340px; perspective: 1100px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  /* Side cards: the answered one on the left, the next one on the right. Click either to move there. */
  .dk.side { cursor: pointer; background: var(--cream); }
  .dk.side.next { background: var(--mist); }
  .dk.side > * { pointer-events: none; }
  .dk.front:hover { border-color: var(--line-dark); }
  .dk.tilting { transition: transform .12s ease-out, opacity .4s ease; }
  .deck-dots { margin-top: 28px; }
}

/* Jump bubbles (data-pulse, hints.js): the mini quiz gold ring, 3 pulses one after another, then rest */
[data-pulse].pulsing { animation: dtpulse 1.8s ease-out 3; }
[data-pulse].pulsing:nth-child(2) { animation-delay: .35s; }
[data-pulse].pulsing:nth-child(3) { animation-delay: .7s; }
[data-pulse].pulsing:nth-child(4) { animation-delay: 1.05s; }