@charset "UTF-8";

/* =========================================================
   L.EVER | SERVICE-SPECIFIC MOBILE HERO REVEAL
   2026-09-03 / 5.0s PERSISTENT DEMO + TAP REPLAY v8
   ---------------------------------------------------------
   Desktop/tablet layouts remain untouched. On smartphones,
   the existing PC HERO visual is placed inside the tall HERO,
   immediately before the CTA. The first content section rises
   over the HERO, demonstrates the service for five seconds, then
   keeps the completed visualization above the ordinary article.
   Tapping the completed card replays only the visualization.
   ========================================================= */

.service-reveal-mobile-visual,
.service-reveal-scroll,
.service-reveal-demo,
.service-reveal-demo-spacer{
  display:none;
}

.service-reveal-stage{
  display:contents;
}

@media screen and (max-width:767px){
  :root{
    --smr-header-offset:72px;
    --smr-hero-height:calc(100svh - var(--smr-header-offset));
    --smr-panel-offset:18px;
    --smr-panel-opacity:1;
    --smr-panel-shadow:.04;
    --smr-hero-opacity:1;
    --smr-hero-shift:0px;
    --smr-hero-scale:1;
    --smr-visual-shift:0px;
    --smr-visual-scale:1;
    --smr-scroll-opacity:1;
    --smr-white-cta-opacity:1;
    --smr-white-cta-shift:0px;
    --smr-demo-opacity:0;
    --smr-demo-top:clamp(14px,2svh,20px);
    --smr-demo-height:clamp(300px,44svh,390px);
    --smr-demo-gap:28px;
    --smr-content-opacity:0;
    --smr-content-shift:72px;
    --smr-form-inset:0px;
  }

  html.service-mobile-reveal-running{
    scroll-behavior:auto!important;
  }

  html.service-mobile-reveal-ready,
  html.service-mobile-reveal-ready body{
    overflow-x:hidden;
    overflow-x:clip;
  }

  html.service-mobile-reveal-ready [data-service-reveal]{
    overflow:visible!important;
    overflow-x:clip!important;
  }

  /* ---------- Tall mobile HERO ---------- */
  [data-service-reveal] [data-service-hero]{
    position:relative;
    min-height:calc(100svh - var(--smr-header-offset))!important;
    overflow:hidden!important;
    isolation:isolate;
  }

  [data-service-reveal] [data-service-hero-inner]{
    position:relative!important;
    z-index:2!important;
    width:min(calc(100% - 36px),560px)!important;
    min-height:calc(100svh - var(--smr-header-offset))!important;
    height:auto!important;
    margin-inline:auto!important;
    padding:clamp(16px,2.5svh,24px) 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    box-sizing:border-box!important;
  }

  [data-service-reveal] [data-service-hero-content]{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    padding:0 0 max(16px,env(safe-area-inset-bottom,0px))!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
  }

  [data-service-reveal] [data-service-brand]{
    max-width:100%!important;
    max-height:82px!important;
    margin:0 0 12px!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  [data-service-reveal] [data-service-brand] img{
    display:block!important;
    width:auto!important;
    max-width:min(100%,330px)!important;
    max-height:82px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  [data-service-reveal="formlink"] [data-service-brand]{
    display:block!important;
    width:min(100%,330px)!important;
  }

  [data-service-reveal="formlink"] [data-service-brand] img{
    width:min(100%,315px)!important;
  }

  [data-service-reveal="dr"] [data-service-brand] img{
    width:min(100%,320px)!important;
  }

  [data-service-reveal="white-label"] [data-service-brand]{
    width:min(100%,320px)!important;
    max-height:76px!important;
  }

  [data-service-reveal="white-label"] [data-service-brand] img{
    max-height:76px!important;
  }

  /* Hero service labels */
  [data-service-reveal="dr"] .hero__eyebrow,
  [data-service-reveal="formlink"] .formx-kicker,
  [data-service-reveal="tremo"] .affiliate-kicker,
  [data-service-reveal="ai-strategy"] .strategy-service-label,
  [data-service-reveal="ai-business"] .business-ai-kicker,
  [data-service-reveal="white-label"] .article-kicker{
    margin:0 0 9px!important;
    padding:0!important;
    border:0!important;
    gap:0!important;
    font-size:12px!important;
    line-height:1.45!important;
    letter-spacing:.075em!important;
    white-space:normal!important;
  }

  [data-service-reveal="ai-strategy"] .strategy-service-label::before,
  [data-service-reveal="ai-strategy"] .strategy-service-label::after,
  [data-service-reveal="ai-business"] .business-ai-kicker::before,
  [data-service-reveal="ai-business"] .business-ai-kicker::after{
    display:none!important;
  }

  /* Main headings */
  [data-service-reveal="dr"] .hero__title,
  [data-service-reveal="formlink"] .formx-hero h1,
  [data-service-reveal="tremo"] .affiliate-hero h1,
  [data-service-reveal="ai-strategy"] .strategy-hero h1,
  [data-service-reveal="ai-business"] .business-ai-hero h1,
  [data-service-reveal="white-label"] .article-hero h1{
    margin:0!important;
    font-size:clamp(25px,7vw,31px)!important;
    font-weight:500!important;
    line-height:1.28!important;
    letter-spacing:0!important;
    white-space:normal!important;
  }

  [data-service-reveal="dr"] .hero__title span,
  [data-service-reveal="ai-strategy"] .strategy-hero h1 span,
  [data-service-reveal="ai-strategy"] .strategy-hero h1 em,
  [data-service-reveal="ai-business"] .business-ai-hero h1 span,
  [data-service-reveal="ai-business"] .business-ai-hero h1 em{
    white-space:normal!important;
  }

  /* Lead / statement */
  [data-service-reveal="dr"] .hero__lead,
  [data-service-reveal="formlink"] .formx-hero__lead,
  [data-service-reveal="tremo"] .affiliate-hero__lead,
  [data-service-reveal="ai-strategy"] .strategy-hero__statement,
  [data-service-reveal="ai-business"] .business-ai-hero__statement,
  [data-service-reveal="white-label"] .article-hero__lead{
    width:100%!important;
    max-width:none!important;
    margin:14px 0 0!important;
    font-size:clamp(16px,4.45vw,20px)!important;
    font-weight:600!important;
    line-height:1.58!important;
    letter-spacing:.01em!important;
    white-space:normal!important;
  }

  /* Supporting copy */
  [data-service-reveal="dr"] .hero__description,
  [data-service-reveal="formlink"] .formx-hero__text,
  [data-service-reveal="tremo"] .affiliate-hero__text,
  [data-service-reveal="ai-strategy"] .strategy-hero__description,
  [data-service-reveal="ai-business"] .business-ai-hero__description,
  [data-service-reveal="white-label"] .article-hero__text{
    width:100%!important;
    max-width:none!important;
    margin:9px 0 0!important;
    font-size:13px!important;
    line-height:1.72!important;
    letter-spacing:.005em!important;
    white-space:normal!important;
  }

  /* The same visual used on PC, now in normal mobile flow above CTA. */
  .service-reveal-mobile-visual{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:var(--smr-visual-height,clamp(160px,23svh,230px))!important;
    min-height:140px!important;
    margin:clamp(4px,1svh,10px) auto 2px!important;
    padding:0!important;
    display:flex!important;
    flex:0 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    pointer-events:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .service-reveal-mobile-visual::before{
    content:"";
    position:absolute;
    right:8%;
    bottom:5%;
    left:8%;
    height:38%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,var(--smr-visual-glow,rgba(11,114,231,.12)),transparent 70%);
    filter:blur(20px);
    pointer-events:none;
  }

  .service-reveal-mobile-visual img{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    max-width:480px!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 15px 20px var(--smr-visual-shadow,rgba(6,27,61,.12)))!important;
  }

  [data-service-reveal="dr"]{
    --smr-visual-height:clamp(170px,24svh,238px);
    --smr-visual-glow:rgba(22,135,239,.13);
    --smr-visual-shadow:rgba(7,29,61,.13);
  }
  [data-service-reveal="formlink"]{
    --smr-visual-height:clamp(160px,22svh,220px);
    --smr-visual-glow:rgba(11,114,231,.13);
    --smr-visual-shadow:rgba(6,27,61,.13);
  }
  [data-service-reveal="tremo"]{
    --smr-visual-height:clamp(176px,25svh,242px);
    --smr-visual-glow:rgba(230,0,18,.13);
    --smr-visual-shadow:rgba(92,0,8,.13);
  }
  [data-service-reveal="ai-strategy"]{
    --smr-visual-height:clamp(160px,22svh,220px);
    --smr-visual-glow:rgba(91,34,168,.13);
    --smr-visual-shadow:rgba(48,16,95,.13);
  }
  [data-service-reveal="ai-business"]{
    --smr-visual-height:clamp(160px,22svh,220px);
    --smr-visual-glow:rgba(0,133,106,.13);
    --smr-visual-shadow:rgba(7,59,52,.13);
  }
  [data-service-reveal="white-label"]{
    --smr-visual-height:clamp(160px,22svh,220px);
    --smr-visual-glow:rgba(161,123,53,.11);
    --smr-visual-shadow:rgba(23,25,29,.13);
  }

  [data-service-desktop-visual]{
    display:none!important;
  }

  [data-service-reveal="tremo"] .affiliate-hero-benefits{
    display:none!important;
  }

  [data-service-cta]{
    align-self:center!important;
    width:min(100%,360px)!important;
    min-height:54px!important;
    margin:3px auto 0!important;
    padding:11px 20px 11px 24px!important;
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    border-radius:999px!important;
    font-size:14px!important;
    line-height:1.4!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
  }



  /* WHITE LABEL: hide the sticky HERO CTA as the article sheet covers it.
     This prevents the button from showing through the transparent fixed
     page background around the next "こんなお悩み" heading. */
  [data-service-reveal="white-label"] [data-service-cta]{
    opacity:var(--smr-white-cta-opacity,1)!important;
    transform:translate3d(0,var(--smr-white-cta-shift,0px),0)!important;
    will-change:opacity,transform;
  }

  [data-service-reveal="white-label"].service-reveal-white-cta-hidden [data-service-cta]{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .service-reveal-scroll{
    position:relative!important;
    z-index:4!important;
    width:max-content!important;
    min-height:34px!important;
    margin:clamp(8px,1.25svh,12px) auto 0!important;
    padding:0 0 5px!important;
    display:flex!important;
    flex:0 0 auto!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow:visible!important;
    color:rgba(23,23,23,.60)!important;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:.18em!important;
    opacity:var(--smr-scroll-opacity,1)!important;
    pointer-events:none!important;
  }

  .service-reveal-scroll-arrow{
    width:20px!important;
    height:14px!important;
    display:block!important;
    flex:0 0 14px!important;
    overflow:visible!important;
    color:var(--smr-accent,#0b72e7)!important;
    filter:none!important;
    transform:none!important;
  }

  .service-reveal-scroll-arrow path{
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
    vector-effect:non-scaling-stroke!important;
  }

  /* ---------- Sticky overlay stage ---------- */
  html.service-mobile-reveal-ready .service-reveal-stage{
    position:relative;
    z-index:1;
    display:block;
    height:var(--smr-stage-height);
    isolation:isolate;
  }

  html.service-mobile-reveal-ready .service-reveal-stage > [data-service-hero]{
    position:sticky!important;
    top:var(--smr-header-offset)!important;
    z-index:1!important;
    width:100%!important;
    height:var(--smr-hero-height)!important;
    min-height:var(--smr-hero-height)!important;
    margin:0!important;
    transform:translateZ(0)!important;
    backface-visibility:hidden;
  }

  html.service-mobile-reveal-ready .service-reveal-stage > [data-service-hero] [data-service-hero-inner]{
    height:100%!important;
    min-height:100%!important;
    opacity:var(--smr-hero-opacity,1)!important;
    transform:translate3d(0,var(--smr-hero-shift,0px),0) scale(var(--smr-hero-scale,1))!important;
    transform-origin:50% 12%!important;
    will-change:transform,opacity;
  }

  html.service-mobile-reveal-ready .service-reveal-mobile-visual{
    transform:translate3d(0,var(--smr-visual-shift,0px),0) scale(var(--smr-visual-scale,1))!important;
    transform-origin:50% 55%!important;
    will-change:transform;
  }

  html.service-mobile-reveal-ready [data-service-reveal] > section:not([data-service-hero]),
  html.service-mobile-reveal-ready [data-service-reveal] > .service-reveal-stage ~ section{
    position:relative;
    z-index:7;
  }

  html.service-mobile-reveal-ready [data-service-reveal-panel]{
    position:relative!important;
    z-index:10!important;
    margin-top:calc(0px - var(--smr-reveal-distance))!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--smr-accent,#0b72e7) 10%,transparent)!important;
    border-bottom:0!important;
    border-radius:28px 28px 0 0!important;
    background:#fff!important;
    box-shadow:0 -26px 72px rgba(6,27,61,var(--smr-panel-shadow,.04)),0 -1px 0 rgba(6,27,61,.05)!important;
    opacity:var(--smr-panel-opacity,1)!important;
    transform:translate3d(0,var(--smr-panel-offset,18px),0)!important;
    clip-path:inset(0 var(--smr-form-inset,0px) 0 round 28px 28px 0 0);
    will-change:transform,opacity,box-shadow,clip-path;
    isolation:isolate;
  }

  html.service-mobile-reveal-ready [data-service-reveal-content]{
    position:relative!important;
    z-index:2!important;
    opacity:var(--smr-content-opacity,0)!important;
    transform:translate3d(0,var(--smr-content-shift,72px),0)!important;
    will-change:transform,opacity;
  }

  /* Panel signatures. */
  html.service-mobile-reveal-ready [data-service-reveal="tremo"] [data-service-reveal-panel]::after,
  html.service-mobile-reveal-ready [data-service-reveal="dr"] [data-service-reveal-panel]::after,
  html.service-mobile-reveal-ready [data-service-reveal="formlink"] [data-service-reveal-panel]::after,
  html.service-mobile-reveal-ready [data-service-reveal="ai-strategy"] [data-service-reveal-panel]::after,
  html.service-mobile-reveal-ready [data-service-reveal="ai-business"] [data-service-reveal-panel]::after,
  html.service-mobile-reveal-ready [data-service-reveal="white-label"] [data-service-reveal-panel]::after{
    content:"";
    position:absolute;
    top:0;
    right:22px;
    left:22px;
    z-index:4;
    height:2px;
    border-radius:999px;
    opacity:var(--smr-edge-opacity,0);
    pointer-events:none;
  }

  html.service-mobile-reveal-ready [data-service-reveal="tremo"] [data-service-reveal-panel]::after{
    background:linear-gradient(90deg,transparent,#e60012 50%,transparent);
  }
  html.service-mobile-reveal-ready [data-service-reveal="dr"] [data-service-reveal-panel]::after{
    background:linear-gradient(90deg,#1687ef 0 70%,#c49a47 90%,transparent);
    transform:skewY(-1.2deg);
    transform-origin:left center;
  }
  html.service-mobile-reveal-ready [data-service-reveal="formlink"] [data-service-reveal-panel]::after{
    right:50%;
    left:50%;
    background:#0b72e7;
    transform:translateX(-50%);
    width:var(--smr-link-line-width,0px);
  }
  html.service-mobile-reveal-ready [data-service-reveal="ai-strategy"] [data-service-reveal-panel]::after{
    background:linear-gradient(90deg,transparent,#5b22a8,transparent);
  }
  html.service-mobile-reveal-ready [data-service-reveal="ai-business"] [data-service-reveal-panel]::after{
    background:linear-gradient(90deg,transparent,#00856a,transparent);
  }
  html.service-mobile-reveal-ready [data-service-reveal="white-label"] [data-service-reveal-panel]::after{
    background:linear-gradient(90deg,transparent,#a17b35,transparent);
  }

  /* ---------- Service demos: large, self-explanatory view ----------
     The previous 118px strip occupied only about one fifth of a phone.
     This version uses roughly 40-46% of the visible viewport. A
     dedicated spacer preserves that area after completion so the
     finished graphic remains part of the article and can be replayed. */
  .service-reveal-demo{
    position:absolute!important;
    top:var(--smr-demo-top)!important;
    right:14px!important;
    left:14px!important;
    z-index:6!important;
    height:var(--smr-demo-height)!important;
    min-height:300px!important;
    padding:21px 18px 18px!important;
    display:block!important;
    overflow:hidden!important;
    border:1px solid color-mix(in srgb,var(--smr-accent,#0b72e7) 13%,rgba(23,25,29,.08))!important;
    border-radius:24px!important;
    background:
      radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--smr-accent,#0b72e7) 9%,transparent),transparent 34%),
      rgba(255,255,255,.97)!important;
    box-shadow:0 22px 58px rgba(6,27,61,.12)!important;
    opacity:var(--smr-demo-opacity,0)!important;
    transform:translate3d(0,var(--smr-demo-shift,24px),0)!important;
    pointer-events:none!important;
    will-change:transform,opacity;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }

  .service-reveal-demo-spacer{
    position:relative;
    z-index:1;
    width:100%;
    height:calc(var(--smr-demo-top) + var(--smr-demo-height) + var(--smr-demo-gap));
    display:block;
    flex:0 0 auto;
    pointer-events:none;
  }

  .service-reveal-demo.is-replay-ready{
    pointer-events:auto!important;
    cursor:pointer;
  }

  .service-reveal-demo.is-replaying{
    pointer-events:none!important;
    cursor:progress;
  }

  .service-reveal-demo:focus-visible{
    outline:3px solid color-mix(in srgb,var(--smr-accent,#0b72e7) 56%,#fff);
    outline-offset:3px;
  }

  .service-reveal-demo__replay-hint{
    position:absolute;
    top:13px;
    right:13px;
    z-index:12;
    min-height:27px;
    padding:5px 9px;
    display:flex;
    align-items:center;
    gap:5px;
    border:1px solid color-mix(in srgb,var(--smr-accent,#0b72e7) 24%,transparent);
    border-radius:999px;
    color:var(--smr-accent,#0b72e7);
    background:rgba(255,255,255,.94);
    box-shadow:0 7px 18px rgba(6,27,61,.08);
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
    opacity:0;
    transform:translate3d(0,-5px,0);
    transition:opacity .22s ease,transform .22s ease;
    pointer-events:none;
  }

  .service-reveal-demo__replay-hint i{
    font-style:normal;
    font-size:14px;
    line-height:1;
  }

  .service-reveal-demo.is-replay-ready .service-reveal-demo__replay-hint,
  .service-reveal-demo.is-replaying .service-reveal-demo__replay-hint{
    opacity:1;
    transform:none;
  }

  .service-reveal-demo.is-replay-ready .service-reveal-demo__replay-hint{
    animation:smrReplayHint 2.1s ease-in-out infinite;
  }

  .service-reveal-demo.is-replaying .service-reveal-demo__canvas{
    animation:smrReplayCanvas .42s ease-out both;
  }

  @keyframes smrReplayHint{
    0%,100%{box-shadow:0 7px 18px rgba(6,27,61,.08);}
    50%{box-shadow:0 7px 18px rgba(6,27,61,.08),0 0 0 5px color-mix(in srgb,var(--smr-accent,#0b72e7) 8%,transparent);}
  }

  @keyframes smrReplayCanvas{
    0%{opacity:.52;transform:scale(.985);}
    100%{opacity:1;transform:scale(1);}
  }

  .service-reveal-demo__header{
    position:relative;
    z-index:3;
    max-width:100%;
    padding-right:2px;
  }

  .service-reveal-demo__status{
    margin:0;
    color:var(--smr-accent,#0b72e7);
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:clamp(10px,2.75vw,12px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:.13em;
  }

  .service-reveal-demo__title{
    margin:9px 0 0;
    color:#171923;
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:clamp(18px,5vw,23px);
    font-weight:600;
    line-height:1.42;
    letter-spacing:.015em;
  }

  .service-reveal-demo__sub{
    max-width:34em;
    margin:7px 0 0;
    color:rgba(23,25,29,.62);
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:clamp(10px,2.85vw,12px);
    font-weight:500;
    line-height:1.65;
  }

  .service-reveal-demo__canvas{
    position:absolute;
    top:148px;
    right:18px;
    bottom:18px;
    left:18px;
    z-index:2;
    min-height:142px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--smr-accent,#0b72e7) 12%,transparent);
    border-radius:18px;
    background:
      linear-gradient(color-mix(in srgb,var(--smr-accent,#0b72e7) 4%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in srgb,var(--smr-accent,#0b72e7) 4%,transparent) 1px,transparent 1px),
      linear-gradient(145deg,rgba(255,255,255,.95),color-mix(in srgb,var(--smr-accent,#0b72e7) 4%,#fff));
    background-size:32px 32px,32px 32px,auto;
  }

  .service-reveal-demo__line{
    position:absolute;
    height:3px;
    border-radius:999px;
    background:var(--smr-accent,#0b72e7);
    transform-origin:left center;
  }

  .service-reveal-demo__dot{
    position:absolute;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    background:var(--smr-accent,#0b72e7);
    box-shadow:
      0 0 0 8px color-mix(in srgb,var(--smr-accent,#0b72e7) 13%,transparent),
      0 0 24px color-mix(in srgb,var(--smr-accent,#0b72e7) 38%,transparent);
  }

  /* TREMO / FORMLINK: large process track */
  .service-reveal-demo__track{
    position:absolute;
    inset:0;
    height:100%;
  }

  .service-reveal-demo__track-rail{
    position:absolute;
    top:49%;
    right:7%;
    left:7%;
    height:3px;
    border-radius:999px;
    background:color-mix(in srgb,var(--smr-accent,#0b72e7) 22%,#e8edf2);
    transform:translateY(-50%);
  }

  .service-reveal-demo__track-step{
    position:absolute;
    top:0;
    width:70px;
    height:100%;
    margin-left:-35px;
    color:rgba(23,25,29,.46);
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-weight:700;
    line-height:1.25;
    text-align:center;
  }

  .service-reveal-demo__track-step i{
    position:absolute;
    top:calc(49% - 16px);
    left:50%;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    color:rgba(23,25,29,.52);
    background:#e7ebf0;
    box-shadow:0 5px 14px rgba(23,25,29,.08);
    font-style:normal;
    font-size:11px;
    font-weight:800;
    transform:translateX(-50%);
  }

  .service-reveal-demo__track-step.is-complete{
    color:var(--smr-accent,#0b72e7);
  }

  .service-reveal-demo__track-step.is-complete i{
    color:#fff;
    background:var(--smr-accent,#0b72e7);
    box-shadow:
      0 0 0 6px color-mix(in srgb,var(--smr-accent,#0b72e7) 12%,transparent),
      0 7px 18px color-mix(in srgb,var(--smr-accent,#0b72e7) 25%,transparent);
  }

  .service-reveal-demo__track-step b{
    position:absolute;
    top:calc(49% + 28px);
    left:50%;
    width:72px;
    color:inherit;
    font-size:clamp(9px,2.7vw,11px);
    font-weight:700;
    line-height:1.35;
    white-space:normal;
    transform:translateX(-50%);
  }

  .service-reveal-demo__pulse{
    position:absolute;
    top:calc(49% - 9px);
    left:7%;
    width:18px;
    height:18px;
    border:3px solid #fff;
    border-radius:50%;
    background:var(--smr-accent,#0b72e7);
    box-shadow:0 0 22px color-mix(in srgb,var(--smr-accent,#0b72e7) 58%,transparent);
    transform:translateX(-50%);
  }


  /* =======================================================
     TREMO: short-video advertisement → LP / EC traffic
     -------------------------------------------------------
     A vertical short-video screen, in-video advertisement,
     and outgoing traffic route replace the generic step bar.
     ======================================================= */
  .service-reveal-demo--tremo{
    background:
      radial-gradient(circle at 92% 0%,rgba(230,0,18,.12),transparent 35%),
      linear-gradient(145deg,rgba(255,255,255,.99),rgba(255,245,246,.98))!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    background:
      radial-gradient(circle at 22% 52%,rgba(230,0,18,.085),transparent 34%),
      linear-gradient(145deg,#fff,#fff6f7);
  }

  .smr-tremo-phone{
    position:absolute;
    top:10px;
    bottom:10px;
    left:12px;
    z-index:4;
    width:auto;
    max-width:34%;
    aspect-ratio:9/16;
    overflow:hidden;
    border:3px solid #171717;
    border-radius:clamp(14px,4vw,20px);
    background:#111;
    box-shadow:0 14px 30px rgba(23,23,23,.18),0 0 0 5px rgba(230,0,18,.045);
    opacity:0;
    transform:translate3d(0,12px,0) scale(.92);
    transform-origin:center;
  }

  .smr-tremo-phone::before{
    content:"";
    position:absolute;
    top:4px;
    left:50%;
    z-index:10;
    width:27%;
    height:3px;
    border-radius:999px;
    background:rgba(255,255,255,.50);
    transform:translateX(-50%);
  }

  .smr-tremo-phone.is-live{
    box-shadow:0 16px 34px rgba(23,23,23,.20),0 0 0 7px rgba(230,0,18,.065);
  }

  .smr-tremo-phone__screen{
    position:absolute;
    inset:3px;
    overflow:hidden;
    border-radius:calc(clamp(14px,4vw,20px) - 5px);
    background:#2a1014;
  }

  .smr-tremo-reel{
    position:absolute;
    inset:0;
    z-index:1;
    height:200%;
    will-change:transform;
  }

  .smr-tremo-scene{
    position:relative;
    width:100%;
    height:50%;
    overflow:hidden;
    color:#fff;
  }

  .smr-tremo-scene::before,
  .smr-tremo-scene::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
  }

  .smr-tremo-scene::before{
    top:23%;
    left:17%;
    width:67%;
    aspect-ratio:1;
    background:
      radial-gradient(circle at 38% 30%,rgba(255,255,255,.92) 0 5%,transparent 6%),
      linear-gradient(145deg,rgba(255,255,255,.48),rgba(230,0,18,.42));
    box-shadow:0 0 32px rgba(255,255,255,.18);
  }

  .smr-tremo-scene::after{
    right:-34%;
    bottom:-7%;
    width:92%;
    aspect-ratio:1;
    border:13px solid rgba(255,255,255,.15);
  }

  .smr-tremo-scene--trend{
    background:
      radial-gradient(circle at 28% 16%,rgba(255,90,105,.55),transparent 32%),
      linear-gradient(160deg,#221014,#70141d 60%,#13080a);
  }

  .smr-tremo-scene--ad{
    background:
      radial-gradient(circle at 72% 21%,rgba(255,86,98,.60),transparent 30%),
      linear-gradient(160deg,#171717,#a5000e 62%,#260307);
  }

  .smr-tremo-scene > span,
  .smr-tremo-scene > b{
    position:absolute;
    z-index:3;
    left:8px;
    right:8px;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  }

  .smr-tremo-scene > span{
    top:23%;
    font-size:6px;
    font-weight:900;
    letter-spacing:.12em;
  }

  .smr-tremo-scene > b{
    bottom:29%;
    font-size:7px;
    line-height:1.35;
    text-shadow:0 2px 8px rgba(0,0,0,.46);
  }

  .smr-tremo-scene > i{
    position:absolute;
    top:43%;
    left:50%;
    z-index:4;
    width:26px;
    height:26px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:50%;
    background:rgba(255,255,255,.16);
    transform:translate(-50%,-50%);
    backdrop-filter:blur(3px);
  }

  .smr-tremo-scene > i::before{
    content:"";
    position:absolute;
    top:50%;
    left:54%;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:8px solid #fff;
    transform:translate(-50%,-50%);
  }

  .smr-tremo-shorts-mark{
    position:absolute;
    top:9px;
    left:7px;
    z-index:6;
    display:flex;
    align-items:center;
    gap:4px;
    color:#fff;
    font-size:5px;
    font-weight:900;
    letter-spacing:.08em;
    text-shadow:0 1px 5px rgba(0,0,0,.45);
  }

  .smr-tremo-shorts-mark > i{
    position:relative;
    width:11px;
    height:14px;
    display:block;
    border-radius:4px;
    background:#e60012;
    box-shadow:0 3px 7px rgba(0,0,0,.22);
    transform:skewY(-8deg);
  }

  .smr-tremo-shorts-mark > i::after{
    content:"";
    position:absolute;
    top:50%;
    left:54%;
    border-top:3px solid transparent;
    border-bottom:3px solid transparent;
    border-left:5px solid #fff;
    transform:translate(-50%,-50%) skewY(8deg);
  }

  .smr-tremo-swipe-mark{
    position:absolute;
    top:27px;
    left:8px;
    z-index:6;
    color:rgba(255,255,255,.72);
    font-size:4px;
    font-weight:800;
    letter-spacing:.15em;
  }

  .smr-tremo-social{
    position:absolute;
    top:29%;
    right:4px;
    z-index:6;
    display:grid;
    gap:7px;
  }

  .smr-tremo-social > i{
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(0,0,0,.31);
    box-shadow:0 3px 9px rgba(0,0,0,.16);
    font-style:normal;
    font-size:7px;
    font-weight:900;
    backdrop-filter:blur(4px);
  }

  .smr-tremo-ad-card{
    position:absolute;
    right:5px;
    bottom:12px;
    left:5px;
    z-index:8;
    min-height:34px;
    padding:5px 23px 5px 7px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid rgba(255,255,255,.34);
    border-radius:8px;
    color:#fff;
    background:linear-gradient(110deg,rgba(184,0,15,.96),rgba(239,27,45,.96));
    box-shadow:0 7px 16px rgba(0,0,0,.22);
    opacity:0;
    transform:translate3d(0,16px,0);
  }

  .smr-tremo-ad-card > small{
    margin-bottom:1px;
    font-size:4px;
    font-weight:800;
    letter-spacing:.08em;
  }

  .smr-tremo-ad-card > b{
    overflow:hidden;
    font-size:6px;
    line-height:1.2;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  .smr-tremo-ad-card > i{
    position:absolute;
    top:50%;
    right:7px;
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#e60012;
    background:#fff;
    font-style:normal;
    font-size:8px;
    font-weight:900;
    transform:translateY(-50%);
  }

  .smr-tremo-video-progress{
    position:absolute;
    right:5px;
    bottom:5px;
    left:5px;
    z-index:9;
    height:2px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.30);
  }

  .smr-tremo-video-progress > i{
    display:block;
    width:100%;
    height:100%;
    border-radius:inherit;
    background:#fff;
    transform:scaleX(0);
    transform-origin:left center;
  }

  /* Keep a visible gap before the LP / EC card on narrow Android screens. */
  .smr-tremo-route{
    position:absolute;
    top:51%;
    right:calc(29% + 34px);
    left:37%;
    z-index:3;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,#e60012,#ff7180);
    box-shadow:0 0 13px rgba(230,0,18,.25);
    transform:scaleX(0);
    transform-origin:left center;
  }

  .smr-tremo-route::after{
    content:"";
    position:absolute;
    top:50%;
    right:-3px;
    width:8px;
    height:8px;
    border-top:2px solid #e60012;
    border-right:2px solid #e60012;
    transform:translateY(-50%) rotate(45deg);
  }

  .smr-tremo-route > i{
    position:absolute;
    top:50%;
    left:0;
    width:14px;
    height:14px;
    border:3px solid #fff;
    border-radius:50%;
    background:#e60012;
    box-shadow:0 0 17px rgba(230,0,18,.48);
    opacity:0;
    transform:translate(-50%,-50%);
  }

  .smr-tremo-destination{
    position:absolute;
    top:26%;
    right:10px;
    z-index:4;
    width:29%;
    min-height:48%;
    padding:25px 8px 9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(230,0,18,.20);
    border-radius:12px;
    color:#171717;
    background:rgba(255,255,255,.97);
    box-shadow:0 10px 24px rgba(23,23,23,.09);
    text-align:center;
    opacity:0;
    transform:translate3d(14px,0,0) scale(.90);
    transform-origin:center;
  }

  .smr-tremo-destination::before{
    content:"";
    position:absolute;
    top:19px;
    right:0;
    left:0;
    height:1px;
    background:rgba(23,23,23,.10);
  }

  .smr-tremo-browser-dots{
    position:absolute;
    top:7px;
    left:8px;
    display:flex;
    gap:3px;
  }

  .smr-tremo-browser-dots > b{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#e60012;
    opacity:.45;
  }

  .smr-tremo-destination > strong{
    color:#171717;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:clamp(12px,3.7vw,16px);
    font-weight:900;
    line-height:1.1;
  }

  .smr-tremo-destination > small{
    margin-top:6px;
    color:rgba(23,23,23,.60);
    font-size:7px;
    font-weight:800;
    white-space:nowrap;
  }

  .smr-tremo-destination > em{
    width:23px;
    height:23px;
    margin-top:8px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#d9dce0;
    font-style:normal;
    font-size:11px;
    font-weight:900;
  }

  .smr-tremo-destination.is-active > em{
    background:#e60012;
    box-shadow:0 0 0 6px rgba(230,0,18,.08);
  }

  .smr-tremo-ready{
    position:absolute;
    top:8px;
    right:9px;
    z-index:10;
    padding:6px 10px;
    border-radius:999px;
    color:#fff;
    background:#e60012;
    box-shadow:0 8px 20px rgba(230,0,18,.22);
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
    opacity:0;
  }

  /* =======================================================
     FORMLINK: company research → PC-to-PC email → meeting
     -------------------------------------------------------
     The existing process remains visible while a personalised
     email travels from the FORMLINK PC to the target company,
     a reply returns, and the calendar confirms the meeting.
     ======================================================= */
  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    background:
      linear-gradient(rgba(11,114,231,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(11,114,231,.035) 1px,transparent 1px),
      linear-gradient(145deg,#fff,#f3f8ff);
    background-size:24px 24px,24px 24px,auto;
  }

  .smr-formlink-devices{
    position:absolute;
    top:5px;
    right:9px;
    bottom:62px;
    left:9px;
  }

  .smr-formlink-pc{
    position:absolute;
    top:7px;
    z-index:4;
    width:29%;
    height:64%;
    min-height:50px;
    max-height:84px;
    color:#061b3d;
  }

  .smr-formlink-pc--sender{left:0;}
  .smr-formlink-pc--receiver{right:0;}

  .smr-formlink-screen{
    position:absolute;
    inset:0 0 12px;
    padding:7px 6px;
    overflow:hidden;
    border:2px solid #0b2d60;
    border-radius:7px;
    background:linear-gradient(145deg,#fff,#eaf4ff);
    box-shadow:0 7px 16px rgba(6,27,61,.10);
  }

  .smr-formlink-pc--receiver .smr-formlink-screen{
    background:linear-gradient(145deg,#fff,#f5f8fc);
  }

  .smr-formlink-screen::after{
    content:"";
    position:absolute;
    right:5px;
    bottom:5px;
    left:5px;
    height:3px;
    border-radius:999px;
    background:rgba(11,114,231,.12);
  }

  .smr-formlink-screen > span,
  .smr-formlink-screen > b{
    position:relative;
    z-index:2;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .smr-formlink-screen > span{
    color:#0b72e7;
    font-size:6px;
    font-weight:900;
    letter-spacing:.05em;
  }

  .smr-formlink-screen > b{
    margin-top:5px;
    color:#061b3d;
    font-size:7px;
    line-height:1.25;
  }

  .smr-formlink-screen > i{
    position:absolute;
    right:5px;
    bottom:5px;
    left:5px;
    z-index:2;
    width:30%;
    height:3px;
    border-radius:999px;
    background:#0b72e7;
    box-shadow:0 0 10px rgba(11,114,231,.26);
  }

  .smr-formlink-pc > em{
    position:absolute;
    bottom:4px;
    left:50%;
    width:22%;
    height:8px;
    border-bottom:3px solid #0b2d60;
    transform:translateX(-50%);
  }

  .smr-formlink-pc > em::before{
    content:"";
    position:absolute;
    bottom:-3px;
    left:50%;
    width:150%;
    height:3px;
    border-radius:999px;
    background:#0b2d60;
    transform:translateX(-50%);
  }

  .smr-formlink-pc.is-active .smr-formlink-screen{
    border-color:#0b72e7;
    box-shadow:0 7px 18px rgba(11,114,231,.18),0 0 0 4px rgba(11,114,231,.055);
  }

  .smr-formlink-pc.is-received .smr-formlink-screen{
    border-color:#0b72e7;
    background:linear-gradient(145deg,#fff,#e7f3ff);
  }

  .smr-formlink-pc.is-replied .smr-formlink-screen > i{
    width:86%;
  }

  .smr-formlink-connection{
    position:absolute;
    left:29%;
    z-index:2;
    width:42%;
    height:2px;
    border-radius:999px;
    background:#0b72e7;
    box-shadow:0 0 11px rgba(11,114,231,.25);
  }

  .smr-formlink-connection--out{
    top:35%;
    transform:scaleX(0);
    transform-origin:left center;
  }

  .smr-formlink-connection--back{
    top:18%;
    opacity:.50;
    transform:scaleX(0);
    transform-origin:right center;
  }

  .smr-formlink-mail{
    position:absolute;
    left:29%;
    z-index:7;
    width:clamp(24px,8vw,32px);
    height:auto;
    overflow:visible;
    color:#0b72e7;
    opacity:0;
    filter:drop-shadow(0 6px 9px rgba(11,114,231,.22));
    transform:translate(-50%,-50%) scale(.78);
  }

  .smr-formlink-mail rect{
    fill:#fff;
    stroke:currentColor;
    stroke-width:2;
  }

  .smr-formlink-mail path{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .smr-formlink-mail--out{top:35%;}
  .smr-formlink-mail--back{
    top:53%;
    color:#53b6f0;
  }

  /* Date numeral removed: this badge communicates only that scheduling is complete. */
  .smr-formlink-calendar{
    position:absolute;
    top:77%;
    left:50%;
    z-index:8;
    min-width:78px;
    height:34px;
    padding:4px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(11,114,231,.25);
    border-radius:10px;
    color:#061b3d;
    background:rgba(255,255,255,.98);
    box-shadow:0 8px 18px rgba(6,27,61,.09);
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
  }

  .smr-formlink-calendar > b{
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
  }

  .smr-formlink-calendar.is-scheduled{
    border-color:#0b72e7;
    box-shadow:0 0 0 5px rgba(11,114,231,.06),0 9px 20px rgba(6,27,61,.10);
  }

  .service-reveal-demo--formlink .service-reveal-demo__track{
    top:auto;
    right:3px;
    bottom:0;
    left:3px;
    height:62px;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-rail{
    top:18px;
    right:7%;
    left:7%;
    height:2px;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step{
    width:56px;
    height:62px;
    margin-left:-28px;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step i{
    top:6px;
    width:25px;
    height:25px;
    font-size:9px;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step b{
    top:36px;
    width:58px;
    font-size:7px;
    line-height:1.23;
  }

  .service-reveal-demo--formlink .service-reveal-demo__pulse{
    top:9px;
    width:14px;
    height:14px;
    border-width:2px;
  }

  .smr-formlink-ready{
    position:absolute;
    top:7px;
    right:8px;
    z-index:10;
    padding:6px 10px;
    border-radius:999px;
    color:#fff;
    background:#0b72e7;
    box-shadow:0 8px 20px rgba(11,114,231,.20);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    opacity:0;
  }

  /* DR VALUE: 0 → 58 current-position meter */
  .service-reveal-demo--dr .smr-dr-meter-canvas{
    padding:8px 10px 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(circle at 50% 48%,rgba(22,135,239,.10),transparent 58%),
      linear-gradient(145deg,#fff,#f1f9ff);
  }

  .smr-dr-meter{
    position:relative;
    width:clamp(128px,43vw,176px);
    aspect-ratio:1;
    flex:0 0 auto;
    border-radius:50%;
    filter:drop-shadow(0 13px 24px rgba(7,29,61,.10));
  }

  .smr-dr-meter::before{
    content:"";
    position:absolute;
    inset:17%;
    border:1px dashed rgba(22,135,239,.16);
    border-radius:50%;
    background:rgba(255,255,255,.96);
    box-shadow:inset 0 0 0 8px rgba(255,255,255,.54);
  }

  .smr-dr-meter__svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    transform:rotate(-90deg);
  }

  .smr-dr-meter__track,
  .smr-dr-meter__progress{
    fill:none;
    stroke-width:13;
  }

  .smr-dr-meter__track{
    stroke:#d6edff;
  }

  .smr-dr-meter__progress{
    stroke:#f0a500;
    stroke-linecap:round;
    stroke-dasharray:100;
    stroke-dashoffset:100;
    filter:drop-shadow(0 5px 6px rgba(240,165,0,.22));
  }

  .smr-dr-meter__center{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#174fc4;
    text-align:center;
  }

  .smr-dr-meter__center span{
    margin-bottom:-2px;
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
  }

  .smr-dr-meter__center strong{
    display:block;
    color:#174fc4;
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:clamp(43px,13vw,59px);
    font-weight:500;
    line-height:1;
    letter-spacing:-.04em;
  }

  .smr-dr-meter__center small{
    margin-top:2px;
    color:rgba(7,29,61,.68);
    font-size:9px;
    font-weight:800;
  }

  .smr-dr-meter-note{
    position:absolute;
    right:10px;
    bottom:7px;
    left:10px;
    margin:0;
    color:rgba(7,29,61,.62);
    font-size:9px;
    font-weight:600;
    line-height:1.4;
    text-align:center;
  }

  .smr-dr-meter-ready{
    position:absolute;
    top:10px;
    right:11px;
    z-index:4;
    padding:5px 9px;
    border-radius:999px;
    color:#fff;
    background:#1687ef;
    box-shadow:0 8px 18px rgba(22,135,239,.20);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    opacity:0;
  }

  /* AI × STRATEGY DESIGN: evaluate branches and select one roadmap */
  .service-reveal-demo--ai-strategy .smr-strategy-canvas{
    background:
      linear-gradient(rgba(91,34,168,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(91,34,168,.045) 1px,transparent 1px),
      linear-gradient(145deg,#fff,#faf7fd);
    background-size:28px 28px,28px 28px,auto;
  }

  .smr-strategy-map{
    position:absolute;
    inset:8px 8px 18px;
    width:calc(100% - 16px);
    height:calc(100% - 26px);
    overflow:visible;
  }

  .smr-strategy-route{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:100;
    stroke-dashoffset:100;
  }

  .smr-strategy-route--candidate{
    stroke:rgba(91,34,168,.34);
    stroke-width:2.2;
  }

  .smr-strategy-route--alt-one,
  .smr-strategy-route--alt-two{
    stroke-dasharray:4 3;
  }

  .smr-strategy-route--selected{
    stroke:#5b22a8;
    stroke-width:5;
    filter:drop-shadow(0 5px 7px rgba(91,34,168,.24));
  }

  .smr-strategy-scan{
    position:absolute;
    top:58%;
    left:32.5%;
    z-index:4;
    width:62px;
    height:62px;
    border:2px solid rgba(91,34,168,.60);
    border-radius:50%;
    background:radial-gradient(circle,rgba(183,133,239,.14),transparent 66%);
    box-shadow:0 0 0 8px rgba(91,34,168,.055),0 0 24px rgba(91,34,168,.18);
    opacity:0;
    transform:translate(-50%,-50%) scale(.35);
    transform-origin:center;
  }

  .smr-strategy-node{
    position:absolute;
    z-index:5;
    width:72px;
    color:#72717a;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:8px;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    transform:translate(-50%,-50%);
  }

  .smr-strategy-node i{
    width:18px;
    height:18px;
    margin:0 auto 5px;
    display:grid;
    place-items:center;
    border:3px solid #fff;
    border-radius:50%;
    background:#e7e6eb;
    box-shadow:0 5px 13px rgba(48,16,95,.10);
    transition:none;
  }

  .smr-strategy-node b{
    display:block;
    white-space:nowrap;
  }

  .smr-strategy-node.is-active{
    color:#5b22a8;
  }

  .smr-strategy-node.is-active i{
    background:#5b22a8;
    box-shadow:0 0 0 5px rgba(91,34,168,.10),0 6px 15px rgba(91,34,168,.20);
  }

  .smr-strategy-node--one{left:8%;top:82%;}
  .smr-strategy-node--two{left:32.5%;top:58%;}
  .smr-strategy-node--three{left:50%;top:41%;}
  .smr-strategy-node--four{left:71%;top:27%;}
  .smr-strategy-node--five{left:90%;top:14%;}

  .smr-strategy-ready{
    position:absolute;
    top:10px;
    right:11px;
    z-index:8;
    padding:6px 10px;
    border-radius:999px;
    color:#fff;
    background:#5b22a8;
    box-shadow:0 8px 20px rgba(91,34,168,.22);
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
    opacity:0;
  }

  /* AI × BUSINESS OPTIMIZATION: live dashboard converts MANUAL to AUTO */
  .service-reveal-demo--ai-business .smr-business-canvas{
    background:
      linear-gradient(rgba(0,133,106,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,133,106,.035) 1px,transparent 1px),
      linear-gradient(145deg,#fff,#f5fbf9);
    background-size:28px 28px,28px 28px,auto;
  }

  .smr-business-dashboard{
    position:absolute;
    top:35px;
    right:12px;
    bottom:10px;
    left:12px;
    display:grid;
    grid-template-rows:repeat(5,minmax(0,1fr));
    gap:4px;
  }

  .smr-business-row{
    position:relative;
    min-height:0;
    padding:0 7px 0 10px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 50px;
    align-items:center;
    gap:7px;
    border:1px solid rgba(0,133,106,.12);
    border-radius:10px;
    background:rgba(255,255,255,.92);
    box-shadow:0 4px 11px rgba(7,59,52,.04);
  }

  .smr-business-row > b{
    color:#073b34;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
  }

  .smr-business-rail{
    position:relative;
    height:3px;
    border-radius:999px;
    background:rgba(0,133,106,.16);
  }

  .smr-business-packet{
    position:absolute;
    top:50%;
    left:4%;
    width:12px;
    height:12px;
    border:2px solid #fff;
    border-radius:50%;
    background:#00856a;
    box-shadow:0 0 15px rgba(0,133,106,.46);
    opacity:0;
    transform:translate(-50%,-50%);
  }

  .smr-business-rail em{
    position:absolute;
    top:50%;
    right:-2px;
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#00856a;
    font-style:normal;
    font-size:9px;
    font-weight:900;
    opacity:0;
    transform:translateY(-50%) scale(.72);
  }

  .smr-business-row > small{
    min-width:45px;
    padding:4px 5px;
    border-radius:999px;
    color:#7d858a;
    background:#eef1f2;
    font-size:7px;
    font-weight:900;
    line-height:1;
    text-align:center;
    letter-spacing:.03em;
  }

  .smr-business-row.is-auto{
    border-color:rgba(0,133,106,.30);
    background:rgba(244,251,249,.98);
  }

  .smr-business-row.is-auto > small{
    color:#fff;
    background:#00856a;
  }

  .smr-business-row.is-complete .smr-business-rail em{
    opacity:1;
    transform:translateY(-50%) scale(1);
  }

  .smr-business-scanner{
    position:absolute;
    top:0;
    right:0;
    left:0;
    z-index:7;
    height:2px;
    background:#00856a;
    box-shadow:0 0 0 7px rgba(0,133,106,.055),0 0 18px rgba(0,133,106,.32);
    opacity:0;
    transform:translateY(-50%);
    pointer-events:none;
  }

  .smr-business-ready i{
    position:absolute;
    top:50%;
    left:10px;
    width:8px;
    height:8px;
    border:1px solid rgba(255,255,255,.75);
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 10px rgba(255,255,255,.75);
    transform:translateY(-50%);
  }

  /* White Label: larger AI writing canvas */
  .service-reveal-demo--white-label{
    background:
      radial-gradient(circle at 91% 0%,rgba(161,123,53,.10),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,245,239,.98))!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__canvas{
    background:
      repeating-linear-gradient(180deg,transparent 0 30px,rgba(23,25,29,.055) 30px 31px),
      linear-gradient(145deg,#fff,#faf7f0);
  }

  .smr-white-heading{
    position:absolute;
    top:25%;
    right:16px;
    left:16px;
    color:#17191d;
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:clamp(25px,7.2vw,32px);
    font-weight:600;
    line-height:1.35;
    letter-spacing:.02em;
  }

  .smr-white-cursor{
    display:inline-block;
    width:3px;
    height:1.15em;
    margin-left:5px;
    vertical-align:-.13em;
    background:#a17b35;
  }

  .smr-white-check-line{
    position:absolute;
    right:17px;
    bottom:38px;
    left:17px;
    height:3px;
    border-radius:999px;
    background:#a17b35;
    transform:scaleX(0);
    transform-origin:left center;
  }

  .smr-white-source{
    position:absolute;
    right:17px;
    bottom:14px;
    color:rgba(23,25,29,.58);
    font-size:10px;
    font-weight:700;
    opacity:0;
  }

  .smr-white-ready{
    position:absolute;
    top:13px;
    right:14px;
    z-index:4;
    padding:6px 12px;
    border-radius:999px;
    color:#fff;
    background:#a17b35;
    box-shadow:0 8px 20px rgba(161,123,53,.18);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    opacity:0;
  }

  @media (max-height:700px){
    .smr-dr-meter{
      width:126px;
    }

    .smr-dr-meter-note{
      display:none;
    }

    .smr-strategy-node{
      width:62px;
      font-size:7px;
    }

    .smr-strategy-node i{
      width:15px;
      height:15px;
      margin-bottom:3px;
    }

    .smr-business-dashboard{
      top:31px;
      gap:3px;
    }

    .smr-business-row{
      grid-template-columns:40px minmax(0,1fr) 45px;
      gap:5px;
      padding-inline:7px 5px;
    }

    .smr-business-row > b{
      font-size:9px;
    }

    .service-reveal-demo{
      height:var(--smr-demo-height)!important;
      min-height:300px!important;
      padding-top:17px!important;
    }

    .service-reveal-demo__title{
      margin-top:6px;
      font-size:18px;
      line-height:1.33;
    }

    .service-reveal-demo__sub{
      margin-top:5px;
      font-size:10px;
      line-height:1.45;
    }

    .service-reveal-demo__canvas{
      top:142px;
      bottom:14px;
    }
  }

  /* Additional page-specific corrections */
  [data-service-reveal="dr"] .hero__wave,
  [data-service-reveal="ai-strategy"] .strategy-hero::before,
  [data-service-reveal="ai-business"] .business-ai-hero::before{
    pointer-events:none!important;
  }

  [data-service-reveal="white-label"] [data-service-reveal-panel]{
    padding-top:0!important;
  }

  [data-service-reveal="white-label"] .article-benefit-grid{
    margin-top:0!important;
  }

  /* The site uses a translucent fixed backdrop. Keep the first problem
     heading opaque so no sticky-HERO element can visually bleed through. */
  html.service-mobile-reveal-ready
  [data-service-reveal="white-label"] .article-problems{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,1) 0,
      rgba(255,255,255,.985) 280px,
      rgba(255,255,255,.94) 520px,
      rgba(255,255,255,0) 760px
    )!important;
  }

  @media (max-height:760px){
    :root{
      --smr-demo-top:14px;
      --smr-demo-height:300px;
      --smr-demo-gap:24px;
    }
    [data-service-reveal] [data-service-hero-inner]{
      padding-top:12px!important;
    }
    [data-service-reveal] [data-service-brand],
    [data-service-reveal] [data-service-brand] img{
      max-height:68px!important;
    }
    [data-service-reveal="dr"] .hero__title,
    [data-service-reveal="formlink"] .formx-hero h1,
    [data-service-reveal="tremo"] .affiliate-hero h1,
    [data-service-reveal="ai-strategy"] .strategy-hero h1,
    [data-service-reveal="ai-business"] .business-ai-hero h1,
    [data-service-reveal="white-label"] .article-hero h1{
      font-size:clamp(23px,6.5vw,28px)!important;
    }
    .service-reveal-mobile-visual{
      height:clamp(140px,20svh,190px)!important;
      min-height:125px!important;
    }
    .service-reveal-scroll{
      padding-top:7px!important;
    }
  }

  @media (prefers-reduced-motion:reduce){
    html.service-mobile-reveal-ready [data-service-reveal-content]{
      opacity:1!important;
      transform:none!important;
    }
    html.service-mobile-reveal-ready .service-reveal-demo{
      display:block!important;
      opacity:1!important;
      transform:none!important;
      pointer-events:none!important;
    }
    html.service-mobile-reveal-ready .service-reveal-demo__replay-hint{
      display:none!important;
      animation:none!important;
    }
    html.service-mobile-reveal-ready .service-reveal-scroll{
      display:none!important;
    }
  }
}

/* =========================================================
   2026-09-03 | DR VALUE / GALAXY A53 FIRST-VIEW SAFETY
   ---------------------------------------------------------
   Galaxy A53 and similar Android browsers expose a shorter
   visualViewport while the URL/navigation bars are visible.
   Keep the DR VALUE logo in the first paint, remove the old
   clipped aspect-ratio wrapper, and compact only this HERO
   when the measured visual viewport is short.
   ========================================================= */
@media screen and (max-width:767px){
  main[data-service-reveal="dr"].dr-growth-page
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand]{
    position:relative!important;
    z-index:7!important;
    display:block!important;
    flex:0 0 auto!important;
    width:min(100%,320px)!important;
    max-width:320px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 9px!important;
    padding:0!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    contain:none!important;
  }

  main[data-service-reveal="dr"].dr-growth-page
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand] > img{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    max-width:320px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left center!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* JS uses the real visualViewport height, not only CSS media height. */
  main[data-service-reveal="dr"].service-reveal-compact-height{
    --smr-visual-height:clamp(132px,18svh,158px);
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  [data-service-hero-inner]{
    padding-top:8px!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap .hero__eyebrow{
    margin-bottom:4px!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand]{
    width:min(100%,292px)!important;
    max-width:292px!important;
    margin-bottom:6px!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand] > img{
    max-width:292px!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap .hero__title{
    font-size:clamp(23px,6.55vw,27px)!important;
    line-height:1.22!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap .hero__lead{
    margin-top:9px!important;
    font-size:clamp(15px,4.35vw,17px)!important;
    line-height:1.45!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .hero.hero--roadmap .hero__description{
    margin-top:5px!important;
    font-size:12px!important;
    line-height:1.55!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .service-reveal-mobile-visual{
    min-height:112px!important;
    margin-top:0!important;
    margin-bottom:0!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  [data-service-cta]{
    min-height:50px!important;
    margin-top:0!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
    font-size:13px!important;
  }

  main[data-service-reveal="dr"].service-reveal-compact-height
  .service-reveal-scroll{
    min-height:30px!important;
    margin-top:5px!important;
    padding-bottom:3px!important;
    gap:4px!important;
  }
}


/* =========================================================
   2026-09-03 | v10
   AI STRATEGY / AI BUSINESS — MOBILE SECTION HEADING UNIFY
   ---------------------------------------------------------
   スマホ版だけ、他サービスと同じ中央揃えへ統一し、
   各記事セクション見出しの下にサービスカラーの短い線を追加。
   カード本文・リスト本文の左揃えは維持する。
   ========================================================= */
@media screen and (max-width:767px){
  [data-service-reveal="ai-strategy"] .strategy-section-heading,
  [data-service-reveal="ai-business"] .business-ai-section-heading{
    width:100%!important;
    margin-right:auto!important;
    margin-left:auto!important;
    text-align:center!important;
  }

  [data-service-reveal="ai-strategy"] .strategy-section-heading > p,
  [data-service-reveal="ai-strategy"] .strategy-section-heading > h2,
  [data-service-reveal="ai-strategy"] .strategy-section-heading > span,
  [data-service-reveal="ai-business"] .business-ai-section-heading > p,
  [data-service-reveal="ai-business"] .business-ai-section-heading > h2,
  [data-service-reveal="ai-business"] .business-ai-section-heading > span{
    margin-right:auto!important;
    margin-left:auto!important;
    text-align:center!important;
  }

  [data-service-reveal="ai-strategy"] .strategy-section-heading > h2,
  [data-service-reveal="ai-business"] .business-ai-section-heading > h2{
    position:relative!important;
    width:fit-content!important;
    max-width:100%!important;
    padding-bottom:15px!important;
  }

  [data-service-reveal="ai-strategy"] .strategy-section-heading > h2::after,
  [data-service-reveal="ai-business"] .business-ai-section-heading > h2::after{
    content:""!important;
    position:absolute!important;
    right:auto!important;
    bottom:0!important;
    left:50%!important;
    display:block!important;
    width:46px!important;
    height:3px!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    transform:translateX(-50%)!important;
    opacity:1!important;
    box-shadow:none!important;
  }

  [data-service-reveal="ai-strategy"] .strategy-section-heading > h2::after{
    background:linear-gradient(90deg,#5b22a8,#b785ef)!important;
  }

  [data-service-reveal="ai-business"] .business-ai-section-heading > h2::after{
    background:linear-gradient(90deg,#00856a,#8de0c9)!important;
  }

  /* 濃色セクションでも線が埋もれないよう、明るい色へ切り替え */
  [data-service-reveal="ai-strategy"] .strategy-section-heading--light > h2::after{
    background:linear-gradient(90deg,#b785ef,#eadcff)!important;
    box-shadow:0 0 12px rgba(183,133,239,.30)!important;
  }

  [data-service-reveal="ai-business"] .business-ai-section-heading--light > h2::after{
    background:linear-gradient(90deg,#8de0c9,#d9fff4)!important;
    box-shadow:0 0 12px rgba(141,224,201,.28)!important;
  }

  /* 説明文の読み幅を揃え、中央揃えでも横へ広がりすぎないようにする */
  [data-service-reveal="ai-strategy"] .strategy-section-heading > span,
  [data-service-reveal="ai-business"] .business-ai-section-heading > span{
    width:min(100%,500px)!important;
  }
}


/* =========================================================
   2026-09-04 | v12
   FORMLINK ONLY — REPLAY HINT / TITLE OVERLAP FIX
   ========================================================= */
@media screen and (max-width:767px){
  [data-service-reveal="formlink"]{
    --smr-demo-height:clamp(330px,48svh,410px);
  }

  .service-reveal-demo--formlink .service-reveal-demo__replay-hint{
    top:12px!important;
    right:12px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__status{
    max-width:calc(100% - 142px)!important;
    min-height:27px!important;
    display:flex!important;
    align-items:center!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:13px!important;
    padding-right:0!important;
    max-width:100%!important;
    font-size:clamp(18px,4.8vw,22px)!important;
    line-height:1.38!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    max-width:100%!important;
    margin-top:7px!important;
    padding-right:0!important;
    line-height:1.55!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__canvas{
    top:166px!important;
    bottom:16px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-devices{
    top:5px!important;
    bottom:58px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-calendar{
    top:75%!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track{
    height:58px!important;
  }
}

@media screen and (max-width:767px) and (max-height:760px){
  [data-service-reveal="formlink"]{
    --smr-demo-height:326px;
  }

  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:10px!important;
    font-size:18px!important;
    line-height:1.32!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.42!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__canvas{
    top:158px!important;
    bottom:12px!important;
  }
}


/* =========================================================
   2026-09-04 | v13 WHITE LABEL ARTICLE FLOW
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--white-label{
    --smr-demo-height:clamp(350px,50svh,420px);
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    max-width:100%;
    font-size:clamp(17px,4.7vw,21px);
    line-height:1.40;
  }

  .service-reveal-demo--white-label .service-reveal-demo__sub{
    max-width:100%;
    line-height:1.52;
  }

  .service-reveal-demo--white-label .smr-white-article-canvas{
    top:166px!important;
    right:18px!important;
    bottom:16px!important;
    left:18px!important;
    background:
      linear-gradient(
        180deg,
        transparent 0 72px,
        rgba(161,123,53,.11) 72px 73px,
        transparent 73px 142px,
        rgba(161,123,53,.11) 142px 143px,
        transparent 143px 212px,
        rgba(161,123,53,.11) 212px 213px,
        transparent 213px
      ),
      linear-gradient(145deg,#fffefb,#faf7f0)!important;
  }

  .smr-white-stage{
    position:absolute;
    right:18px;
    left:18px;
    z-index:3;
  }

  .smr-white-stage--design{ top:18px; }
  .smr-white-stage--quality{ top:118px; }

  .smr-white-stage > small{
    display:block;
    margin:0 0 10px;
    color:#a17b35;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif;
    font-size:9px;
    font-weight:900;
    line-height:1;
    letter-spacing:.10em;
  }

  .smr-white-type-line{
    min-height:40px;
    display:flex;
    align-items:flex-end;
    color:#17191d;
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:clamp(19px,5.5vw,24px);
    font-weight:600;
    line-height:1.32;
    letter-spacing:.01em;
  }

  .smr-white-type-line--quality{
    max-width:100%;
    min-height:62px;
    align-items:flex-start;
    font-size:clamp(17px,4.9vw,22px);
    line-height:1.48;
  }

  .smr-white-cursor{
    display:inline-block;
    flex:0 0 2px;
    width:2px;
    height:1.12em;
    margin-left:4px;
    background:#a17b35;
    opacity:0;
  }

  .smr-white-progress{
    position:absolute;
    top:103px;
    right:18px;
    left:18px;
    z-index:4;
    height:4px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(161,123,53,.12);
  }

  .smr-white-progress > i{
    display:block;
    width:100%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#8f6724,#c5a45c,#a17b35);
    box-shadow:0 0 14px rgba(161,123,53,.24);
    transform:scaleX(0);
    transform-origin:left center;
  }

  .service-reveal-demo--white-label .smr-white-ready{
    top:auto;
    right:14px;
    bottom:12px;
  }
}

@media screen and (max-width:767px) and (max-height:760px){
  .service-reveal-demo--white-label{
    --smr-demo-height:338px;
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    font-size:17px;
    line-height:1.34;
  }

  .service-reveal-demo--white-label .service-reveal-demo__canvas{
    top:158px!important;
    bottom:12px!important;
  }

  .smr-white-stage--design{top:14px;}
  .smr-white-stage--quality{top:106px;}
  .smr-white-progress{top:93px;}
  .smr-white-type-line{font-size:18px;}
  .smr-white-type-line--quality{font-size:16px;line-height:1.42;}
}


/* =========================================================
   2026-09-04 | v14 WHITE LABEL DEMO LAYOUT SAFETY
   - replay hint stays in its own top-right row
   - title never runs under the replay hint
   - article canvas gains vertical room
   - READY badge is isolated below the quality copy
   - quality text is allowed to wrap without clipping
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--white-label{
    --smr-demo-height:clamp(420px,58svh,490px);
    padding-top:18px!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__header{
    padding-top:4px;
  }

  .service-reveal-demo--white-label .service-reveal-demo__status{
    max-width:calc(100% - 142px);
    min-height:28px;
    display:flex;
    align-items:center;
  }

  .service-reveal-demo--white-label .service-reveal-demo__replay-hint{
    top:10px!important;
    right:12px!important;
    min-height:28px;
    z-index:20;
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    max-width:100%!important;
    margin-top:14px!important;
    padding-right:0!important;
    font-size:clamp(17px,4.65vw,21px)!important;
    line-height:1.42!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__sub{
    max-width:100%!important;
    margin-top:7px!important;
    padding-right:0!important;
    line-height:1.55!important;
  }

  .service-reveal-demo--white-label .smr-white-article-canvas{
    top:178px!important;
    right:18px!important;
    bottom:18px!important;
    left:18px!important;
    min-height:226px!important;
    padding-bottom:44px;
    overflow:hidden!important;
  }

  .service-reveal-demo--white-label .smr-white-stage{
    right:18px;
    left:18px;
  }

  .service-reveal-demo--white-label .smr-white-stage--design{
    top:18px;
  }

  .service-reveal-demo--white-label .smr-white-progress{
    top:101px;
    right:18px;
    left:18px;
  }

  .service-reveal-demo--white-label .smr-white-stage--quality{
    top:122px;
    bottom:44px;
    min-height:88px;
    overflow:visible;
  }

  .service-reveal-demo--white-label .smr-white-type-line--quality{
    width:100%;
    max-width:100%;
    min-height:70px;
    padding-right:0;
    align-items:flex-start;
    font-size:clamp(16px,4.55vw,21px)!important;
    line-height:1.45!important;
    white-space:normal!important;
    word-break:normal;
    overflow-wrap:anywhere;
  }

  .service-reveal-demo--white-label .smr-white-ready{
    top:auto!important;
    right:12px!important;
    bottom:9px!important;
    z-index:12;
    min-width:66px;
    text-align:center;
  }
}

@media screen and (max-width:767px) and (max-height:760px){
  .service-reveal-demo--white-label{
    --smr-demo-height:390px;
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    margin-top:11px!important;
    font-size:16.5px!important;
    line-height:1.38!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:9.5px!important;
    line-height:1.45!important;
  }

  .service-reveal-demo--white-label .smr-white-article-canvas{
    top:166px!important;
    bottom:12px!important;
    min-height:210px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage--design{top:14px;}
  .service-reveal-demo--white-label .smr-white-progress{top:91px;}
  .service-reveal-demo--white-label .smr-white-stage--quality{top:111px;bottom:42px;}
  .service-reveal-demo--white-label .smr-white-type-line{font-size:17px;}
  .service-reveal-demo--white-label .smr-white-type-line--quality{
    min-height:64px;
    font-size:15.5px!important;
    line-height:1.42!important;
  }
}

@media screen and (max-width:360px){
  .service-reveal-demo--white-label{
    --smr-demo-height:405px;
  }

  .service-reveal-demo--white-label .service-reveal-demo__status{
    max-width:calc(100% - 132px);
  }

  .service-reveal-demo--white-label .service-reveal-demo__replay-hint{
    right:9px!important;
    padding-inline:8px;
    font-size:8.5px;
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    font-size:16px!important;
    line-height:1.40!important;
  }

  .service-reveal-demo--white-label .smr-white-article-canvas{
    right:14px!important;
    left:14px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage,
  .service-reveal-demo--white-label .smr-white-progress{
    right:14px;
    left:14px;
  }

  .service-reveal-demo--white-label .smr-white-type-line--quality{
    font-size:15px!important;
  }
}


/* =========================================================
   2026-09-04 | v15 MOBILE REVEAL STABILITY PATCH
   Based on L.EVER MOBILE ANIMATION RESIZE SPEC.
   Layout dimensions are CSS-owned and remain fixed while animation runs.
   ========================================================= */
@media screen and (max-width:767px){
  :root{
    --smr-header-offset:72px;
    --smr-shell-height:calc(100svh - var(--smr-header-offset));
    --smr-hero-height:var(--smr-shell-height);
    --smr-reveal-distance:var(--smr-shell-height);
    --smr-stage-height:calc(var(--smr-shell-height) * 2);
    --smr-demo-width:min(calc(100vw - 28px),400px);
    --smr-demo-top:16px;
    --smr-demo-height:350px;
    --smr-demo-gap:24px;
    --smr-canvas-top:138px;
    --smr-canvas-bottom:16px;
  }

  html.service-mobile-reveal-ready .service-reveal-stage{
    height:var(--smr-stage-height)!important;
  }

  html.service-mobile-reveal-ready .service-reveal-stage > [data-service-hero],
  [data-service-reveal] [data-service-hero]{
    height:var(--smr-shell-height)!important;
    min-height:var(--smr-shell-height)!important;
  }

  html.service-mobile-reveal-ready [data-service-reveal-panel]{
    margin-top:calc(0px - var(--smr-shell-height))!important;
    box-shadow:0 -18px 40px rgba(6,27,61,.06),0 -1px 0 rgba(6,27,61,.05)!important;
    clip-path:none!important;
    will-change:transform,opacity!important;
  }

  .service-reveal-demo{
    left:50%!important;
    right:auto!important;
    width:var(--smr-demo-width)!important;
    height:var(--smr-demo-height)!important;
    min-height:0!important;
    padding:18px 16px 16px!important;
    border-radius:22px!important;
    box-shadow:0 16px 34px rgba(6,27,61,.10)!important;
    transform:translate3d(-50%,var(--smr-demo-shift,24px),0)!important;
    contain:paint;
    will-change:transform,opacity!important;
  }

  .service-reveal-demo__canvas{
    top:var(--smr-canvas-top)!important;
    right:16px!important;
    bottom:var(--smr-canvas-bottom)!important;
    left:16px!important;
    min-height:0!important;
  }

  .service-reveal-demo-spacer{
    height:calc(var(--smr-demo-top) + var(--smr-demo-height) + var(--smr-demo-gap))!important;
  }

  .service-reveal-mobile-visual::before{filter:blur(12px)!important;}

  /* FORMLINK: keep the outer panel fixed; animate internal lines only. */
  html.service-mobile-reveal-ready [data-service-reveal="formlink"] [data-service-reveal-panel]{
    clip-path:none!important;
  }

  [data-service-reveal="formlink"],
  .service-reveal-demo--white-label{
    --smr-demo-height:350px!important;
  }

  /* Page-specific internals from the resize specification. */
  .smr-tremo-phone{max-width:31%!important;left:10px!important;}
  .smr-tremo-destination{width:min(27%,92px)!important;right:10px!important;}
  .smr-tremo-route{left:37%!important;right:calc(27% + 30px)!important;}

  .smr-formlink-pc{width:27%!important;max-width:86px!important;height:72px!important;min-height:0!important;max-height:none!important;}
  .smr-formlink-pc--sender{left:0!important;}
  .smr-formlink-pc--receiver{right:0!important;}
  .smr-formlink-calendar{width:86px!important;min-width:86px!important;height:32px!important;}
  .smr-formlink-mail{width:clamp(26px,8vw,30px)!important;}

  .smr-strategy-node{width:62px!important;}
  .smr-strategy-node i{width:16px!important;height:16px!important;}
  .smr-strategy-scan{width:54px!important;height:54px!important;}

  .smr-business-dashboard{inset:8px 8px!important;gap:4px!important;}
  .smr-business-rail{height:2px!important;}
  .smr-business-packet{width:10px!important;height:10px!important;}
  .smr-business-scanner{height:2px!important;}

  .smr-white-heading,.smr-white-type-line{max-width:260px!important;}
  .smr-white-cursor{width:2px!important;flex-basis:2px!important;}
  .smr-white-check-line{height:2px!important;}

  /* DR VALUE: two fixed circles, 0→20 then 20→70. */
  .service-reveal-demo--dr .smr-dr-meter-canvas{padding:8px 8px 22px!important;}
  .smr-dr-flow{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  }
  .smr-dr-meter{width:clamp(96px,27vw,116px)!important;filter:none!important;}
  .smr-dr-meter::before{inset:16%!important;}
  .smr-dr-meter__track,.smr-dr-meter__progress{stroke-width:8!important;}
  .smr-dr-meter__progress{filter:none!important;transition:stroke .01s linear;}
  .smr-dr-meter__center strong{font-size:clamp(34px,10vw,46px)!important;}
  .smr-dr-meter__center span{font-size:8px!important;}
  .smr-dr-meter__center small{font-size:7px!important;}
  .smr-dr-arrow{
    position:relative;width:clamp(30px,9vw,40px);height:16px;display:block;flex:0 0 auto;
    transform:scaleX(0);transform-origin:left center;
  }
  .smr-dr-arrow::before{content:"";position:absolute;left:0;right:7px;top:7px;height:2px;border-radius:999px;background:#1687ef;}
  .smr-dr-arrow::after{content:"";position:absolute;right:1px;top:3px;width:8px;height:8px;border-top:2px solid #1687ef;border-right:2px solid #1687ef;transform:rotate(45deg);}
  .smr-dr-meter-note{font-size:8px!important;}
}

@media screen and (max-width:767px) and (max-height:700px){
  :root{--smr-demo-top:14px;--smr-demo-height:300px;--smr-demo-gap:24px;--smr-canvas-top:132px;}
  [data-service-reveal="formlink"],.service-reveal-demo--white-label{--smr-demo-height:300px!important;}
}

@media screen and (max-width:767px) and (min-height:881px){
  :root{--smr-demo-top:16px;--smr-demo-height:370px;--smr-demo-gap:24px;--smr-canvas-top:138px;}
  [data-service-reveal="formlink"],.service-reveal-demo--white-label{--smr-demo-height:370px!important;}
}

/* =========================================================
   2026-09-04 | v16 REPLAY HINT OVERLAP FIX
   FORMLINK already has its own dedicated rule. For all other
   service demos, reserve the top-right area for the replay hint
   so it never overlaps the status/title copy.
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__replay-hint{
    top:10px!important;
    right:12px!important;
    z-index:20!important;
    min-height:28px!important;
  }

  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__header{
    padding-top:4px!important;
  }

  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__status{
    max-width:calc(100% - 142px)!important;
    min-height:28px!important;
    display:flex!important;
    align-items:center!important;
    padding-right:4px!important;
    box-sizing:border-box!important;
  }

  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__title{
    max-width:100%!important;
    margin-top:13px!important;
    padding-right:0!important;
  }

  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__sub{
    max-width:100%!important;
    padding-right:0!important;
  }
}

@media screen and (max-width:360px){
  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__replay-hint{
    right:9px!important;
    padding-inline:8px!important;
    font-size:8.5px!important;
  }

  .service-reveal-demo:not(.service-reveal-demo--formlink) .service-reveal-demo__status{
    max-width:calc(100% - 132px)!important;
  }
}

/* =========================================================
   2026-09-05 | v17 WHITE LABEL TEXT / RULE OVERLAP FIX
   Keep the stabilized outer demo height unchanged.
   Only compact the WHITE LABEL internals and remove ruled
   background lines that can cross the generated copy.
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--white-label .service-reveal-demo__header{
    padding-top:4px!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__title{
    margin-top:10px!important;
    font-size:clamp(16.5px,4.45vw,20px)!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:clamp(9px,2.45vw,10.5px)!important;
    line-height:1.42!important;
  }

  /* Move the article canvas below the intro copy without changing the card. */
  .service-reveal-demo--white-label .smr-white-article-canvas{
    top:154px!important;
    right:16px!important;
    bottom:12px!important;
    left:16px!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:linear-gradient(145deg,#fffefb,#faf7f0)!important;
  }

  .service-reveal-demo--white-label .smr-white-stage{
    right:14px!important;
    left:14px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage--design{
    top:10px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage > small{
    margin-bottom:7px!important;
    font-size:8px!important;
    line-height:1!important;
  }

  .service-reveal-demo--white-label .smr-white-type-line{
    max-width:100%!important;
    min-height:30px!important;
    font-size:clamp(17px,4.8vw,20px)!important;
    line-height:1.24!important;
  }

  /* Gold divider sits clearly below ARTICLE DESIGN text. */
  .service-reveal-demo--white-label .smr-white-progress{
    top:76px!important;
    right:14px!important;
    left:14px!important;
    height:3px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage--quality{
    top:91px!important;
    right:14px!important;
    bottom:30px!important;
    left:14px!important;
    min-height:0!important;
    overflow:visible!important;
  }

  .service-reveal-demo--white-label .smr-white-type-line--quality{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    padding:0!important;
    font-size:clamp(17px,4.8vw,20px)!important;
    line-height:1.34!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .service-reveal-demo--white-label .smr-white-ready{
    right:8px!important;
    bottom:7px!important;
    min-width:52px!important;
    padding:4px 8px!important;
    font-size:7px!important;
  }
}

/* Compact-height phones: keep the same 300px outer card and compress only internals. */
@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--white-label .service-reveal-demo__title{
    margin-top:8px!important;
    font-size:15.5px!important;
    line-height:1.30!important;
  }

  .service-reveal-demo--white-label .service-reveal-demo__sub{
    margin-top:3px!important;
    font-size:8.5px!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--white-label .smr-white-article-canvas{
    top:144px!important;
    bottom:10px!important;
  }

  .service-reveal-demo--white-label .smr-white-stage--design{top:7px!important;}
  .service-reveal-demo--white-label .smr-white-stage > small{margin-bottom:5px!important;font-size:7px!important;}
  .service-reveal-demo--white-label .smr-white-type-line{font-size:15.5px!important;line-height:1.20!important;}
  .service-reveal-demo--white-label .smr-white-progress{top:56px!important;}
  .service-reveal-demo--white-label .smr-white-stage--quality{top:68px!important;bottom:25px!important;}
  .service-reveal-demo--white-label .smr-white-type-line--quality{font-size:12.5px!important;line-height:1.24!important;}
  .service-reveal-demo--white-label .smr-white-ready{bottom:5px!important;font-size:6.5px!important;}
}

/* =========================================================
   2026-09-05 | v18 FORMLINK APPROVED COMPOSITION
   Approved visual reference:
   - no monitor/envelope inner frame inside FORMLINK / company cards
   - send/reply lines are separated and end with clear arrows
   - persistent mail / reply icons sit on the corresponding arrows
   - no standalone schedule-confirmation box
   - bottom 6-step flow uses simple circles + arrows
   - stabilized outer demo size remains unchanged
   ========================================================= */
@media screen and (max-width:767px){
  /* Keep the approved outer card geometry from the stability patch. */
  .service-reveal-demo--formlink{
    overflow:hidden!important;
  }

  /* Give the header a little more breathing room before the diagram. */
  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:11px!important;
    font-size:clamp(17.5px,4.65vw,21px)!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:clamp(9px,2.45vw,10.5px)!important;
    line-height:1.42!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:150px!important;
    right:16px!important;
    bottom:14px!important;
    left:16px!important;
    overflow:hidden!important;
  }

  /* Main two status cards: remove the old monitor/inner-frame treatment. */
  .service-reveal-demo--formlink .smr-formlink-devices{
    top:4px!important;
    right:8px!important;
    bottom:56px!important;
    left:8px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc{
    top:8px!important;
    width:27%!important;
    max-width:88px!important;
    height:70px!important;
    min-height:70px!important;
    padding:9px 8px 8px!important;
    overflow:hidden!important;
    border:1.5px solid #0b72e7!important;
    border-radius:11px!important;
    background:linear-gradient(145deg,#fff,#f4f9ff)!important;
    box-shadow:0 7px 16px rgba(6,27,61,.08)!important;
    box-sizing:border-box!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc--sender{left:0!important;}
  .service-reveal-demo--formlink .smr-formlink-pc--receiver{right:0!important;}

  .service-reveal-demo--formlink .smr-formlink-screen{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen::after,
  .service-reveal-demo--formlink .smr-formlink-screen > i,
  .service-reveal-demo--formlink .smr-formlink-pc > em,
  .service-reveal-demo--formlink .smr-formlink-pc > em::before{
    display:none!important;
    content:none!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > span{
    display:block!important;
    color:#0b72e7!important;
    font-size:6px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.05em!important;
    white-space:nowrap!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > b{
    display:block!important;
    margin-top:8px!important;
    color:#061b3d!important;
    font-size:8px!important;
    font-weight:900!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc.is-active,
  .service-reveal-demo--formlink .smr-formlink-pc.is-received,
  .service-reveal-demo--formlink .smr-formlink-pc.is-replied{
    border-color:#0b72e7!important;
    box-shadow:0 8px 18px rgba(11,114,231,.12)!important;
  }

  /* No standalone blue schedule-confirmation box in the approved layout. */
  .service-reveal-demo--formlink .smr-formlink-calendar{
    display:none!important;
  }

  /* Two distinct communication arrows with room between them. */
  .service-reveal-demo--formlink .smr-formlink-connection{
    left:30%!important;
    width:40%!important;
    height:2px!important;
    border-radius:999px!important;
    background:#0b72e7!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out{
    top:29%!important;
    transform-origin:left center!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back{
    top:56%!important;
    opacity:.72!important;
    background:repeating-linear-gradient(90deg,#0b72e7 0 6px,transparent 6px 10px)!important;
    transform-origin:right center!important;
  }

  /* Arrowheads remain visible after the moving mail animation ends. */
  .service-reveal-demo--formlink .smr-formlink-connection--out::after,
  .service-reveal-demo--formlink .smr-formlink-connection--back::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    width:8px!important;
    height:8px!important;
    border-top:2px solid #0b72e7!important;
    border-right:2px solid #0b72e7!important;
    pointer-events:none!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out::after{
    right:-2px!important;
    transform:translateY(-50%) rotate(45deg)!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back::after{
    left:-2px!important;
    transform:translateY(-50%) rotate(225deg)!important;
  }

  /* Persistent line meaning: mail icon on send, reply icon on return. */
  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    z-index:8!important;
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    border:2px solid #fff!important;
    border-radius:50%!important;
    color:#0b72e7!important;
    background:#fff!important;
    box-shadow:0 4px 11px rgba(11,114,231,.16)!important;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:1!important;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out::before{
    content:"✉"!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    content:"↩"!important;
    font-size:15px!important;
  }

  /* The animated SVG mail is still used while moving, but does not remain as a third visual layer. */
  .service-reveal-demo--formlink .smr-formlink-mail{
    width:clamp(24px,7vw,28px)!important;
    filter:none!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail--out{top:29%!important;}
  .service-reveal-demo--formlink .smr-formlink-mail--back{top:56%!important;}

  /* Bottom flow: simple six circles with clear arrows between them. */
  .service-reveal-demo--formlink .service-reveal-demo__track{
    right:2px!important;
    bottom:0!important;
    left:2px!important;
    height:54px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-rail,
  .service-reveal-demo--formlink .service-reveal-demo__pulse{
    display:none!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step{
    width:44px!important;
    height:54px!important;
    margin-left:-22px!important;
    overflow:visible!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step i{
    top:1px!important;
    width:27px!important;
    height:27px!important;
    border-width:2px!important;
    font-size:9px!important;
    box-shadow:0 5px 11px rgba(11,114,231,.12)!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step b{
    top:33px!important;
    width:48px!important;
    font-size:7px!important;
    line-height:1.18!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step:not(:last-child)::after{
    content:"→"!important;
    position:absolute!important;
    top:4px!important;
    left:calc(50% + 27px)!important;
    z-index:12!important;
    color:#0b72e7!important;
    font-family:Arial,sans-serif!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1!important;
    opacity:.95!important;
    pointer-events:none!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:142px!important;
    bottom:10px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc{
    height:64px!important;
    min-height:64px!important;
    padding:7px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > b{
    margin-top:6px!important;
    font-size:7.5px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out{top:28%!important;}
  .service-reveal-demo--formlink .smr-formlink-connection--back{top:55%!important;}
  .service-reveal-demo--formlink .smr-formlink-mail--out{top:28%!important;}
  .service-reveal-demo--formlink .smr-formlink-mail--back{top:55%!important;}

  .service-reveal-demo--formlink .service-reveal-demo__track{
    height:50px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step{
    height:50px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step i{
    width:25px!important;
    height:25px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step b{
    top:30px!important;
    font-size:6.5px!important;
  }
}


/* =========================================================
   2026-09-05 | v19 FORMLINK FINAL SPACING / FLOW POLISH
   Approved visual reference:
   - force headline break before "PC間で"
   - slightly smaller side status cards
   - wider communication lane between the two cards
   - larger persistent mail/reply icons
   - wider vertical separation between send/reply arrows
   - keep all 6 steps inside the safe horizontal area
   - keep stabilized outer card geometry unchanged
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:11px!important;
    font-size:clamp(17px,4.55vw,20px)!important;
    line-height:1.30!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:6px!important;
    font-size:clamp(9px,2.4vw,10.25px)!important;
    line-height:1.40!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:154px!important;
    right:16px!important;
    bottom:14px!important;
    left:16px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-devices{
    top:5px!important;
    right:7px!important;
    bottom:58px!important;
    left:7px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc{
    top:8px!important;
    width:24%!important;
    max-width:78px!important;
    height:64px!important;
    min-height:64px!important;
    padding:8px 7px 7px!important;
    border-radius:10px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > span{
    font-size:5.75px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > b{
    margin-top:7px!important;
    font-size:7.5px!important;
    line-height:1.18!important;
  }

  /* Give the send/reply arrows more visual length and more vertical separation. */
  .service-reveal-demo--formlink .smr-formlink-connection{
    left:27%!important;
    width:46%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out{
    top:25%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back{
    top:58%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail--out{top:25%!important;}
  .service-reveal-demo--formlink .smr-formlink-mail--back{top:58%!important;}

  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    width:30px!important;
    height:30px!important;
    font-size:16px!important;
    box-shadow:0 5px 13px rgba(11,114,231,.17)!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    font-size:17px!important;
  }

  /* Six steps: slightly smaller circles, more side safety, lifted from card bottom. */
  .service-reveal-demo--formlink .service-reveal-demo__track{
    right:4px!important;
    bottom:3px!important;
    left:4px!important;
    height:52px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step{
    width:42px!important;
    height:52px!important;
    margin-left:-21px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step i{
    top:0!important;
    width:25px!important;
    height:25px!important;
    font-size:8.5px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step b{
    top:30px!important;
    width:46px!important;
    font-size:6.8px!important;
    line-height:1.18!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step:not(:last-child)::after{
    top:3px!important;
    left:calc(50% + 24px)!important;
    font-size:15px!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:9px!important;
    font-size:15.5px!important;
    line-height:1.28!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:4px!important;
    font-size:8.4px!important;
    line-height:1.32!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:146px!important;
    bottom:10px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-pc{
    width:23%!important;
    max-width:72px!important;
    height:58px!important;
    min-height:58px!important;
    padding:6px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > b{
    margin-top:5px!important;
    font-size:7px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out,
  .service-reveal-demo--formlink .smr-formlink-mail--out{top:24%!important;}

  .service-reveal-demo--formlink .smr-formlink-connection--back,
  .service-reveal-demo--formlink .smr-formlink-mail--back{top:57%!important;}

  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    width:27px!important;
    height:27px!important;
    font-size:14px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track{
    bottom:1px!important;
    height:48px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step{
    height:48px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step i{
    width:23px!important;
    height:23px!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track-step b{
    top:28px!important;
    font-size:6.25px!important;
  }
}

/* =========================================================
   2026-09-05 | v20 FORMLINK LARGE FRAME / ARROW SPACING FIX
   Approved from latest mobile screenshot review:
   - enlarge FORMLINK outer demo card with fixed viewport-band values
   - keep no arrow after step 6
   - increase vertical separation between send/reply lanes
   - keep mail/reply circular markers clear of each other
   - shift bottom inter-step arrows slightly left
   - keep all geometry CSS-owned (no runtime height animation)
   ========================================================= */
@media screen and (max-width:767px){
  /* Larger outer frame, still fixed per viewport tier for stability. */
  [data-service-reveal="formlink"]{
    --smr-demo-height:390px!important;
  }

  .service-reveal-demo--formlink{
    height:var(--smr-demo-height)!important;
  }

  /* More room for the diagram inside the enlarged card. */
  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:158px!important;
    right:16px!important;
    bottom:16px!important;
    left:16px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-devices{
    top:8px!important;
    right:8px!important;
    bottom:68px!important;
    left:8px!important;
  }

  /* Increase vertical lane separation so the two circular markers never touch. */
  .service-reveal-demo--formlink .smr-formlink-connection--out,
  .service-reveal-demo--formlink .smr-formlink-mail--out{
    top:20%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back,
  .service-reveal-demo--formlink .smr-formlink-mail--back{
    top:64%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    width:30px!important;
    height:30px!important;
  }

  /* Lift the six-step row slightly and keep it fully inside the canvas. */
  .service-reveal-demo--formlink .service-reveal-demo__track{
    right:6px!important;
    bottom:7px!important;
    left:6px!important;
    height:54px!important;
  }

  /* Inter-step arrows sit closer to the preceding number, not the next one. */
  .service-reveal-demo--formlink .service-reveal-demo__track-step:not(:last-child)::after{
    left:calc(50% + 19px)!important;
    top:3px!important;
  }

  /* Hard stop: absolutely no continuation arrow after step 6. */
  .service-reveal-demo--formlink .service-reveal-demo__track-step:last-child::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  [data-service-reveal="formlink"]{
    --smr-demo-height:340px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:148px!important;
    bottom:12px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-devices{
    bottom:61px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--out,
  .service-reveal-demo--formlink .smr-formlink-mail--out{
    top:19%!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection--back,
  .service-reveal-demo--formlink .smr-formlink-mail--back{
    top:63%!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__track{
    bottom:4px!important;
    height:50px!important;
  }
}

@media screen and (max-width:767px) and (min-height:881px){
  [data-service-reveal="formlink"]{
    --smr-demo-height:410px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-mail-canvas{
    top:160px!important;
    bottom:18px!important;
  }
}

/* =========================================================
   2026-09-05 | v21 FORMLINK SIDE BOX ENLARGE / STEP6 ARROW OFF
   Requested final-only adjustment:
   - keep the current composition and outer frame unchanged
   - enlarge only FORMLINK / company status boxes
   - remove the arrow after step 6 with an explicit data-step selector
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--formlink .smr-formlink-pc{
    width:29%!important;
    max-width:94px!important;
    height:76px!important;
    min-height:76px!important;
    padding:10px 9px 9px!important;
    border-radius:12px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > span{
    font-size:6.25px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-screen > b{
    margin-top:8px!important;
    font-size:8px!important;
  }

  /* Keep the communication lines clear of the enlarged side boxes. */
  .service-reveal-demo--formlink .smr-formlink-connection{
    left:31%!important;
    width:38%!important;
  }

  /* createStepTrack appends the pulse after the six steps, so :last-child
     does not target step 6 reliably. Target its data index explicitly. */
  .service-reveal-demo--formlink [data-demo-step="5"]::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    height:0!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--formlink .smr-formlink-pc{
    width:28%!important;
    max-width:88px!important;
    height:68px!important;
    min-height:68px!important;
    padding:8px!important;
  }

  .service-reveal-demo--formlink .smr-formlink-connection{
    left:30%!important;
    width:40%!important;
  }
}

/* =========================================================
   2026-09-05 | v22 FORMLINK TEXT SIZE RESTORE
   Keep all approved object/layout changes from v21.
   Restore heading/support-copy typography to the pre-shrink v18 values.
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:11px!important;
    font-size:clamp(17.5px,4.65vw,21px)!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:clamp(9px,2.45vw,10.5px)!important;
    line-height:1.42!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--formlink .service-reveal-demo__title{
    margin-top:10px!important;
    font-size:18px!important;
    line-height:1.32!important;
  }

  .service-reveal-demo--formlink .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.42!important;
  }
}

/* =========================================================
   2026-09-05 | v23 AI STRATEGY DOTTED ALT ROUTES REMOVE
   The two dotted alternative branches did not convey a distinct
   action/state in the current animation, so hide them permanently.
   Keep only the main route + selected route animation.
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--ai-strategy .smr-strategy-route--alt-one,
  .service-reveal-demo--ai-strategy .smr-strategy-route--alt-two,
  .service-reveal-demo--ai-strategy [data-strategy-alt]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
}



/* =========================================================
   2026-09-05 | v24 FORMLINK CENTER ENVELOPE ICONS LARGE
   - apply to latest user-edited files
   - both center markers use envelope icon
   - enlarge icon and white circular marker
   - preserve all other current layout/content changes
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    content:"✉"!important;
    width:38px!important;
    height:38px!important;
    border-width:2px!important;
    font-size:21px!important;
    line-height:1!important;
    box-shadow:0 6px 16px rgba(11,114,231,.18)!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--formlink .smr-formlink-connection--out::before,
  .service-reveal-demo--formlink .smr-formlink-connection--back::before{
    width:34px!important;
    height:34px!important;
    font-size:19px!important;
  }
}


/* =========================================================
   2026-09-06 | v25 TREMO RESTORE / OVERLAP FIX
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--tremo .service-reveal-demo__title{
    margin-top:11px!important;
    font-size:clamp(17.5px,4.7vw,21px)!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--tremo .service-reveal-demo__sub{
    margin-top:5px!important;
    font-size:clamp(9px,2.45vw,10.5px)!important;
    line-height:1.40!important;
    max-width:100%!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    top:156px!important;
    right:16px!important;
    bottom:14px!important;
    left:16px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-phone{
    top:8px!important;
    bottom:9px!important;
    left:10px!important;
    max-width:29%!important;
  }

  .service-reveal-demo--tremo .smr-tremo-destination{
    top:24%!important;
    right:10px!important;
    width:min(26%,88px)!important;
    min-height:50%!important;
  }

  .service-reveal-demo--tremo .smr-tremo-route{
    top:52%!important;
    left:36%!important;
    right:calc(26% + 32px)!important;
  }

  .service-reveal-demo--tremo .smr-tremo-ready{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--tremo .service-reveal-demo__title{
    font-size:16.5px!important;
    line-height:1.30!important;
  }

  .service-reveal-demo--tremo .service-reveal-demo__sub{
    font-size:9px!important;
    line-height:1.34!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    top:148px!important;
    bottom:10px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-phone{
    max-width:28%!important;
  }
}



/* =========================================================
   2026-09-06 | v26 TREMO OUTER RED FRAME ENLARGE
   - enlarge only the TREMO outer demo card
   - preserve current text/object composition
   - keep fixed CSS-owned heights for stability
   ========================================================= */
@media screen and (max-width:767px){
  [data-service-reveal="tremo"]{
    --smr-demo-height:370px!important;
  }

  .service-reveal-demo--tremo{
    height:var(--smr-demo-height)!important;
  }

  /* Use the extra height mainly as breathing room below the intro copy. */
  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    top:156px!important;
    bottom:18px!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  [data-service-reveal="tremo"]{
    --smr-demo-height:320px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    top:148px!important;
    bottom:12px!important;
  }
}

@media screen and (max-width:767px) and (min-height:881px){
  [data-service-reveal="tremo"]{
    --smr-demo-height:390px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-canvas{
    bottom:20px!important;
  }
}



/* =========================================================
   2026-09-06 | v27 AI STRATEGY NODE / LABEL SPACING
   - keep graph points and route geometry unchanged
   - increase only the vertical gap between each point and its label
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--ai-strategy .smr-strategy-node i{
    margin-bottom:11px!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--ai-strategy .smr-strategy-node i{
    margin-bottom:8px!important;
  }
}



/* =========================================================
   2026-09-09 | v30 TREMO PERSISTENT PLAY + PRESS ACTION
   Approved motion:
   - one play mark only
   - existing small video mark is centered and enlarged
   - old reel-scene play marks are hidden
   - play mark briefly "presses" (shrink + ripple), then returns
   - play mark stays visible after the press and through route completion
   - LP / EC route / destination timing otherwise remains unchanged
   ========================================================= */
@media screen and (max-width:767px){

  /* Remove the old play icons inside each reel scene. */
  .service-reveal-demo--tremo .smr-tremo-scene > i{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }

  /* Center the single persistent video/play mark. */
  .service-reveal-demo--tremo .smr-tremo-shorts-mark{
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    right:auto!important;
    z-index:12!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:0!important;
    text-shadow:none!important;
    transform:translate(-50%,-50%) scale(1)!important;
    transform-origin:center!important;
    transition:transform .16s ease-out!important;
    pointer-events:none!important;
  }

  /* Soft press ripples; visible only during the press state. */
  .service-reveal-demo--tremo .smr-tremo-shorts-mark::before,
  .service-reveal-demo--tremo .smr-tremo-shorts-mark::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    left:50%!important;
    z-index:-1!important;
    width:54px!important;
    height:54px!important;
    border:1.5px solid rgba(255,255,255,.74)!important;
    border-radius:50%!important;
    opacity:0!important;
    transform:translate(-50%,-50%) scale(.72)!important;
    transition:opacity .14s ease,transform .22s ease-out!important;
    pointer-events:none!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark::after{
    width:68px!important;
    height:68px!important;
    border-color:rgba(255,255,255,.34)!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark.is-pressed{
    transform:translate(-50%,-50%) scale(.88)!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark.is-pressed::before{
    opacity:.88!important;
    transform:translate(-50%,-50%) scale(1)!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark.is-pressed::after{
    opacity:.52!important;
    transform:translate(-50%,-50%) scale(1.05)!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark > i{
    position:relative!important;
    width:46px!important;
    height:46px!important;
    display:block!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,#ff2638 0%,#e60012 76%)!important;
    box-shadow:
      0 8px 18px rgba(115,0,10,.26),
      0 0 0 1px rgba(255,255,255,.10)!important;
    transform:none!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark > i::after{
    content:""!important;
    position:absolute!important;
    top:50%!important;
    left:54%!important;
    width:0!important;
    height:0!important;
    border-top:9px solid transparent!important;
    border-bottom:9px solid transparent!important;
    border-left:14px solid #fff!important;
    transform:translate(-50%,-50%)!important;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  .service-reveal-demo--tremo .smr-tremo-shorts-mark,
  .service-reveal-demo--tremo .smr-tremo-shorts-mark > i{
    width:42px!important;
    height:42px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark > i{
    border-radius:13px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark::before{
    width:50px!important;
    height:50px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark::after{
    width:62px!important;
    height:62px!important;
  }

  .service-reveal-demo--tremo .smr-tremo-shorts-mark > i::after{
    border-top-width:8px!important;
    border-bottom-width:8px!important;
    border-left-width:13px!important;
  }
}



/* =========================================================
   2026-09-09 | v31 TREMO — REMOVE INITIAL REEL SCROLL
   The first smartphone video remains fixed.
   The persistent play button still performs the approved press action,
   then the route to LP / EC continues normally.
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--tremo [data-tremo-reel]{
    transform:translate3d(0,0,0)!important;
  }
}



/* =========================================================
   2026-09-09 | v32 TREMO — REMOVE BACK CIRCLE BEHIND PLAY MARK
   - remove the large translucent decorative circle behind the play button
   - keep the centered play button itself
   - keep the approved press action / route animation
   - keep the rest of the phone artwork unchanged
   ========================================================= */
@media screen and (max-width:767px){
  .service-reveal-demo--tremo .smr-tremo-scene::before{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    background:none!important;
    box-shadow:none!important;
  }
}


/* =========================================================
   2026-09-09 | v34 FORMLINK SLOW 8SEC / DR RED→GOLD→GREEN
   - FORMLINK: same sequence, entire timeline stretched from 7s to 8s
   - DR VALUE: stronger red start, gold midrange, green finish
   - no layout / size changes
   ========================================================= */


/* =========================================================
   2026-09-09 | v35 FORMLINK EARLY START / 9SEC
   - start FORMLINK demo immediately when auto-snap begins
   - extend full FORMLINK sequence from 8s to 9s
   - DR VALUE colors and all current layouts remain unchanged
   ========================================================= */


/* =========================================================
   2026-09-09 | v36 FORMLINK EARLY VISIBLE MOTION / 9SEC
   - demo card appears almost immediately
   - sender activation starts near the beginning
   - outbound line/mail motion begins much earlier
   - reply motion is also shifted earlier
   - full FORMLINK duration remains 9 seconds
   ========================================================= */


/* =========================================================
   2026-09-09 | v37 FORMLINK IMMEDIATE START / SLOW MOTION / 9SEC
   - total FORMLINK duration remains 9 seconds
   - initial visual wait reduced to almost zero
   - outbound/reply lines and mails start earlier
   - each movement window is lengthened so the animation itself runs slower
   ========================================================= */


/* =========================================================
   2026-09-09 | v38 FORMLINK TOTAL DURATION 8SEC
   - keep immediate start
   - keep slower individual motion windows
   - total FORMLINK duration: 9s -> 8s
   ========================================================= */

/* =========================================================
   2026-09-11 | MOBILE SERVICE HERO COPY ALIGNMENT — TREMO BASE
   Copy and service-logo placement only. Visual/background rules untouched.
   ========================================================= */
@media screen and (max-width:767px){
  [data-service-reveal] [data-service-hero-content]{
    text-align:left!important;
  }

  [data-service-reveal] [data-service-brand]{
    width:min(292px,100%)!important;
    max-width:292px!important;
    height:auto!important;
    max-height:82px!important;
    margin:0 0 14px!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:left center!important;
    text-align:left!important;
  }

  [data-service-reveal] [data-service-brand] > img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:82px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  main[data-service-reveal="dr"].dr-growth-page
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand]{
    width:min(292px,100%)!important;
    max-width:292px!important;
    margin:0 0 14px!important;
    overflow:visible!important;
  }

  main[data-service-reveal="dr"].dr-growth-page
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand] > img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:82px!important;
  }

  [data-service-reveal="tremo"] .affiliate-kicker,
  [data-service-reveal="formlink"] .formx-kicker,
  [data-service-reveal="dr"] .hero__eyebrow,
  [data-service-reveal="ai-strategy"] .strategy-service-label,
  [data-service-reveal="ai-business"] .business-ai-kicker,
  [data-service-reveal="white-label"] .article-kicker,
  [data-service-reveal] [data-service-hero-content] > h1,
  [data-service-reveal="tremo"] .affiliate-hero__lead,
  [data-service-reveal="formlink"] .formx-hero__lead,
  [data-service-reveal="dr"] .hero__lead,
  [data-service-reveal="ai-strategy"] .strategy-hero__statement,
  [data-service-reveal="ai-business"] .business-ai-hero__statement,
  [data-service-reveal="white-label"] .article-hero__lead,
  [data-service-reveal="tremo"] .affiliate-hero__text,
  [data-service-reveal="formlink"] .formx-hero__text,
  [data-service-reveal="dr"] .hero__description,
  [data-service-reveal="ai-strategy"] .strategy-hero__description,
  [data-service-reveal="ai-business"] .business-ai-hero__description,
  [data-service-reveal="white-label"] .article-hero__text{
    text-align:left!important;
  }
}

@media screen and (max-width:390px){
  [data-service-reveal] [data-service-brand]{
    width:min(270px,76vw)!important;
    max-width:270px!important;
  }

  main[data-service-reveal="dr"].dr-growth-page
  .hero.hero--roadmap
  .hero__brand.hero__brand--image[data-service-brand]{
    width:min(270px,76vw)!important;
    max-width:270px!important;
  }
}