/* ------ Reset ------ */
  .avf, .avf * { box-sizing: border-box; margin: 0; padding: 0; }
  .avf img, .avf iframe { display: block; width: 100%; }

  /* ------ Typeface ------
     Instrument Sans throughout: Bold 700 for titles, Medium 500 for body.
     !important because font-family and font-weight are inline on the markup. */
  .avf, .avf * { font-family: 'Instrument Sans', sans-serif !important; }
  .avf h1, .avf h2, .avf h3, .avf h4,
  .avf-faq-q                          { font-weight: 700 !important; }
  .avf p, .avf span                   { font-weight: 500 !important; }

  /* ------ Text colour ------
     Applied here rather than edited into each element: the colours are inline
     on the markup, so these need !important to win. */
  .avf h1, .avf h2, .avf h3, .avf h4 {
    color: #3A4150 !important;
    letter-spacing: 0.01em !important;   /* 1%   */
  }
  .avf p {
    color: #676767 !important;
    letter-spacing: 0.005em !important;  /* 0.5% */
  }

  /* ------ Fluid type ------
     Sizes were fixed px with hard jumps at the breakpoint; these interpolate
     smoothly instead. !important because the sizes are inline on the elements. */
  /* Headline uses the same ramp as the section headings. */
  .avf-h1, .avf-section-h { font-size: clamp(2rem, 3.9vw, 3.75rem) !important; }
  .avf-h1        { max-width: 11.5em; }   /* ~22 characters per line */
  /* Body sizes run through --avf-body-scale so mobile can trim them in one
     place (see the mobile block). */
  .avf { --avf-body-scale: 1; }
  .avf-hero-body     { font-size: calc(clamp(1.0625rem, 1.15vw, 1.25rem) * var(--avf-body-scale)) !important; }
  .avf-step-body     { font-size: calc(clamp(1rem, 0.95vw, 1.125rem) * var(--avf-body-scale)) !important; }
  .avf-faq-a p       { font-size: calc(1.125rem * var(--avf-body-scale)) !important; }
  .avf-ticker-item p { font-size: calc(0.875rem * var(--avf-body-scale)) !important; }
  .avf-step-h    { font-size: clamp(1.125rem, 1.25vw, 1.375rem) !important; }

  /* ------ Content inset ------
     The iframe is no longer pulled full-bleed out of the host container, so
     its width IS the host's content column and no measurement from the parent
     is needed. This is only a modest inset so text and the coloured bands do
     not sit hard against the column edge. Tune the one value below. */
  .avf { --avf-pad: clamp(16px, 3%, 40px); }

  /* Hero: copy and stripe graphic side by side, vertically centred. */
  .avf-hero-top  { display: flex; align-items: center; justify-content: space-between;
                   gap: 40px; margin-bottom: 96px; }   /* graphic stays flush right */
  .avf-hero-copy { flex: 1 1 auto; min-width: 0; }
  .avf-deco-hero { flex: 0 0 auto; width: clamp(150px, 20%, 320px); aspect-ratio: 1; }

  /* ------ Decorative wheels ------
     Flush with the content edge, not centred on it. The page used to be
     pulled full-bleed, so a wheel hanging half outside bled off the browser
     edge and read as intentional. Inside the aescripts column that same
     offset just gets clipped by .avf's overflow:hidden and looks like a
     broken image, so the wheels now sit at offset 0 and stay whole. */
  .avf-deco-wheel {
    /* Viewport-relative, not %: the two wheels sit in containers of very
       different widths (full-width video vs a one-third step column), and
       a percentage would render them at different sizes. */
    --wheel: clamp(96px, 10vw, 160px);
    width:  var(--wheel) !important;
    height: var(--wheel) !important;
    top: calc(var(--wheel) / -2) !important;
  }
  .avf-deco-wheel-l { left:  0 !important; }
  .avf-deco-wheel-r { right: 0 !important; }
  .avf-deco-wheel img { width: 100% !important; height: 100% !important; }

  /* Section heading icon tracks the fluid heading size next to it. */
  .avf-head-icon { width: clamp(34px, 4.2vw, 64px); height: clamp(34px, 4.2vw, 64px); }

  /* Hero copy always paints above the decorative circle. */
  .avf-hero-copy { position: relative; z-index: 2; }

  /* ------ Troubleshooting accordion ------
     Built on <details>/<summary>, so it opens and closes with no JavaScript
     and stays keyboard accessible. */
  .avf-faq { border-top: 1px solid #3A4150; }
  .avf-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 20px 0; cursor: pointer; list-style: none;
    font-family: 'Stack Sans Headline', sans-serif; font-weight: 500;
    font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.3;
    color: #3A4150; letter-spacing: 0.01em;
  }
  .avf-faq-q::-webkit-details-marker { display: none; }   /* Safari's triangle */
  .avf-faq-q::after {
    content: '+'; flex-shrink: 0;
    font-family: 'Stack Sans Text', sans-serif; font-weight: 300;
    font-size: 1.6em; line-height: 1; color: #3A4150;
  }
  .avf-faq[open] .avf-faq-q::after { content: '\2013'; }  /* en dash = minus */
  .avf-faq-a {
    display: flex; align-items: flex-start; gap: 24px;
    padding: 0 0 28px;
  }
  /* Thumbnail spans ~3 of 12 columns (was ~2). 16:9 is preserved. */
  .avf-faq-img { width: 25%; min-width: 190px; max-width: 380px; flex-shrink: 0;
                 aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
  /* Cap the answer measure at ~100 characters per line. em, not ch, so it
     tracks the font size; ch is the width of '0', which is wider than the
     average letter and would overshoot. */
  .avf-faq-a p { max-width: 50em; }
  .avf-faq-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ------ Ticker animation ------ */
  @keyframes avf-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .avf-ticker { animation: avf-scroll 48s linear infinite; display: flex; width: max-content; gap: 20px; }

  /* ------ Space below the last section ------
     The aescripts block sits directly under this frame with only an 8px grid
     gap between them, so the grey FAQ band ran straight into whatever they
     put next (currently their tutorial video). The frame reports its own
     height to the parent, so padding here becomes real space on their page.
     .avf carries the page background, so this reads as a plain gap. */
  .avf { padding-bottom: 40px; }

  /* Section backgrounds span the full width of the frame, which is now the
     host's own content column; their contents sit inside --avf-pad. */
  .avf-section-pad,
  .avf-anim-heading-pad {
    padding-left:  var(--avf-pad) !important;
    padding-right: var(--avf-pad) !important;
  }

  /* ------ Narrow desktop / embedded column ------
     The aescripts product description is capped at 940px, so this band is the
     real deployment target. There the headline is wide enough to run under the
     hero circle: a 260x151px collision of black text on black stripes. The
     headline already paints on top, but that is not enough to read it, so the
     decoration is scaled back and faded to a watermark - the same treatment the
     mobile block uses. */
  @media (min-width: 769px) and (max-width: 1200px) {

    .avf-deco-wheel { }
  }

  /* ------ Mobile ------ */
  @media (max-width: 768px) {
    .avf-steps              { flex-direction: column !important; }
    .avf-steps > div        { flex: none !important; width: 100% !important; }
    .avf-section-h          { white-space: normal !important; }
    /* More air above each title, less between the title and its content. */
    .avf-section-pad        { padding-top: 56px !important; padding-bottom: 30px !important; }
    .avf-head               { margin-bottom: 20px !important; }
    /* The yellow band's own height, trimmed on a phone: 80px of padding at
       each end and 56px under the title added up to a lot of empty yellow
       around two rows of cards. Desktop keeps the roomier version. */
    .avf > section:nth-child(2) { padding-top: 36px !important;
                                  padding-bottom: 36px !important; }
    .avf-anim-heading-pad   { margin-bottom: 28px !important; }
    /* Equal air on both sides of the yellow band: the hero's padding-bottom
       sets the gap above it and this sets the gap below. Without it the How
       To Use section's own 56px made the lower gap twice the upper one.
       THESE TWO MUST BE CHANGED TOGETHER or the band goes lopsided again.
       28px -> 42px (150%) because 28 read as too tight once it was live. */
    .avf > section:nth-child(3) { padding-top: 42px !important; }

    /* Spacing hierarchy for the stacked "How To Use" steps.
       Stacked, each step is image -> title -> body, and the inner gap used to
       be 32px against only 20px between steps, so the body text sat closer to
       the NEXT image than to its own. Inverted: tight inside a step, generous
       between steps. */
    .avf-steps              { gap: 44px !important; }
    .avf-steps > div        { gap: 14px !important; }
    /* Step 3's wheel is anchored to its top-right corner and reaches 52px back
       across the column, over step 2's body text. Inset the step copy so text
       always stops clear of it. */
    .avf-steps > div > div:last-child { padding-right: 68px !important; }

    .avf-faq-a              { flex-direction: column !important; gap: 16px !important; }
    .avf-faq-img            { width: 100% !important; }
    .avf-ticker-item        { width: 300px !important; }
    .avf-ticker-video       { width: 140px !important; }
    /* Decorative circles are fixed-px and swamp a 375px screen. */
    /* Body text 25% smaller. */
    /* --avf-pad is the inset from the frame edge, and it is the ONLY side
       spacing this page controls. What you see on a phone is this plus the
       aescripts column's own gutter, which we cannot change from here.
       Settled at 16px after trying 8 and 4, both of which read as too tight
       once the browser was actually showing the current build. This is the
       one number to tune for mobile side spacing. */
    .avf                    { --avf-body-scale: 0.75; --avf-pad: 16px; }
    /* The hero graphic is anchored to the section's top-right corner; push the
       headline below it so the two stop overlapping on narrow screens. */
    .avf-hero-top           { flex-direction: column-reverse !important; align-items: flex-end !important;
                              gap: 28px !important; margin-bottom: 56px !important; }
    .avf-hero-copy          { width: 100% !important; }
    .avf-h1                 { margin-bottom: 24px !important; }   /* 15% closer than 28px */
    /* The hero stripe square is hidden on a phone. At 128px square it filled
       the top of the screen with decoration and pushed the headline ~156px
       down the page, which is the first thing a visitor sees. Desktop keeps
       it: there it sits beside the copy instead of above it. */
    .avf-deco-hero          { display: none !important; }
    /* With the square gone the hero needs far less air above it. This targets
       the hero section only - the other two sections keep the 56px set above.
       Same for below: the gap between the video and the yellow band was
       80px (the video row's own padding-bottom) PLUS the 30px this block
       gives every section, so 110px of white on a phone. The video row's
       padding goes to 0 here and the hero's own bottom padding does the
       spacing, in one place. */
    .avf                       { padding-bottom: 28px; }
    .avf-hero-videos           { padding-bottom: 0 !important; }
    .avf > section:first-child { padding-top: 24px !important;
                                 padding-bottom: 42px !important; }
    /* Stacked on mobile, these land on the neighbouring block's text, so
       fade them to a watermark rather than a solid block. */
  }