:root{--glass-edge:#bdc8cf1a;--paper:#fff;--canvas:#f3f4f6;--ink:#1b1e24;--muted:#626973;--line:#dfe2e7;--blue:#275cdf;--blue-hover:#1848bd;--gutter:clamp(24px,4.45vw,88px);--body-font:"Inter","Noto Sans JP",sans-serif;--utility-font:var(--body-font)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.8 var(--body-font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}img{display:block;max-width:100%}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.symbols{position:absolute;width:0;height:0;overflow:hidden}h1,h2,p,figure{margin:0}a,button{transition:color .3s,background-color .3s,box-shadow .3s,transform .3s}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.site-header{height:96px;padding:0 var(--gutter);display:flex;align-items:center;gap:64px;background:var(--paper);position:relative;z-index:5}.brand{margin-right:auto;flex-shrink:0}.brand img{width:88px;height:auto}.site-header nav{display:flex;gap:36px;font-size:14px;font-weight:600}.site-header nav a{position:relative;padding:8px 0}.site-header nav a:after{content:"";position:absolute;bottom:4px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s}.site-header nav a:hover:after{transform:scaleX(1)}.header-cta{display:flex;align-items:center;gap:30px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;padding:12px 22px;border-radius:5px}.header-cta svg{width:19px;height:19px}.header-cta:hover{background:var(--blue)}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas);min-height:740px;height:calc(100svh - 96px);max-height:940px;display:flex;align-items:center}.hero-copy{position:relative;z-index:2;margin-left:var(--gutter);width:48%;max-width:670px;padding:60px 0 80px;pointer-events:none}.hero-copy a{pointer-events:auto}.eyebrow{font-size:14px;font-weight:600;margin-bottom:26px}.hero h1{font-size:clamp(38px,3.7vw,60px);font-weight:700;line-height:1.48;font-feature-settings:"palt"}.hero h1 span{display:block}.lead{font-size:16px;line-height:2;margin-top:25px;color:#454b54}.hero-actions{display:flex;align-items:center;gap:32px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;gap:56px;min-height:60px;padding:12px 26px;border-radius:5px;font-size:16px;font-weight:600}.button.primary{background:var(--blue);color:var(--paper)}.button.primary:hover{background:var(--blue-hover);box-shadow:0 7px 18px #275cdf20}.button svg,.text-link svg{transition:transform .3s}.button:hover svg,.text-link:hover svg{transform:translateX(4px)}.text-link{display:inline-flex;gap:18px;align-items:center;font-size:14px;font-weight:600}.text-link:hover{color:var(--blue)}.text-link svg{width:20px;height:20px}.audience{font-size:14px;color:var(--muted);margin-top:24px}
/* 2列を一つの面として回転させ、共通の視点から遠近を付ける。 */
.showcase{position:absolute;z-index:1;left:47%;top:0;width:60%;height:100%;pointer-events:none}
.ambient-screens{display:none;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-layer{position:absolute;top:-130px;left:0;width:100%;height:calc(100% + 260px);max-width:none;object-fit:cover;transform:translate3d(0,var(--ambient-y,0px),0);will-change:transform}
.ambient-far{opacity:.1}.ambient-near{opacity:.4}
.composition{position:absolute;top:50%;left:0;width:848px;height:1250px;transform:translateY(-51%) var(--tilt);transform-style:preserve-3d;--screen-width:400px;--screen-height:390px;--screen-gap:40px;--tilt:perspective(3500px) rotateX(25deg) rotateY(20deg) rotateZ(-20deg)}
.parallax-layer{position:absolute;inset:0;transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.screen-plane{display:grid;grid-template-columns:repeat(2,var(--screen-width));column-gap:48px;align-items:start;width:100%;height:100%}
.screen-column-scene:first-child{padding-top:180px}
.screen-column{display:grid;grid-template-rows:repeat(3,var(--screen-height));row-gap:var(--screen-gap);width:var(--screen-width);height:1250px}
.screen{width:var(--screen-width);height:var(--screen-height);margin:0}
.screen.fieldwork,.screen.haruno{grid-row:1}
.screen.tsugumi,.screen.shizuri{grid-row:2}
.screen.hiyori{grid-row:3}
.screen-surface{display:block;padding:0;border:0;background:var(--paper);width:100%;height:100%;border-radius:5px;box-shadow:0 25px 40px -18px #18243735,0 2px 4px #18243712;overflow:hidden}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
/* 前回の正面案は直接URLで参照できる形で保持する。 */
body[data-layout="front"] .screen-plane{display:block;position:relative}
body[data-layout="front"] .screen-column-scene,body[data-layout="front"] .screen-column,body[data-layout="front"] .column-drift{display:contents;animation:none}
body[data-layout="front"] .screen{position:absolute;height:auto}

body[data-layout="front"] .hero{display:block;height:890px;max-height:none;min-height:0}body[data-layout="front"] .hero-copy{margin:0 auto;text-align:center;max-width:none;width:100%;padding:55px var(--gutter) 0}body[data-layout="front"] .eyebrow{margin-bottom:14px}body[data-layout="front"] .hero h1{font-size:clamp(36px,3.4vw,52px);line-height:1.55}body[data-layout="front"] .hero h1 span{display:inline}body[data-layout="front"] .lead{margin-top:17px}body[data-layout="front"] .hero-actions{justify-content:center;margin-top:26px}body[data-layout="front"] .audience{margin-top:20px}body[data-layout="front"] .showcase{left:50%;width:1760px;top:355px;height:570px;transform:translateX(-50%);perspective:none}body[data-layout="front"] .composition{top:0;left:0;width:100%;height:100%;transform:none}body[data-layout="front"] .screen{width:320px}body[data-layout="front"] .screen .screen-surface{height:330px}body[data-layout="front"] .screen.haruno{left:704px;top:32px;width:420px;z-index:2}body[data-layout="front"] .screen.haruno .screen-surface{height:390px}body[data-layout="front"] .screen.tsugumi{left:340px;top:90px;width:340px}body[data-layout="front"] .screen.shizuri{left:1148px;top:98px;width:340px}body[data-layout="front"] .screen.fieldwork{left:-4px;top:180px}body[data-layout="front"] .screen.hiyori{left:1512px;top:190px}
.demo-section{padding:90px var(--gutter) 125px;max-width:1800px;margin:0 auto}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:35px}.section-label{font:500 14px/1.5 var(--utility-font);color:var(--muted);margin-bottom:14px}.section-heading h2{font-size:30px;line-height:1.6;font-weight:600}.mobile-break{display:none}.demo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.demo-card{border:0;background:none;padding:0;text-align:left;min-width:0}.demo-image{display:block;aspect-ratio:1.35;overflow:hidden;background:var(--canvas);border-radius:4px;border:1px solid var(--line)}.demo-image img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}.demo-card:hover img{transform:scale(1.035)}.demo-caption{display:flex;gap:10px;justify-content:space-between;align-items:baseline;margin-top:13px;font-size:14px}.demo-caption strong{font:500 14px var(--utility-font)}.demo-caption span{color:var(--muted);font-size:14px}.photo-note{font-size:14px;color:var(--muted);margin-top:28px}
.demo-dialog{width:min(1120px,calc(100% - 48px));max-height:90svh;padding:0;border:0;border-radius:8px;background:white;color:var(--ink);box-shadow:0 15px 80px #0005}.demo-dialog::backdrop{background:#111927b3;backdrop-filter:blur(8px)}.dialog-header{position:sticky;top:0;z-index:1;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:20px}.dialog-header h2{font-size:16px;font-weight:500}.dialog-close{border:0;background:var(--canvas);border-radius:50%;font:28px/1 Arial;width:40px;height:40px}.dialog-close:hover{background:var(--line)}.dialog-body{overflow:auto}.demo-full{width:100%;height:auto}
@media(min-width:1800px){.showcase{left:51%}.composition{transform:translateY(-51%) var(--tilt) scale(1.12)}}
@media(max-width:1199px){.site-header{gap:36px;height:80px}.hero{height:740px;min-height:740px}.hero-copy{width:51%}.hero h1{font-size:clamp(36px,4vw,46px)}.lead{font-size:16px;max-width:440px}.desktop-break{display:none}.audience{max-width:380px}.showcase{left:56%}.composition{transform:translateY(-51%) var(--tilt) scale(.9);transform-origin:left center}.hero-actions{gap:20px}.button{gap:24px}.site-header nav{gap:25px}.demo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.section-heading h2{font-size:26px}}
@media(max-width:900px){.site-header nav{display:none}.hero{display:block;height:1060px;min-height:0}.hero-copy{margin:0;padding:45px var(--gutter) 0;width:100%;max-width:none}.hero h1{font-size:46px;line-height:1.5}.hero h1 .phrase-a,.hero h1 .phrase-b{display:inline}.eyebrow{margin-bottom:16px}.lead{max-width:none;margin-top:16px}.hero-actions{margin-top:25px}.audience{max-width:none;margin-top:18px}.showcase{left:11%;top:390px;width:90%;height:650px}.composition{top:0;transform:var(--tilt) scale(.77);transform-origin:left top}body[data-layout="front"] .hero{height:1000px}body[data-layout="front"] .hero h1 .phrase-c{display:block}body[data-layout="front"] .hero-copy{padding-top:45px}body[data-layout="front"] .showcase{top:410px;width:1470px}body[data-layout="front"] .composition{transform:scale(.835);transform-origin:top left}.demo-section{padding-top:65px}.section-heading{display:block}.section-heading>.text-link{margin-top:18px}.demo-grid{gap:24px 18px}.demo-caption{flex-wrap:wrap;gap:3px 8px}}
@media(max-width:599px){:root{--gutter:24px}.site-header{height:76px;gap:20px}.brand img{width:70px}.header-cta{font-size:12px;padding:10px 15px;gap:17px;border-radius:4px}.header-cta svg{width:17px;height:17px}.hero{height:910px}.hero-copy{padding-top:35px}.eyebrow{font-size:11px;margin-bottom:18px}.hero h1{font-size:clamp(29px,7.9vw,43px);line-height:1.65}.hero h1 .phrase-a,.hero h1 .phrase-b{display:inline}.lead{font-size:14px;line-height:1.95;margin-top:18px;max-width:390px}.hero-actions{margin-top:24px;gap:22px}.button{min-height:52px;padding:10px 19px;font-size:14px;gap:30px}.text-link{font-size:13px;gap:9px}.audience{font-size:11px;line-height:1.8;margin-top:18px;max-width:350px}.showcase{left:12px;top:440px;width:calc(100% + 100px);height:450px}.composition{transform:var(--tilt) scale(.50);width:835px;top:0;left:0;transform-origin:top left}.demo-section{padding-top:48px;padding-bottom:100px}.section-label{font-size:11px;margin-bottom:10px}.section-heading h2{font-size:23px;line-height:1.65}.mobile-break{display:block}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}.demo-caption strong,.demo-caption span{font-size:11px}.photo-note{font-size:12px}.demo-dialog{width:calc(100% - 24px);max-height:94svh}.dialog-header{padding:10px 14px}.dialog-header h2{font-size:12px}.dialog-close{width:34px;height:34px;font-size:25px}body[data-layout="front"] .hero{height:860px}body[data-layout="front"] .hero-copy{padding-top:35px;text-align:left}body[data-layout="front"] .hero h1{font-size:clamp(29px,7.9vw,43px);line-height:1.65}body[data-layout="front"] .eyebrow{margin-bottom:18px}body[data-layout="front"] .hero-actions{justify-content:flex-start;margin-top:24px}body[data-layout="front"] .lead{margin-top:18px}body[data-layout="front"] .audience{margin-top:18px}body[data-layout="front"] .showcase{top:465px;width:704px;height:340px}body[data-layout="front"] .composition{transform:scale(.4)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.parallax-layer{transform:none;will-change:auto}}

body.dialog-open{overflow:hidden}
@media(min-width:901px){
  .desktop-break{display:initial}
  .audience{max-width:none}
  body[data-layout="front"] .hero{height:auto}
  body[data-layout="front"] .showcase{position:relative;top:auto;margin-top:12px;height:500px}

}
@media(max-width:599px){
  .hero h1,body[data-layout="front"] .hero h1{font-size:clamp(22px,6.8vw,34px);line-height:1.65}
  .hero h1 .phrase-a,.hero h1 .phrase-b{white-space:nowrap}
  body[data-layout="front"] .hero{height:auto;padding-bottom:44px}
  body[data-layout="front"] .showcase{position:relative;top:auto;margin-top:35px;width:900px;height:340px}
  body[data-layout="front"] .composition{transform:none}
  body[data-layout="front"] .screen{width:220px}
  body[data-layout="front"] .screen .screen-surface{height:230px}
  body[data-layout="front"] .screen.haruno{left:330px;top:16px;width:240px}
  body[data-layout="front"] .screen.haruno .screen-surface{height:250px}
  body[data-layout="front"] .screen.tsugumi{left:98px;top:58px;width:220px}
  body[data-layout="front"] .screen.shizuri{left:582px;top:68px;width:220px}
  body[data-layout="front"] .screen.fieldwork{left:-134px;top:118px}
  body[data-layout="front"] .screen.hiyori{left:814px;top:128px}

}
@media(max-width:359px){:root{--gutter:20px}.hero-actions{gap:15px}.hero-actions .button{gap:12px;padding-inline:14px;font-size:13px}.hero-actions .button svg{width:20px;height:20px}.hero-actions .text-link{font-size:12px;gap:8px}.hero-actions .text-link svg{width:17px;height:17px}}
.button,.text-link{white-space:nowrap}

/* 装飾はリンク名として読み上げない。 */
.hero-content{display:contents}
.eyebrow{display:flex;align-items:center;gap:9px}
.wordpress-mark{width:24px;height:24px;flex:0 0 24px}
.eyebrow-product{white-space:nowrap}
.lead strong{font-weight:600;color:#374151}
.audience{list-style:none;padding:0;margin-bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.audience li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.audience svg{width:20px;height:20px;flex:0 0 20px;stroke-width:1.5;color:#536477}
/* 共通CTAモチーフ: 写真や立体影を使わず、線幅・角丸・二層の動きを揃える。 */
.cta-motif{display:block;width:42px;height:34px;flex:0 0 42px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta-motif .motif-layer{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s}
.cta-motif .motif-layer-back{opacity:.6;transform:rotate(-8deg)}
.cta-motif .motif-layer-front{transform:rotate(5deg)}
.header-cta{gap:12px;flex-shrink:0;white-space:nowrap}
.header-panel{display:contents}
.menu-toggle{display:none}
.header-cta .cta-motif{width:34px;height:26px;flex-basis:34px;transform:none;margin:0}
.hero-actions{flex-wrap:wrap}
.hero-actions a .cta-motif{width:42px;height:34px;transform:none;margin:0}
:is(.hero-actions a,.header-cta,.cta-motif-link):is(:hover,:focus-visible) .cta-motif{transform:none}
:is(.hero-actions a,.header-cta,.cta-motif-link):is(:hover,:focus-visible) .motif-layer-back{transform:translate(-1px,-1px) rotate(-16deg);opacity:.8}
:is(.hero-actions a,.header-cta,.cta-motif-link):is(:hover,:focus-visible) .motif-layer-front{transform:translate(2px,-1px) rotate(10deg)}
@media(max-width:900px){.hero-actions{gap:14px}.hero-actions :is(.button,.text-link){gap:10px}.hero-actions .text-link{padding:10px 16px;border-radius:7px;background:#1b1e24;color:#fff}}
@media(max-width:359px){.hero-actions{flex-wrap:wrap}}
/* PC: 小さな画面群を2枚の画像で合成し、コピーの背後も同じ密度で散らす。 */
@media(min-width:901px){
  /* ヘッダーを浮かせても、採択済みヒーローの画面上の位置・高さは保つ。 */
  body.sales-renewal .site-header{
    position:absolute;inset:10px 20px auto;height:62px;padding-inline:clamp(24px,calc(var(--gutter) - 24px),64px);gap:48px;
    border:1px solid #ffffffc7;border-radius:18px;
    background:linear-gradient(125deg,#ffffffa3,#ffffff85);
    -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);
    box-shadow:inset 0 1px 1px #ffffffed,inset 0 -1px 1px #ffffff8c,0 0 0 1px var(--glass-edge),0 8px 24px -18px #293e5140;
  }
  body.sales-renewal .hero{background:#fff;overflow:clip;height:100svh;min-height:836px;max-height:1036px;padding-top:96px}
  body.sales-renewal .showcase{top:96px;height:calc(100% - 96px)}
  body.sales-renewal .ambient-layer{top:-34px;height:calc(100% + 164px)}
  body.sales-renewal .ambient-screens{display:block}
  body.sales-renewal .hero-content{display:block;position:relative;width:calc(100% - var(--gutter)*2);max-width:1400px;margin-inline:auto;pointer-events:none}
  body.sales-renewal .hero-copy{z-index:auto;width:56%;max-width:640px;margin-left:0;padding:34px 32px 32px}
  /* ガラスは小画面の背景だけをぼかし、主役の斜め画面は鮮明なまま前へ重ねる。 */
  body.sales-renewal .hero-copy::before{content:"";position:absolute;inset:0;z-index:0;border:1px solid #ffffffc7;border-radius:28px;background:linear-gradient(130deg,#ffffff26,#ffffff0a 65%,#ffffff1a);box-shadow:inset 0 1px 2px #ffffffed,inset 1px 0 2px #ffffff94,inset 0 -1px 2px #ffffff9c,0 0 0 1px var(--glass-edge),0 12px 40px -25px #293e512e;-webkit-backdrop-filter:blur(5px) saturate(1.06);backdrop-filter:blur(5px) saturate(1.06)}
  body.sales-renewal .hero-copy>*{position:relative;z-index:2}
  body.sales-renewal .eyebrow{gap:10px;font-size:13px;font-weight:600;line-height:1.7;color:#3d4552;margin-bottom:26px}
  body.sales-renewal .eyebrow-product{margin-left:3px;color:#596473;font-size:13px;font-weight:500}
  body.sales-renewal .hero h1{font-size:clamp(30px,3.2vw,46px);font-weight:600;line-height:1.5}
  body.sales-renewal .hero h1 span{white-space:nowrap}
  body.sales-renewal .lead{font-size:16px;line-height:1.95;margin-top:28px;color:#505968;max-width:none}
  body.sales-renewal .hero-actions{gap:14px;margin-top:34px}
  body.sales-renewal .hero-actions :is(.button,.text-link){
    position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;
    min-height:62px;padding:12px 22px;border-radius:10px;
    font-size:15px;font-weight:600;line-height:1.6;border:1px solid transparent;
    transition:background-color .3s,border-color .3s,box-shadow .3s,transform .3s,color .3s;
  }
  body.sales-renewal .hero-actions .primary{
    min-width:180px;color:#fff;border-color:#234cbd;
    background:linear-gradient(180deg,#ffffff14 0%,#ffffff00 100%),#2a58cb;
    box-shadow:inset 0 1px 0 #ffffff40,0 2px 3px #163f9124,0 6px 14px -7px #234ca457;
  }
  body.sales-renewal .hero-actions .primary:is(:hover,:focus-visible){
    background-color:#204dbf;border-color:#163da7;
    box-shadow:inset 0 1px 0 #ffffff52,0 3px 5px #163f9124,0 12px 24px -9px #234ca46b;
    transform:translateY(-2px);
  }
  body.sales-renewal .hero-actions .text-link{
    min-width:178px;color:#fff;background:linear-gradient(180deg,#ffffff0d,#ffffff00),#1b1e24;border-color:#16191f;
    box-shadow:inset 0 1px 0 #ffffff26,0 2px 3px #1018261a,0 6px 14px -7px #1018264d;
  }
  body.sales-renewal .hero-actions .text-link:is(:hover,:focus-visible){
    color:#fff;background-color:#303640;border-color:#252b36;transform:translateY(-2px);
    box-shadow:inset 0 1px 0 #ffffff38,0 9px 20px -8px #15203366;
  }
  body.sales-renewal .hero-actions a:active{transform:translateY(0);box-shadow:inset 0 1px 3px #152b5426}
  body.sales-renewal .hero-actions a:focus-visible{outline:2px solid #275cdf;outline-offset:4px}
  body.sales-renewal .audience{gap:12px 24px;margin-top:26px;font-size:13px;font-weight:500;line-height:1.7;max-width:none;color:#596473}
  body.sales-renewal .header-cta{padding:8px 22px 8px 18px;border:1px solid #151b24;border-radius:9px;box-shadow:inset 0 1px 0 #ffffff1a;transition:background-color .3s,border-color .3s,box-shadow .3s}
  body.sales-renewal .header-cta:hover{border-color:#1c47b7;box-shadow:inset 0 1px 0 #ffffff38,0 5px 12px -8px #24478566}
}
/* SP・タブレット: 画像群を全面へ敷き、グラス全体をその手前で中央に置く。 */
@media(max-width:1199px){
  body.sales-renewal .hero{
    display:grid;place-items:center;min-height:max(900px,100svh);height:auto;max-height:none;
    padding:144px 32px 112px;background:#fff;overflow:clip;
  }
  body.sales-renewal .ambient-screens{display:block}
  body.sales-renewal .ambient-layer{top:-130px;height:calc(100% + 260px)}
  body.sales-renewal .showcase{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none}
  body.sales-renewal .composition{
    top:50%;left:50%;width:848px;height:1250px;
    transform:translate(-50%,-50%) var(--tilt) scale(1.05);transform-origin:center;
  }
  body.sales-renewal .hero-content{display:block;position:relative;z-index:2;width:100%;max-width:620px;margin:0 auto;pointer-events:none}
  body.sales-renewal .hero-copy{position:relative;isolation:isolate;width:100%;max-width:none;margin:0;padding:40px;text-align:center}
  body.sales-renewal .hero-copy::before{
    content:"";position:absolute;inset:0;z-index:0;border:1px solid #ffffffc7;border-radius:28px;
    background:linear-gradient(130deg,#ffffffb8,#ffffff8c 65%,#ffffffa3);
    box-shadow:inset 0 1px 2px #ffffffed,inset 1px 0 2px #ffffff94,inset 0 -1px 2px #ffffff9c,0 0 0 1px var(--glass-edge),0 12px 40px -25px #293e512e;
    -webkit-backdrop-filter:blur(12px) saturate(1.06);backdrop-filter:blur(12px) saturate(1.06);
  }
  body.sales-renewal .hero-copy>*{position:relative;z-index:1}
  body.sales-renewal .eyebrow{justify-content:center;gap:10px;font-size:13px;font-weight:600;line-height:1.7;color:#3d4552;margin-bottom:24px}
  body.sales-renewal .eyebrow-product{font-size:inherit;font-weight:500;color:#596473;margin:0}
  body.sales-renewal .hero h1{font-size:clamp(30px,4.5vw,40px);font-weight:600;line-height:1.55;letter-spacing:normal}
  body.sales-renewal .hero h1 span{display:block;white-space:nowrap}
  body.sales-renewal .lead{font-size:16px;line-height:1.95;color:#454e5c;max-width:none;margin-top:24px}
  body.sales-renewal .desktop-break{display:initial}
  body.sales-renewal .hero-actions{justify-content:center;gap:14px;margin-top:28px}
  body.sales-renewal .hero-actions :is(.button,.text-link){
    display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:62px;
    padding:12px 22px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.6;border:1px solid transparent;
  }
  body.sales-renewal .hero-actions .primary{min-width:180px;background:linear-gradient(180deg,#ffffff14,#ffffff00),#2a58cb;border-color:#234cbd;color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 2px 3px #163f9124,0 6px 14px -7px #234ca457}
  body.sales-renewal .hero-actions .text-link{min-width:178px;background:linear-gradient(180deg,#ffffff0d,#ffffff00),#1b1e24;border-color:#16191f;color:#fff;box-shadow:inset 0 1px 0 #ffffff26,0 2px 3px #1018261a,0 6px 14px -7px #1018264d}
  body.sales-renewal .hero-actions .primary:is(:hover,:focus-visible){background-color:#204dbf}
  body.sales-renewal .hero-actions .text-link:is(:hover,:focus-visible){background-color:#303640}
  body.sales-renewal .hero-actions .cta-motif{width:42px;flex-basis:42px;transform:none;margin:0}
  body.sales-renewal .audience{justify-content:center;gap:12px 24px;font-size:12px;font-weight:500;line-height:1.7;color:#596473;max-width:none;margin-top:24px}
}
@media(max-width:900px){
  body.sales-renewal .site-header{
    position:absolute;inset:12px 16px auto;height:64px;padding-inline:20px;gap:20px;
    border:1px solid #ffffffc7;border-radius:16px;background:linear-gradient(125deg,#ffffffa3,#ffffff85);
    -webkit-backdrop-filter:blur(14px) saturate(1.06);backdrop-filter:blur(14px) saturate(1.06);
    box-shadow:inset 0 1px 1px #ffffffed,inset 0 -1px 1px #ffffff8c,0 0 0 1px var(--glass-edge),0 8px 24px -18px #293e5140;
  }
  body.sales-renewal .brand img{width:70px}
  body.sales-renewal .header-cta{font-size:12px;padding:9px 14px;border:1px solid #151b24;border-radius:9px;box-shadow:inset 0 1px 0 #ffffff1a}
}
@media(max-width:639px){
  body.sales-renewal .site-header{inset:0 0 auto;height:58px;padding-inline:20px;border:0;border-radius:0;box-shadow:0 8px 12px -10px #293e5147}
  body.sales-renewal .hero{min-height:max(820px,100svh);padding:128px 16px 100px}
  body.sales-renewal .composition{transform:translate(-50%,-50%) var(--tilt) scale(.78)}
  body.sales-renewal .hero-content{max-width:440px}
  body.sales-renewal .hero-copy{padding:30px 22px}
  body.sales-renewal .hero-copy::before{border-radius:24px}
  body.sales-renewal .eyebrow{font-size:12px;gap:5px;margin-bottom:10px}
  body.sales-renewal .eyebrow-label{text-align:left;font-size:12px;line-height:1.4}
  body.sales-renewal .wordpress-mark{width:40px;height:40px;flex-basis:40px}
  body.sales-renewal .eyebrow-product{display:block}
  body.sales-renewal .hero h1{font-size:clamp(21px,6.7vw,32px)}
  body.sales-renewal .lead{font-size:15px;line-height:1.95;margin-top:20px}
  body.sales-renewal .desktop-break{display:none}
  body.sales-renewal .hero-actions{flex-direction:column;gap:12px;margin-top:24px}
  body.sales-renewal .hero-actions :is(.button,.text-link){width:100%;max-width:300px;min-height:56px;gap:14px;padding:10px 16px;font-size:14px}
  body.sales-renewal .audience{flex-direction:column;gap:8px;margin-top:22px;font-size:11px}
  body.sales-renewal .audience svg{width:18px;height:18px;flex-basis:18px}
}
@media(prefers-reduced-motion:reduce){.ambient-layer{transform:none;will-change:auto}}