.phone-section { margin-top:150px; border-radius:56px 56px 0 0; background:linear-gradient(125deg,#777069,#696663); color:#FFF8EE; isolation:isolate; }
.phone-layout { display:grid; grid-template-columns:1.15fr 1fr; min-height:420px; gap:50px; align-items:center; position:relative; }
.phone-copy { padding:65px 0; position:relative; z-index:2; }
.phone-copy .gradient { background:linear-gradient(110deg,#FFF8EE,#E4CFAD); background-clip:text; -webkit-background-clip:text; color:transparent; }
.phone-copy h2 { color:#FFF8EE; font-size:clamp(36px,3.7vw,54px); line-height:1.1; max-width:600px; }
.phone-copy>p:not(.eyebrow) { font-size:15px; line-height:1.8; margin:24px 0; color:#FFF8EE; }
.phone-copy .eyebrow { color:#FFF8EE; }
.phone-copy .button { margin:0 0 18px; }
.phone-copy>.text-link { display:flex; width:fit-content; font-size:12px; color:#FFF8EE; }
.phone-visual { margin:-105px -20px -20px -65px; position:relative; align-self:end; pointer-events:none; }
.phone-visual img { width:100%; max-height:580px; object-fit:contain; height:auto; display:block; filter:drop-shadow(0 22px 18px #80664B26); transform-origin:50% 60%; }
@media(prefers-reduced-motion:no-preference) {
  .phone-section.is-in-view .phone-visual img { animation:phone-wiggle 8s ease-in-out infinite; }
}
@keyframes phone-wiggle {
  0%,100% { transform:translate3d(0,0,0) rotate(-.7deg); }
  18% { transform:translate3d(3px,-7px,0) rotate(.6deg); }
  38% { transform:translate3d(-2px,-4px,0) rotate(-.4deg); }
  60% { transform:translate3d(4px,-10px,0) rotate(.8deg); }
  82% { transform:translate3d(-3px,-3px,0) rotate(-.5deg); }
}
@media(max-width:800px) {
  .phone-section { margin-top:115px; border-radius:38px 38px 0 0; }
  .phone-layout { grid-template-columns:1.15fr 1fr; gap:10px; min-height:350px; }
  .phone-copy { padding:45px 0; }
  .phone-copy h2 { color:#FFF8EE; font-size:35px; }
  .phone-copy .button { font-size:11px; padding-inline:17px; }
  .phone-visual { margin:-75px -15px 0 -40px; align-self:center; }
}
@media(max-width:540px) {
  .phone-section { margin-top:110px; border-radius:30px 30px 0 0; }
  .phone-layout { display:flex; flex-direction:column; gap:0; }
  .phone-visual { order:-1; align-self:center; margin:-70px 0 0; width:80%; max-width:310px; }
  .phone-copy { padding:12px 0 48px; width:100%; }
  .phone-copy h2 { color:#FFF8EE; font-size:35px; }
  .phone-copy>p:not(.eyebrow) { font-size:14px; }
  .phone-copy .button { min-height:54px; width:100%; font-size:12px; }
}

.phone-copy .button-primary { background:linear-gradient(120deg,#F4EDE3,#DED4C7); color:#584A40; border-color:#EFE5D7; box-shadow:0 8px 24px #453C341C,inset 0 1px #FFFFFFA6; }
.phone-copy .button-primary:hover { background:linear-gradient(120deg,#FFF8EF,#E9DFD2); border-color:#FFF8EF; box-shadow:0 10px 28px #453C3426,inset 0 1px #FFFFFF; }
.phone-copy .button-primary:focus-visible { outline-color:#FFF8EE; }
