/* Review 07: blue tabletop, diffuse backdrop, real product screen and live text. */
html body section.fv4ref.fv4ref--scene07 .fv4ref-main{background:#e7f3ff!important}
html body section.fv4ref.fv4ref--scene07 .fv07-art{display:block;position:absolute;left:50%;top:0;width:clamp(1440px,100vw,1920px);height:100%;transform:translateX(-50%);z-index:0;overflow:hidden;pointer-events:none}
.fv4ref--scene07 .fv07-canvas{position:absolute;left:0;top:0;width:1855px;height:848px;transform-origin:0 0;pointer-events:none}
html body section.fv4ref.fv4ref--scene07 .fv07-canvas>.fv4ref-tablet{position:absolute!important;inset:0!important;width:1855px!important;height:848px!important;max-width:none!important;transform:none!important;opacity:1!important;filter:none!important;object-fit:fill;margin:0!important;z-index:0!important}
.fv4ref--scene07 .fv07-screen{z-index:1}
html body section.fv4ref.fv4ref--scene07 .fv07-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.10),transparent 46%)}
.fv07-screen{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;transform:matrix3d(0.284794697208,-0.003904162338,0,-0.000062605626,-0.132931174693,0.427519441915,0,-0.000030396484,0,0,1,0,1079,165,0,1);background:#fff;overflow:hidden;backface-visibility:hidden}.fv07-screen img{display:block;width:100%;height:100%;max-width:none;opacity:.88;filter:saturate(.45) contrast(.9) brightness(1.03)}.fv07-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.28),rgba(255,255,255,.07) 45%,rgba(255,255,255,.18));pointer-events:none}
/*
 * 案07 / SP proposal, 2026-09-10.
 * Append after hero-supplied-art and hero-product-j.
 * The parent implementation paints the background plate into this picture's canvas.
 * Keep the existing HTML text, official logo, reading and proof-circle grid.
 */
@media (max-width: 768px) {
  html body section.fv4ref.fv4ref--scene07 .fv4ref-main {
    grid-template-areas:
      "copy"
      "product"
      "device"
      "badges"
      "industry";
    padding: 24px 14px 26px;
    background: linear-gradient(180deg,
      #fff 0%, #f8fbff 40%, #edf7ff 70%, #dceefe 100%) !important;
  }

  /* Show the one-line product description before the device scene. */
  html body section.fv4ref.fv4ref--scene07 .fv4ref-product {
    grid-area: product;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 4px 0 0;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-sub {
    position: relative;
    inset: auto;
    margin: 0 auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  /* Keep the original mark and its reading together without a separate white card. */
  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-row {
    width: max-content;
    max-width: 100%;
    margin: 10px auto 0 !important;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-product-ruby {
    width: 100%;
    margin: 0;
    line-height: 1.2;
    text-align: center;
  }

  /* Full-bleed scene: keep the tablet, its contact shadow and a strip of the blue table. */
  html body section.fv4ref.fv4ref--scene07 .fv4ref-main > .fv07-art {
    grid-area: device;
    position: relative !important;
    inset: auto auto auto 50% !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: clamp(250px, 72vw, 340px) !important;
    margin: 6px 0 0 !important;
    justify-self: start;
    transform: translateX(-50%) !important;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

html body section.fv4ref.fv4ref--scene07 .fv4ref-main > .fv07-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .40) 0%,
      rgba(255, 255, 255, .06) 14%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 80%,
      rgba(255, 255, 255, .22) 100%);
  }

  /* The existing supplied-art circle diameter and content rows remain in force. */
  html body section.fv4ref.fv4ref--scene07 .fv4ref-badges {
    grid-area: badges;
    position: relative;
    z-index: 3;
    margin-top: -24px;
    margin-bottom: 0;
  }

  html body section.fv4ref.fv4ref--scene07 .fv4ref-industry-nav {
    grid-area: industry;
    position: relative;
    inset: auto;
    margin: 20px 0 0;
  }
}